ใช้ชุดเค้าโครงแฟชั่นของ Divi เพื่อสร้างร้านค้าออนไลน์ด้วย WooCommerce

Fashion Layout Pack ใหม่ของ Divi มีการตั้งค่าที่ยอดเยี่ยมสำหรับร้านค้าออนไลน์ทุกแห่ง การผสานรวมโมดูลร้านค้าและการจัดวางเลย์เอาต์ของเพจช่วยให้คุณมีจุดเริ่มต้นที่สำคัญ แต่เพื่อให้เลย์เอาต์นี้พร้อมใช้งานในฐานะร้านค้าออนไลน์ที่ใช้งานได้ เราจำเป็นต้องมีปลั๊กอิน WooCommerce และคุณอาจแปลกใจว่า Divi และ WooCommerce ทำงานร่วมกันได้ดีเพียงใด

ในบทช่วยสอนนี้ ฉันจะแสดงวิธีสร้างร้านค้าออนไลน์โดยใช้ชุดเค้าโครงแฟชั่นของ Divi โดยใช้ Woocommerce ฉันจะแนะนำวิธีตั้งค่าเลย์เอาต์ของคุณเพื่อปรับแต่งอย่างเหมาะสม วิธีทำให้หน้าร้านค้ามีชีวิตชีวาด้วยการรวม Woocommerce และเคล็ดลับบางประการเกี่ยวกับวิธีใช้องค์ประกอบของเลย์เอาต์และเครื่องมือปรับแต่งธีมเพื่อจัดสไตล์เพจ Woocommerce

การตั้งค่า

เพื่อประโยชน์ของเวลา ฉันจะเริ่มบทช่วยสอนนี้โดยทำตามขั้นตอนบางอย่างที่เสร็จสมบูรณ์แล้ว

1. ติดตั้งและเปิดใช้งาน Divi Theme
2. ติดตั้งและเปิดใช้งาน WooCommerce
3. ดาวน์โหลด Fashion Layout Pack และนำเข้าไฟล์ Fashion_All.json ไปยัง Divi Theme Library ของคุณ
4. สร้างหน้าใหม่สำหรับแต่ละเลย์เอาต์
5. สร้างเมนูหลักของคุณ

หากคุณสับสนกับการตั้งค่าที่แสดงด้านบน คุณสามารถค้นหาคำแนะนำโดยละเอียดเพิ่มเติมเกี่ยวกับวิธีตั้งค่าเลย์เอาต์ของคุณอย่างเหมาะสมโดยดู 10 ขั้นตอนเหล่านี้สำหรับการใช้เลย์เอาต์แพ็กสำหรับโปรเจ็กต์ใหม่ของคุณ

เมื่อคุณทำครบ 5 ขั้นตอนข้างต้นแล้ว คุณก็พร้อมที่จะเริ่มต้น

แอบดู

นี่คือตัวอย่างบางส่วนของหน้า WooCommerce ที่คุณจะสร้างขึ้น

ใช้ชุดเค้าโครงแฟชั่นของ Divi เพื่อสร้างร้านค้าออนไลน์ด้วย WooCommerce

สมัครสมาชิกช่อง Youtube ของเรา

เปลี่ยนสีสำเนียงสากลของคุณ

ในการเริ่มต้น เราจะเปลี่ยนสีเน้นเสียงส่วนกลางสำหรับธีม Divi การเปลี่ยนสีของส่วนเน้นส่วนกลางเพื่อให้เข้ากับเลย์เอาต์ของคุณนั้นเป็นความคิดที่ดี แต่ก็เป็นวิธีที่ง่ายที่สุดในการจับคู่หน้า WooCommerce กับชุดสีของคุณโดยไม่ต้องใช้ CSS ที่กำหนดเอง คุณจะสังเกตเห็นการใช้สีเฉพาะจุดเพื่อจัดรูปแบบองค์ประกอบในหน้า WooCommerce ทุกหน้าของคุณ เช่น หน้าผลิตภัณฑ์เดียว หน้ารถเข็น ฯลฯ

หากต้องการเปลี่ยน Global Accent Color ให้ไปที่ Theme Customizer และไปที่ General Settings > Layout Settings และค้นหาตัวเลือก Theme Accent Color ที่ด้านล่าง

ฉันใช้สีชมพูนี้จากเลย์เอาต์: #fc7086

จากนั้น เมื่อคุณเปลี่ยนแล้ว ให้บันทึกและเผยแพร่การตั้งค่าของคุณ และรีเฟรชหน้าเว็บของคุณเพื่อให้สีเฉพาะจุดอัปเดตการตั้งค่าอื่นๆ ภายในเครื่องมือปรับแต่ง

อัปเดตการตั้งค่าตัวพิมพ์ในตัวปรับแต่งธีม

เนื่องจาก WooCommerce ใช้การตั้งค่าตัวปรับแต่งธีมเริ่มต้นของคุณเพื่อจัดรูปแบบข้อความสำหรับแต่ละหน้า คุณจะต้องแน่ใจว่าคุณจับคู่รูปแบบตัวอักษรที่ใช้ในเลย์เอาต์ของคุณกับการตั้งค่าตัวพิมพ์ในตัวปรับแต่งธีม

หากต้องการอัปเดตรูปแบบตัวอักษรของคุณ ให้ไปที่ Divi > เครื่องมือปรับแต่งธีม > การตั้งค่าทั่วไป > Typography และอัปเดตสิ่งต่อไปนี้:

ขนาดข้อความเนื้อหา: 16px
ความสูงของเส้นร่างกาย: 1.9
ขนาดข้อความส่วนหัว: 42
รูปแบบตัวอักษรของส่วนหัว: B
แบบอักษรของส่วนหัว: Playfair Display
แบบอักษรของร่างกาย: Poppins
Body Link Color: [หากคุณอัปเดตสีเน้นเสียงส่วนกลางของคุณ สีนี้ควรแสดงที่นี่]

ตั้งหน้าร้านค้า WooCommerce

WooCommerce ให้คุณกำหนดว่าหน้าใดที่คุณต้องการให้เป็นหน้าร้านค้าหลักของคุณ หน้านี้ควรรวมหมวดหมู่สินค้าทั้งหมด เพื่อให้ผู้ใช้ทราบทุกอย่างที่ร้านค้าของคุณนำเสนอ เนื่องจากเลย์เอาต์ของเรามีหน้าร้านค้า มาสร้างหน้าร้านค้าหลักของเรากัน

จากแดชบอร์ด WordPress ของคุณ ให้ไปที่ WooCommerce > การตั้งค่า และคลิกแท็บผลิตภัณฑ์ที่ด้านบนของหน้า ในเมนูด้านล่างแท็บโดยตรง ให้เลือก แสดง จากนั้นเลือกหน้าร้านค้าไปยังหน้า "ร้านค้า" ที่คุณสร้างด้วยเค้าโครงหน้าร้านค้าใหม่จากแพ็คเค้าโครงแฟชั่น

จากนั้นบันทึกการเปลี่ยนแปลง

เพิ่มสินค้าไปยังร้านค้าของคุณ

คุณอาจสังเกตเห็นว่าหน้าร้านค้าของคุณ แม้ว่าจะมีโมดูลร้านค้าสองโมดูล แต่ก็ไม่แสดงสินค้าใดๆ เห็นได้ชัดว่าคุณต้องเพิ่มผลิตภัณฑ์ก่อน ในการเพิ่มสินค้าใหม่ไปยังร้านค้าของคุณ ไปที่แดชบอร์ด WordPress ของคุณและทำตามขั้นตอนเหล่านี้:

1. ไปที่ ผลิตภัณฑ์ > เพิ่มใหม่
2. ป้อนชื่อผลิตภัณฑ์
3. ป้อนคำอธิบายสำหรับผลิตภัณฑ์
4. ใส่ราคาสินค้า
5. ใส่คำอธิบายสั้น ๆ สำหรับสินค้า
6. เพิ่มหมวดหมู่ใหม่สามหมวดหมู่ (ฤดูร้อน รายการเด่น และลดราคา)
7. เลือกหมวดหมู่สำหรับสินค้าของคุณ (ในกรณีนี้ จะเป็น Summer)
8. เพิ่มรูปภาพสินค้า
9. เผยแพร่/อัปเดตผลิตภัณฑ์

กำหนดหมวดหมู่ให้กับผลิตภัณฑ์ของคุณ

ขณะที่คุณทำตามขั้นตอนข้างต้นซ้ำเพื่อสร้างผลิตภัณฑ์ใหม่เพิ่มเติม อย่าลืมกำหนดหมวดหมู่ให้กับแต่ละรายการ (#7 ในขั้นตอนที่แสดงด้านบน) สำหรับบทช่วยสอนนี้ ฉันได้เพิ่มผลิตภัณฑ์ 6 รายการภายใต้หมวดหมู่ "ฤดูร้อน" ผลิตภัณฑ์ 6 รายการในหมวดหมู่ "รายการแนะนำ" และ 1 ผลิตภัณฑ์ภายใต้หมวดหมู่ "ลดราคา"

อัปเดตโมดูลร้านค้าบนหน้าร้านค้า

เมื่อคุณสร้างสินค้าแล้ว คุณสามารถเพิ่มสินค้าเหล่านี้ไปยังหน้าร้านค้าของคุณได้ ดังที่ฉันได้กล่าวไว้ก่อนหน้านี้ เลย์เอาต์หน้าร้านมีโมดูลร้านค้าอยู่แล้วในเลย์เอาต์ มีหนึ่งส่วนภายใต้ส่วนฤดูร้อนและอีกหนึ่งส่วนภายใต้ส่วนเด่น

ไปที่หน้าร้านค้าและปรับใช้ตัวสร้างภาพ จากนั้นวางเมาส์เหนือโมดูลร้านค้า (ปัจจุบันไม่แสดงผลิตภัณฑ์ใด ๆ ) ใต้แถวที่มีหัวข้อแฟชั่นฤดูร้อน และคลิกที่การตั้งค่าโมดูล

อัปเดตการตั้งค่าให้รวมเฉพาะหมวดหมู่ "ฤดูร้อน"

ตอนนี้คุณควรเห็นผลิตภัณฑ์ทั้งหมดที่เพิ่มในหมวดหมู่ฤดูร้อน

ถัดไป ค้นหาโมดูลร้านค้าภายใต้หัวข้อผลิตภัณฑ์เด่นและอัปเดตการตั้งค่าให้รวมเฉพาะหมวดหมู่เด่น

เพิ่มโมดูลร้านค้าเพื่อแสดงรายการ "ลดราคา" บนหน้าร้านค้า

เนื่องจากเรามีสองหมวดหมู่ (ผลิตภัณฑ์เด่นและแฟชั่นฤดูร้อน) ในหน้าร้านค้า การสร้างหมวดหมู่และผลิตภัณฑ์เพิ่มเติมโดยใช้โมดูลที่ให้ไว้ในเลย์เอาต์จึงเป็นเรื่องง่าย

มาสร้างส่วนอื่นเพื่อแสดงผลิตภัณฑ์ "ลดราคา" ของเรากันเถอะ

ในการดำเนินการนี้ ให้ปรับใช้ตัวสร้างภาพและใช้ตัวเลือกคลิกขวาเพื่อคัดลอกทั้งส่วนที่แสดงผลิตภัณฑ์แฟชั่นฤดูร้อนและวางลงใต้ส่วนผลิตภัณฑ์เด่นโดยตรง

ตอนนี้สิ่งที่คุณต้องทำคือทำการอัปเดตเล็กน้อย

ในแถวที่แสดงพาดหัว ให้คลิกที่ข้อความในโมดูลข้อความ แล้วเปลี่ยนหัวเรื่องเป็น "ลดราคา" แทน "แฟชั่นฤดูร้อน"

จากนั้นเปลี่ยนรูปภาพในคอลัมน์ด้านซ้ายให้สอดคล้องกับสินค้าลดราคาของคุณมากขึ้น

สุดท้าย อัปเดตโมดูลร้านค้าให้รวมเฉพาะหมวดหมู่ "ลดราคา"

จัดสไตล์หน้า WooCommerce ของคุณด้วยเค้าโครงแฟชั่น

WooCommerce สร้างชุดหน้า WooCommerce ของตัวเองโดยอัตโนมัติเมื่อคุณติดตั้งปลั๊กอิน ซึ่งรวมถึงสิ่งต่อไปนี้:

ร้านค้า – ซึ่งเป็นตัวยึดตำแหน่งสำหรับที่เก็บถาวรประเภทโพสต์สำหรับสินค้าของคุณ
รถเข็น – ซึ่งใช้รหัสย่อ [woocommerce_cart] เพื่อสร้างเนื้อหาในรถเข็น
ชำระเงิน – ซึ่งใช้รหัสย่อ [woocommerce_checkout] เพื่อแสดงข้อมูล
บัญชีของฉัน – ซึ่งใช้รหัสย่อ [woocommerce_my_account] เพื่อแสดงข้อมูลลูกค้าเฉพาะที่เกี่ยวข้องกับบัญชีของพวกเขา

เนื่องจากเราได้เลือกหน้าร้านค้าของเราแล้ว จึงไม่จำเป็นต้องมีการออกแบบเพิ่มเติม แต่สำหรับหน้า WooCommerce อีก 3 หน้า เราจำเป็นต้องจัดรูปแบบให้พอดีกับการออกแบบเค้าโครงหน้าอื่นๆ ของเรา

การเพิ่มหัวข้อไปยังตะกร้าสินค้าและหน้าชำระเงิน

มาดูหน้ารถเข็นกันก่อน นี่คือสิ่งที่ดูเหมือนก่อนที่เราจะทำอะไรกับมัน

สังเกตว่าเนื่องจากเราอัปเดตสีเน้นเสียงทั่วโลก ลิงก์และปุ่มของเราจึงตรงกับชุดสีแล้ว และเนื่องจากเราอัปเดตการตั้งค่าการพิมพ์ของเราในเครื่องมือปรับแต่งธีม ส่วนหัวและข้อความเนื้อหาก็ตรงกับธีมของเราด้วย

แต่เราสามารถทำได้ดีกว่านี้เล็กน้อยด้วยการคลิกเพียงไม่กี่ครั้ง ขั้นแรก ไปที่หน้าร้านค้า ปรับใช้ตัวสร้างภาพ และบันทึกส่วนบนที่มีส่วนหัวของหน้าไปยังไลบรารี คุณสามารถตั้งชื่อ "ส่วนหัวของหน้า"

จากนั้นเลื่อนลงไปที่ด้านล่างของหน้าและค้นหาส่วนสุดท้ายที่มีอีเมล optin และรายละเอียดการติดต่อและบันทึกลงในห้องสมุดของคุณด้วยชื่อ "ส่วนท้ายของหน้า"

ตอนนี้ไปแก้ไขหน้ารถเข็นของคุณ จากตัวแก้ไขหน้าเริ่มต้น ให้เลือกใช้ Divi Builder จากนั้นเลือก "ใช้ Visual Builder" ตัวสร้างควรใส่รหัสย่อ [woocommerce_cart] โดยอัตโนมัติในโมดูลข้อความภายในแถวคอลัมน์หนึ่งของส่วนปกติ ถ้าไม่คุณจะต้องสร้างสิ่งนี้เอง ถัดไป คลิกไอคอนบวกสีน้ำเงินเพื่อเพิ่มส่วนใหม่ภายใต้ส่วนปัจจุบัน เลือกแท็บ "เพิ่มจากไลบรารี" จากนั้นเลือกส่วนใหม่ที่คุณเพิ่งสร้างขึ้นที่เรียกว่า "ส่วนส่วนหัวของหน้า"

จากนั้นลากส่วนนั้นไปที่ด้านบนสุดของหน้าและเปลี่ยนข้อความชื่อเป็น "ตะกร้าสินค้าของคุณ" แค่นั้นแหละ!

คุณสามารถทำขั้นตอนนี้ซ้ำสำหรับหน้าชำระเงินได้เช่นกัน

การออกแบบหน้าบัญชีของฉันโดยใช้ Divi Builder

ตอนนี้คุณรู้วิธีเพิ่มส่วนหัวในหน้า WooCommerce แล้ว ทำเช่นเดียวกันกับหน้าบัญชีของฉัน คราวนี้คุณสามารถเพิ่มส่วนท้ายที่คุณบันทึกไว้ในไลบรารีที่ด้านล่างของหน้านี้

คุณอาจต้องการให้หน้านี้มีลักษณะเฉพาะเพื่อให้ชัดเจนยิ่งขึ้นว่านี่คือหน้าที่จัดการบัญชีของคุณ ดังนั้นแทนที่จะใช้พื้นหลังไล่ระดับสีชมพูสำหรับส่วนหัวและส่วนท้าย ให้ไปที่การตั้งค่าส่วนสำหรับแต่ละส่วนและเปลี่ยนสีการไล่ระดับสีพื้นหลังเป็น #9599e2 และ #8bc6ec

ใช้การตั้งค่าโมดูลข้อความเพื่อจัดรูปแบบเนื้อหารหัสย่อของ WooCommerce

เนื่องจากตอนนี้รหัสย่อของ WooCommerce อยู่ในโมดูลข้อความ คุณสามารถใช้สิ่งนี้เพื่อประโยชน์ของคุณในการจัดรูปแบบองค์ประกอบบางอย่างภายในการตั้งค่าโมดูล

มาทำสิ่งนี้สำหรับหน้าบัญชีของฉัน จากตัวสร้างภาพ ให้อัปเดตการตั้งค่าของโมดูลข้อความที่มีเนื้อหารหัสสั้นดังนี้:

ภายใต้แท็บการออกแบบ...

ขนาดข้อความ: 20px
ความสูงของบรรทัดข้อความ: 1.6em

ตอนนี้คลิกที่แท็บลิงก์ใต้ส่วนข้อความเพื่อจัดรูปแบบลิงก์ดังนี้:

แบบอักษรของลิงก์: Poppins
น้ำหนักแบบอักษรของลิงก์: กึ่งหนา
ขนาดข้อความลิงก์: 27px
ความสูงของสายลิงค์: 1.5em

บันทึกการตั้งค่า

ตอนนี้ตรวจสอบหน้าบัญชีของฉัน

ใช้ CSS ที่กำหนดเองเพื่อจัดรูปแบบหน้าเก็บถาวรของ WooCommerce หรือไม่

หน้าเก็บถาวรบางหน้าที่ใช้โดย WooCommerce ไม่ได้สร้างด้วยรหัสย่อเหมือนหน้าอื่นๆ ดังนั้นจึงไม่สามารถแก้ไขได้โดยใช้ Divi Builder ดังนั้นสำหรับหน้าเหล่านี้ คุณจะต้องแยก CSS ที่กำหนดเองออก

ลองดูหน้าหมวดหมู่เด่นเป็นตัวอย่าง

ตอนนี้เรามาเปิดตัวปรับแต่งธีมและคลิกที่ CSS เพิ่มเติม แล้วเพิ่มสิ่งต่อไปนี้:

.orderby {
background: #fd7792;
color: #fff!important;
font-size: 18px;
height: 40px;
font-size: 18px !important;

}

.woocommerce-Price-amount, .woocommerce .woocommerce-breadcrumb, p.woocommerce-result-count {
    font-size: 16px !important;
    color: #fd7792 !important;
    letter-spacing: 2px;
}

สิ่งนี้จะจัดรูปแบบกล่องดรอปดาวน์การจัดเรียง เกล็ดขนมปัง และฟอนต์ราคา ข้อความที่เหลือสามารถเปลี่ยนแปลงได้โดยใช้การตั้งค่า Typography จากเครื่องมือปรับแต่งธีม

ความคิดสุดท้าย

การสร้างร้านค้าออนไลน์สำหรับเว็บไซต์ของคุณทำได้ง่ายขึ้นมากด้วยความช่วยเหลือของชุดเลย์เอาต์ที่น่าทึ่ง WooCommerce และ Divi Builder เห็นได้ชัดว่ามีความจำเป็นบางอย่างที่ยังต้องทำซึ่งอยู่นอกเหนือขอบเขตของบทความนี้ ตัวอย่างเช่น คุณยังต้องตัดสินใจว่าจะใช้เกตเวย์การชำระเงินใด คุณต้องการจัดการการจัดส่งอย่างไร และรายการการดำเนินการเฉพาะอื่นๆ ของบริษัทอื่นๆ แต่ WooCommerce ควรจะสามารถจัดการสิ่งที่คุณต้องการได้เกือบทั้งหมด

ฉันหวังว่าโพสต์นี้เป็นแรงบันดาลใจให้คุณสร้างสิ่งที่น่าอัศจรรย์ด้วยตัวคุณเอง

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!