WooCommerce เป็นหนึ่งในปลั๊กอินอีคอมเมิร์ซยอดนิยมสำหรับ WordPress เพื่อช่วยในเรื่องนี้ Divi ได้เปิดตัวโมดูลใหม่ที่มี Woo-centric ซึ่งให้อิสระมากขึ้นเมื่อสร้างหน้า WooCommerce มาตรฐานของคุณ เราจะทำงานผ่านการสร้างเส้นเวลารถเข็น WooCommerce สำหรับ Divi ในโพสต์ของวันนี้ เราจะออกแบบภาพการเดินทางของผู้ใช้ในช่วงเวลานี้ การเดินทางของผู้ใช้จากร้านค้าไปยังจุดชำระเงินควรแสดงให้มองเห็นได้ชัดเจน
ดูตัวอย่างการออกแบบ
ก่อนที่เราจะเริ่มออกแบบ เรามาดูกันดีกว่าว่าการออกแบบของเราจะเป็นอย่างไรเมื่อเสร็จแล้ว นี่คือตัวอย่างหน้ารถเข็น
นอกจากนี้ หน้าชำระเงินของเราจะมีลักษณะดังนี้
หากต้องการดาวน์โหลดเทมเพลต คลิกที่นี่ และรับไฟล์ จากนั้นเปิดเครื่องรูด
สร้างเว็บไซต์ที่น่าทึ่ง
ด้วย Elementor ตัวสร้างหน้าฟรีที่ดีที่สุด
เริ่มเลยติดตั้งเทมเพลต
ไปที่ Divi Theme Builder ในแบ็กเอนด์ของเว็บไซต์ WordPress เพื่ออัปโหลดเทมเพลต
จากนั้นไอคอนลูกศรสองอันจะปรากฏขึ้นที่มุมขวาบน สลับไอคอน
คลิก "นำเข้าเทมเพลตตัวสร้างธีม Divi" หลังจากอัปโหลดไฟล์ JSON ที่คุณดาวน์โหลดจากโพสต์นี้ไปยังแท็บนำเข้า
คุณจะสังเกตเห็นเทมเพลตรถเข็น การชำระเงิน และร้านค้าใหม่เมื่อคุณอัปโหลดไฟล์ ทันทีที่คุณต้องการเปิดใช้งานเทมเพลต ให้บันทึกการแก้ไขของคุณใน Divi Theme Builder
สร้างเส้นเวลารถเข็น WooCommerce
ส่วนถัดไปของบล็อกโพสต์ของเราจะสาธิตวิธีสร้างไทม์ไลน์รถเข็น WooCommerce ใหม่สำหรับ Divi หากคุณกำลังมองหาความท้าทายเพิ่มเติมอีกเล็กน้อย ขั้นตอนในคู่มือนี้สามารถใช้เพื่อสร้างไทม์ไลน์ของรถเข็นสำหรับคุณโดยเฉพาะ ใช้มันเป็นแรงจูงใจสำหรับความพยายาม WooCommerce และ Divi ครั้งต่อไปของคุณ! นี่คือลักษณะของไทม์ไลน์รถเข็นของ WooCommerce ที่เราจะสร้าง:
มาเริ่มกันเลยตอนนี้ที่เรามีภาพแทนสิ่งที่เรากำลังจะสร้าง!
การตั้งค่าตัวสร้างธีม Divi
เทมเพลตเหล่านี้ที่เราจะพัฒนาจะส่งผลต่อหน้าชำระเงินและหน้ารถเข็นของ WooCommerce ดังนั้นเราจึงเริ่มทำงานในโครงการของเราใน Divi Theme Builder
ภายในการ์ด เพิ่มเทมเพลตใหม่ ให้คลิกเครื่องหมายบวก
เลือกสร้างเทมเพลตใหม่ถัดไป
หลังจากนั้น กล่องโมดอลที่แสดงรายการการมอบหมายต่างๆ ทั้งหมดที่คุณสามารถแนบกับเทมเพลตใหม่ที่คุณกำลังสร้างจะแสดงให้คุณเห็น ในกรณีนี้ เราจะสร้างเทมเพลตสำหรับหน้าตะกร้าสินค้าของร้านค้า WooCommerce ดังนั้น ไปที่หัวข้อ WooCommerce ในกล่องโมดอลแล้วคลิกรถเข็น หลังจากเลือกแล้ว ให้เลือก สร้างเทมเพลต เมื่อทำเช่นนี้ เราจะติดแท็กหน้ารถเข็นด้วยเทมเพลตที่สร้างขึ้นใหม่
เพื่อพัฒนาเทมเพลตการชำระเงิน เราจะทำตามขั้นตอนที่คล้ายกัน ภายในการ์ด เพิ่มเทมเพลตใหม่ ให้คลิกเครื่องหมายบวก
เลือกสร้างเทมเพลตใหม่อีกครั้ง
เราต้องเลื่อนหน้าต่าง modal ลงมาและเลือก Checkout จากหัวข้อ WooCommerce เพื่อเข้าสู่หน้าชำระเงิน หลังจากเลือกแล้ว ให้เลือก สร้างเทมเพลต
ตอนนี้เราอาจบันทึกเทมเพลตรถเข็นและการชำระเงินหลังจากสร้างแล้ว ที่ด้านบนของตัวสร้างธีม Divi ให้เลือกปุ่มบันทึกการเปลี่ยนแปลงสีเขียว
สร้างขั้นตอนรถเข็น WooCommerce
ความสนุกเริ่มขึ้นแล้ว! เราจะเริ่มร่างกำหนดการสำหรับขั้นตอนรถเข็นของหน้ารถเข็น เพื่อให้บรรลุเป้าหมายนี้ เราเปิดเทมเพลตรถเข็นที่เราเพิ่งสร้างและเลือกปุ่มเพิ่มเนื้อหาที่กำหนดเอง
เราจะเลือกปุ่มสร้างเนื้อหาแบบกำหนดเองที่ปรากฏในกล่องโมดอล เช่นเดียวกับที่เราทำเมื่อเราสร้างเทมเพลตเหล่านี้และการกำหนด
ส่วนและแถวใหม่
เราจะสร้างแถวใหม่เมื่อเราอยู่ใน Divi Builder จะมีห้าคอลัมน์ในแถวนี้
ในคอลัมน์ 1, 3 และ 5 ของแถวใหม่ ให้เพิ่มโมดูลการประกาศสามรายการ
ทำตามการตั้งค่าโมดูลการประกาศแจ้ง:
ประกาศแจ้งครั้งแรก (คอลัมน์ 1)
- หัวเรื่อง : ร้านค้า
- เนื้อหา: เว้นว่างไว้
- ใช้ไอคอน: ใช่
- ไอคอน: ดูภาพหน้าจอด้านล่าง
- URL ของโมดูลลิงก์: /shop (หรือลิงก์ที่กำหนดเองไปยังหน้าร้านค้าของคุณ)
ประกาศแจ้งครั้งที่สอง (คอลัมน์ 3)
- หัวเรื่อง : บทวิจารณ์
- เนื้อหา: เว้นว่างไว้
- ใช้ไอคอน: ใช่
- ไอคอน: ดูภาพหน้าจอด้านล่าง
- URL ของโมดูลลิงก์: /cart (หรือลิงก์ที่กำหนดเองไปยังหน้ารถเข็นของคุณ)
ประกาศแจ้งเรื่องที่สาม (คอลัมน์ 5)
- หัวเรื่อง : ชำระเงิน
- เนื้อหา: เว้นว่างไว้
- ใช้ไอคอน: ใช่
- ไอคอน: ดูภาพหน้าจอด้านล่าง
- URL ของโมดูลลิงก์: /checkout (หรือลิงก์ที่กำหนดเองไปยังหน้าชำระเงินของคุณ)
ณ จุดนี้ เส้นเวลา WooCommerce ของเราจะปรากฏดังนี้:
ไม่ว่าลูกค้าจะเข้าสู่หน้าใด เราต้องการการเข้าถึงโมดูลแจ้งประกาศของเราอย่างง่ายดายในขณะที่เราสร้างเทมเพลตสำหรับรถเข็นและหน้าชำระเงิน ความสามารถของผู้ใช้ปลายทาง—ลูกค้าของคุณ—ในการย้ายระหว่างขั้นตอนการชำระเงินต่างๆ อย่างราบรื่นเป็นองค์ประกอบสำคัญของไทม์ไลน์ WooCommerce ก่อนอื่นเราจะเข้าสู่การตั้งค่าโมดูลของประกาศแรก ร้านค้า เพื่อเพิ่มลิงก์ไปยังร้านค้าเริ่มต้น รถเข็น และหน้าชำระเงินของไซต์
ไม่ว่าลูกค้าจะเข้าสู่หน้าใด เราต้องการการเข้าถึงโมดูลแจ้งประกาศของเราอย่างง่ายดายในขณะที่เราสร้างเทมเพลตสำหรับรถเข็นและหน้าชำระเงิน ความสามารถของผู้ใช้ปลายทาง—ลูกค้าของคุณ—ในการย้ายระหว่างขั้นตอนการชำระเงินต่างๆ อย่างราบรื่นเป็นองค์ประกอบสำคัญของไทม์ไลน์ WooCommerce ก่อนอื่นเราจะเข้าสู่การตั้งค่าโมดูลของประกาศแรก ร้านค้า เพื่อเพิ่มลิงก์ไปยังร้านค้าเริ่มต้น รถเข็น และหน้าชำระเงินของไซต์
โมดูลประกาศแจ้งแต่ละรายการจะได้รับลิงก์ไปยังหน้า WooCommerce ปกติ ทำการปรับเปลี่ยนที่จำเป็นกับลิงก์แบบกำหนดเองใดๆ ที่คุณอาจสร้างไว้สำหรับหน้าเหล่านี้ในการติดตั้ง WooCommerce ของคุณ เราเริ่มต้นด้วย Shop Blurb Module ก่อน พิมพ์ /shop ในช่อง URL ของลิงค์โมดูล นี่คือ URL มาตรฐานของหน้าร้านค้าของ WooCommerce อย่าลืมแทนที่ URL นี้ด้วย URL ส่วนบุคคลของคุณหากคุณอัปเดต
หากต้องการบันทึกการเปลี่ยนแปลง ให้คลิกปุ่มเครื่องหมายถูกสีเขียว ไปที่ Review Blurb Module กันต่อไป ลิงก์ไปยังหน้ารถเข็นมีให้โดยโมดูลนี้ อีกครั้ง แท็บลิงก์ถูกเลือก และ URL ลิงก์โมดูล /cart จะถูกเพิ่มไปยัง URL โมดูล
เราจะเชื่อมโยงไปยังลิงก์หน้าชำระเงินมาตรฐานของ WooCommerce ซึ่งก็คือ /checkout สำหรับโมดูลการแจ้งข่าวล่าสุด นั่นคือ Checkout Blurb Module
โมดูลประกาศแจ้งสไตล์
รูปแบบของโมดูลประกาศแจ้งที่เพิ่มเข้ามาใหม่ของเราจะเริ่มขึ้น ในโมดูล เราจะใช้สไตล์โฮเวอร์ สิ่งนี้ช่วยปรับปรุงประสบการณ์ผู้ใช้ (UX) ของรถเข็น WooCommerce เราต้องการสีอื่นสำหรับ Blurb Module ที่แสดงถึงหน้าที่เรากำลังเปิดอยู่ นอกจากนี้ เราต้องการให้ไอคอนเปลี่ยนสีและขยายใหญ่ขึ้นเมื่อเราวางเมาส์เหนือ
สไตล์โมดูลประกาศแจ้ง
- สีของไอคอน: #eac989
- สีไอคอนโฮเวอร์: #9fa2ce
- การจัดตำแหน่งข้อความ: กึ่งกลาง
ข้อความชื่อเรื่อง:
- ข้อความหัวเรื่อง: H4
- ตัวอักษรชื่อเรื่อง: Baskerville
- น้ำหนักตัวอักษรของชื่อเรื่อง: ตัวหนา
- สีข้อความชื่อเรื่อง: #354e7c
แปลง:
- ขนาดการแปลง (เดสก์ท็อป): 1,00%
- สเกลการแปลง (โฮเวอร์): 115%
เราจะใช้พารามิเตอร์การออกแบบกับโมดูล Blurb อื่นๆ ในแถวของเรา หลังจากที่เรากำหนดค่าโมดูลสำหรับ Blurb โมดูลแรกเสร็จแล้ว
โมดูลในส่วนของเราคือวัตถุที่เราต้องการขยายสไตล์ของเรา นี่เป็นสิ่งสำคัญที่ต้องจำ โดยเฉพาะอย่างยิ่งหากคุณกำลังทำงานในหน้าที่มีเนื้อหาที่มีอยู่
จัดรูปแบบโมดูลประกาศแจ้งรถเข็น
เราจะแสดงขั้นตอนที่ผู้ใช้ของเราใช้สีไอคอนแยกต่างหากเพื่อระบุขั้นตอนต่างๆ ของกระบวนการชำระเงิน ตัวอย่างเช่น เราจะเปลี่ยนสีของโมดูลแจ้งข่าวโดยอ้างอิงขั้นตอนรถเข็นของกระบวนการ หากอยู่ในหน้ารถเข็น
โมดูลประกาศแจ้งหน้ารถเข็น:
- สีไอคอน (เดสก์ท็อป): #f6c6c5
- สีไอคอน (โฮเวอร์): #9fa2ce
เพิ่มตัวแบ่งไทม์ไลน์
เราจะเริ่มต้นด้วยการเพิ่มและปรับแต่งโมดูลตัวแบ่งของเราหลังจากที่เราสร้างและจัดรูปแบบโมดูลการแจ้งเตือนของเราแล้ว คอลัมน์ที่สองและสี่ของแถวของเราประกอบด้วยโมดูลตัวแบ่ง
เส้นแบ่งสไตล์ไทม์ไลน์
ต่อไป เราจะปรับแต่งโมดูลตัวแบ่ง ทำการเปลี่ยนแปลงต่อไปนี้ในการตั้งค่าตัวแบ่ง
ทัศนวิสัย:
- ตัวแบ่งหน้าจอ: ใช่
เส้น:
- สีเส้น: #354e7c
- รูปแบบเส้น: จุด
- ตำแหน่งเส้น: กึ่งกลางแนวตั้ง
ขนาด
- แบ่งน้ำหนัก: 5px
มาคัดลอกและวางสไตล์จากโมดูลตัวแบ่งนี้ไปยังโมดูลอื่นในแถวของเราโดยใช้ฟีเจอร์ Divi อันชาญฉลาด จากนั้นให้เราคลิกขวาที่ Divider Module ที่ทำเสร็จแล้ว จากนั้นเราจะเลือกคัดลอกการตั้งค่าโมดูล จากนั้นเราก็คลิกขวาที่โมดูลตัวแบ่งซึ่งตอนนี้ยังไม่มีรูปแบบ ขั้นตอนสุดท้ายคือการคลิกวางการตั้งค่าโมดูล ประหยัดเวลาคือรายได้!
CSS ที่กำหนดเอง
ขณะนี้ไทม์ไลน์รถเข็น WooCommerce ของเรามีลักษณะดังนี้:
เราจะเพิ่ม CSS บางตัวในแถวของเราเพื่อให้แน่ใจว่าโมดูลตัวแบ่งของเราอยู่ในแนวที่ถูกต้องและทำให้โมดูลไทม์ไลน์ของเราตอบสนองต่อมือถือ
ก่อนอื่นเราต้องป้อนตัวเลือกแถวสำหรับ WooCommerce Cart Timeline ก่อนจึงจะสามารถเพิ่ม Custom CSS ได้ จากนั้นเราเลือกแท็บขั้นสูง สุดท้าย แต่ไม่ท้ายสุด เราจะรวม CSS ต่อไปนี้ไว้ในองค์ประกอบหลัก:
display:flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;ตอนนี้คลิกเครื่องหมายถูกสีเขียวเพื่อบันทึกการตั้งค่า
การตั้งค่าหน้าชำระเงิน
ในหน้ารถเข็นของเรา เราได้วางรากฐานสำหรับลำดับเวลาของรถเข็น WooCommerce แต่เราต้องอัปเดตเทมเพลตหน้าชำระเงินด้วยงานที่เสร็จสมบูรณ์เพื่อทำให้ตารางเวลาของเราเสร็จ เพื่อให้ขั้นตอนของเราสำหรับหน้าชำระเงินง่ายขึ้น เราจะใช้เมนูคลิกขวา ซึ่งเป็นหนึ่งในคุณสมบัติดั้งเดิมของ Divi ไปกันเลย!
คัดลอกลำดับเวลาของรถเข็นจากหน้ารถเข็น
เราจะกลับไปที่หน้าตะกร้าสินค้า เราจะไม่ใช้ Divi Builder สำหรับร่างกาย
คลิกขวาที่ Custom Body ของเทมเพลตรถเข็น หลังจากนั้น เลือกคัดลอกจากเมนูคลิกขวา
ตอนนี้เราจะวางงานที่เราทำเสร็จภายในเทมเพลตรถเข็นลงในเทมเพลตการชำระเงินหลังจากที่เราทำซ้ำแล้ว ในเทมเพลตหน้าชำระเงิน เราคลิกขวาที่ปุ่มเพิ่มเนื้อหาแบบกำหนดเองเพื่อทำสิ่งนี้ เมื่อคุณทำเสร็จแล้ว ตัวเลือกการวางจะปรากฏในเมนู หากต้องการคัดลอกเนื้อหาที่กำหนดเองจากเทมเพลตหน้าชำระเงินไปยังเทมเพลตหน้ารถเข็น ให้คลิกวาง
ตอนนี้คุณจะเห็นว่าเทมเพลตของหน้าชำระเงินและเทมเพลตรถเข็นมีเนื้อความที่กำหนดเอง สิ่งนี้จะช่วยให้เราสามารถเร่งขั้นตอนการออกแบบเว็บไซต์ได้ ขอบคุณ Divi เราจะคลิกปุ่มบันทึกการเปลี่ยนแปลงสีเขียวที่ด้านบนของตัวสร้างเพื่อบันทึกการแก้ไขของเราไปยังเทมเพลตการชำระเงิน
อัปเดตหน้าชำระเงิน
หลังจากลดเวลาจากขั้นตอนการออกแบบแล้ว มาทำการปรับเปลี่ยนหน้าชำระเงินครั้งสุดท้ายเพื่อให้แน่ใจว่าจะรวมเข้ากับส่วนอื่นๆ ของโครงการได้อย่างลงตัว หากต้องการแก้ไข Custom Body ของเทมเพลตหน้าชำระเงิน ขั้นแรกให้คลิกไอคอนดินสอ
ไอคอนเช็คเอาต์สไตล์
เริ่มจัดรูปแบบไอคอนชำระเงินของเราตอนนี้ การตั้งค่าโมดูลของปุ่มชำระเงินจะเปิดขึ้นเมื่อคุณคลิกสัญลักษณ์รูปเฟือง
ไปที่แท็บการออกแบบของโมดูลการตั้งค่าโมดูล ชื่อ "ไอคอนรูปภาพ &" ควรคลิก สีของไอคอนจะเปลี่ยนไป ดังนั้น เลือกไอคอน eyedropper และป้อนค่าเลขฐานสิบหก #f6c6c5 ดังนั้น ไอคอนจะใช้สีของหน้าปัจจุบัน ซึ่งเป็นสีชมพู
อัปเดตไอคอนรถเข็น
จำเป็นต้องย้อนกลับและเปลี่ยนสีไอคอนของไอคอนรถเข็น เราจะกลับไปที่การตั้งค่าโมดูลเพื่อทำสิ่งนี้ให้สำเร็จ จากนั้นเราเลือกไอคอนรูปเฟืองของสัญลักษณ์รถเข็น
เราจะไปที่แท็บการออกแบบการตั้งค่าโมดูลอีกครั้ง หลังจากนั้น ให้เลือกเครื่องมือ eyedropper จากส่วน Picture & Icon จากนั้นป้อน #eac989 ในรูปแบบเลขฐานสิบหก
เมื่อคุณออกจาก Divi Builder แล้ว อย่าลืมบันทึกการตั้งค่าและการทำงานหนักทั้งหมดของคุณ
มาร์จทั้งหมดเข้าด้วยกัน
แม้ว่าไทม์ไลน์ของรถเข็นจะเป็นจุดสนใจหลักของบทช่วยสอนนี้ เทมเพลตยังต้องใช้โมดูล WooCommerce เพิ่มเติมอีกด้วย ต้องเพิ่มโมดูล WooCommerce เพิ่มเติมเหล่านี้ในแต่ละหน้าเทมเพลตเพื่อให้ร้านค้าของคุณสมบูรณ์
เทมเพลตหน้ารถเข็น
- Woo Cart Products: นี่จะแสดงรถเข็นของ WooCommerce
- Woo Cart Totals: แสดงผลรวมย่อย ภาษี และอื่นๆ ด้วยโมดูลนี้
เทมเพลตหน้าชำระเงิน
- โมดูลประกาศ Woo: เราใช้โมดูลนี้เพื่อแสดงข้อผิดพลาด ข้อมูล หรือประกาศใดๆ ที่เกี่ยวข้องกับการเช็คเอาท์
- Woo Checkout Billing: โมดูลนี้จะแสดงรายละเอียดการเรียกเก็บเงินของลูกค้าของคุณ
- รายละเอียดการชำระเงินของ Woo: โมดูลนี้จะแสดงชื่อผลิตภัณฑ์ จำนวน และอื่นๆ จริง ซึ่งแตกต่างจากยอดรวมของรถเข็น
- Woo Checkout Billing: เพื่อแสดงวิธีการชำระเงินที่ใช้ได้ เราได้เพิ่มโมดูลนี้ในหน้าชำระเงิน
ห่อ
ไทม์ไลน์รถเข็นช่วยให้ลูกค้าเห็นภาพการเดินทางผ่านไซต์ของคุณ คุณมีความสามารถในการปรับแต่งและเพิ่มส่วนประกอบใหม่ไปยังร้านค้า WooCommerce ของคุณโดยใช้ Divi คุณสามารถใช้สิ่งที่คุณได้เรียนรู้ที่นี่กับลูกค้าและเว็บไซต์ส่วนตัวของคุณด้วยเครื่องมือของ Divi หากคุณใช้บทช่วยสอนนี้นอกห้องเรียน โปรดแจ้งให้เราทราบ!
