Divi ได้รับการออกแบบให้เข้ากันได้กับ WooCommerce. เพื่อบูรณาการ WooCommerceคุณต้องติดตั้งเวอร์ชันล่าสุดของ WooCommerce.

WooCommerce เป็นปลั๊กอิน E-commerce ซึ่งเราขอแนะนำ เนื่องจากมีชุดคุณลักษณะ อินเทอร์เฟซ และปฏิบัติตามแนวทางการเขียนโค้ดที่ดีที่สุด หลังจากเปิดใช้งานปลั๊กอิน คุณจะเห็นสองส่วนใหม่ “WooCommerce” และ “ผลิตภัณฑ์” ถูกเพิ่มลงในแดชบอร์ด WordPress ของคุณ คุณสามารถใช้พื้นที่เหล่านี้เพื่อปรับการตั้งค่าอีคอมเมิร์ซและเผยแพร่ผลิตภัณฑ์ใหม่ คุณสามารถค้นหา เอกสาร สมบูรณ์ เกี่ยวกับ WooCommerce ที่นี่ .

โปรดทราบว่าแม้ว่าตัวสร้างจะมีโมดูล WooCommerce หลายแบบ แต่คุณยังสามารถใช้ WooCommerce ได้ด้วยตัวเองโดยไม่ต้องใช้ตัวสร้าง คุณสามารถสร้างเพจมาตรฐานสำหรับ Checkout, Shopping Cart ฯลฯ ตามที่แสดงในเอกสาร คุณยังสามารถเชื่อมโยงโดยตรงกับหมวดหมู่ woocommerce ของคุณหรือใช้ไฟล์ รหัสย่อ WooCommerce ในโมดูลข้อความ Divi ช่วยให้คุณมีอิสระในการทำอะไรก็ได้

วิธีเพิ่มโมดูลร้านค้าในหน้าของคุณ

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

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

ค้นหาโมดูลร้านค้าในรายการโมดูลและคลิกเพื่อเพิ่มลงในเพจของคุณ รายการโมดูลสามารถค้นหาได้ซึ่งหมายความว่าคุณสามารถพิมพ์คำว่า "ร้านค้า" จากนั้นคลิก Enter เพื่อค้นหาและเพิ่มโมดูลร้านค้าโดยอัตโนมัติ! เมื่อเพิ่มโมดูลแล้วคุณจะได้รับการต้อนรับจากรายการตัวเลือกโมดูล ตัวเลือกเหล่านี้แบ่งออกเป็นสามกลุ่มหลัก: เนื้อหา , ความคิด et สูง .

ใช้กรณีตัวอย่าง: การแสดงผลิตภัณฑ์ล่าสุดบนหน้าแรกโดยใช้โมดูลร้านค้า

สำหรับตัวอย่างนี้ฉันจะใช้โมดูลร้านค้าเพื่อแสดงผลิตภัณฑ์ล่าสุดบนโฮมเพจ

นี่คือหน้าที่มีการนำเสนอผลิตภัณฑ์สี่รายการ

ขอเริ่มต้น

ใช้ตัวสร้างภาพเพื่อเพิ่มส่วนปกติด้วยแถวความกว้างเต็ม (1 คอลัมน์) เปลี่ยนพารามิเตอร์ row เพื่อทำให้เต็มความกว้างโดยมีความกว้างของรางน้ำที่กำหนดเองเป็น 2

จากนั้นเพิ่มโมดูลร้านค้าลงในบรรทัด

อัพเดตการตั้งค่าโมดูลดังนี้:

ตัวเลือกเนื้อหา

ประเภท: ผลิตภัณฑ์ล่าสุด
จำนวนผลิตภัณฑ์: 4

ตัวเลือกการออกแบบ

ไอคอนเลื่อนสี: # ea1d63
ชื่อตำรวจ: เปิดไม่มี
ขนาดแบบอักษรชื่อเรื่อง: 24px
ตำรวจรางวัล: เปิดโดยไม่ต้อง
ขนาดแบบอักษรราคา: 20px

ตัวเลือกขั้นสูง (CSS ที่กำหนดเอง)

กรรมสิทธิ์:

text-align: center;
พื้นหลัง: #fff;
margin-top: -10px! อย่างมีนัยสำคัญ

กรังปรีซ์:

text-align: center;
พื้นหลัง: #fff;
เบาะลง: 15px;

นั่นคือทั้งหมด! นี่คือผลลัพธ์สุดท้าย

ตัวเลือกเนื้อหาในร้านค้า

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

ชนิดภาพเขียน

เลือกประเภทผลิตภัณฑ์ที่คุณต้องการแสดงในฟีดผลิตภัณฑ์ของคุณ คุณสามารถเลือกจากผลิตภัณฑ์ล่าสุดซึ่งจะแสดงผลิตภัณฑ์ทั้งหมดของคุณตามลำดับเวลาผลิตภัณฑ์แนะนำผลิตภัณฑ์ลดราคาผลิตภัณฑ์ขายดีหรือผลิตภัณฑ์ที่ได้รับคะแนนสูงสุด

จำนวนผลิตภัณฑ์

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

รวมหมวดหมู่

เลือกหมวดหมู่ที่คุณต้องการรวม

จำนวนคอลัมน์

เลือกจำนวนคอลัมน์ที่จะแสดงในโมดูลร้านค้าของคุณ ควรใช้ 4 คอลัมน์สำหรับแถว 1 คอลัมน์ ควรใช้ 3 คอลัมน์สำหรับคอลัมน์ที่มีพื้นที่ 3/4 ของแถว คอลัมน์ 2 ควรใช้สำหรับคอลัมน์ที่ใช้พื้นที่ 1/2 ของแสง ควรใช้หนึ่งคอลัมน์สำหรับคอลัมน์ 1/4 ของพื้นที่แถว

จัดเรียงใหม่ตาม

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

ป้ายกำกับผู้ดูแลระบบ

สิ่งนี้จะเปลี่ยนป้ายชื่อโมดูลในตัวสร้างเพื่อให้ระบุตัวตนได้ง่าย เมื่อคุณใช้มุมมอง WireFrame ใน Visual Builder ป้ายเหล่านี้จะปรากฏในบล็อกโมดูลของอินเทอร์เฟซ Divi Builder

ตัวเลือกการออกแบบการประชุมเชิงปฏิบัติการ

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

ไอคอนซ้อนทับ

เมื่อคุณวางเมาส์เหนือรายการในโมดูลร้านค้าไอคอนวางซ้อนจะปรากฏขึ้น คุณสามารถปรับสีที่ใช้สำหรับไอคอนนี้ได้โดยใช้ตัวเลือกสีในการตั้งค่านี้

สีของภาพซ้อนทับ

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

ไอคอนตัวเลือก

ที่นี่คุณสามารถเลือกไอคอนที่กำหนดเองเพื่อแสดงเมื่อผู้เยี่ยมชมวางเมาส์เหนือรายการจัดเก็บในโมดูล

สีของป้ายการขาย

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

แบบอักษรชื่อ

คุณสามารถเปลี่ยนแบบอักษรของข้อความชื่อเรื่องของคุณได้โดยเลือกแบบอักษรที่ต้องการจากเมนูแบบเลื่อนลง Divi มีแบบอักษรที่ยอดเยี่ยมมากมายที่นำเสนอโดย Google Fonts โดยค่าเริ่มต้น Divi จะใช้แบบอักษร Open Sans สำหรับข้อความทั้งหมดในเพจของคุณ คุณยังสามารถปรับแต่งรูปแบบของข้อความของคุณโดยใช้ตัวหนาตัวเอียงตัวพิมพ์ใหญ่และขีดเส้นใต้

ขนาดตัวอักษรชื่อ

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

สีข้อความชื่อเรื่อง

โดยค่าเริ่มต้นสีข้อความทั้งหมดใน Divi จะปรากฏเป็นสีขาวหรือสีเทาเข้ม หากคุณต้องการเปลี่ยนสีข้อความของชื่อเรื่องของคุณให้เลือกสีที่ต้องการจากตัวเลือกสีโดยใช้ตัวเลือกนี้

ระยะห่างของตัวอักษรชื่อ

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

ความสูงของบรรทัดชื่อเรื่อง

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

นโยบายราคา

คุณสามารถเปลี่ยนแบบอักษรของข้อความราคาของคุณได้โดยเลือกแบบอักษรที่คุณต้องการจากเมนูแบบเลื่อนลง Divi มาพร้อมกับฟอนต์ดีๆมากมายที่ขับเคลื่อนโดย Google Fonts โดยค่าเริ่มต้น Divi จะใช้แบบอักษร Open Sans สำหรับข้อความทั้งหมดในเพจของคุณ คุณยังสามารถปรับแต่งรูปแบบของข้อความของคุณโดยใช้ตัวหนาตัวเอียงตัวพิมพ์ใหญ่และขีดเส้นใต้

ขนาดตัวอักษรราคา

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

สีข้อความราคา

ตามค่าเริ่มต้นสีข้อความทั้งหมดใน Divi จะปรากฏเป็นสีขาวหรือเทาเข้ม หากคุณต้องการเปลี่ยนสีของข้อความราคาให้เลือกสีที่ต้องการจากตัวเลือกสีโดยใช้ตัวเลือกนี้

การเว้นวรรคของตัวอักษรราคา

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

ความสูงของเส้นราคา

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

ตัวเลือกขั้นสูงของร้านค้า

ในแท็บขั้นสูงคุณจะพบตัวเลือกที่นักออกแบบเว็บที่มีประสบการณ์มากกว่าอาจพบว่ามีประโยชน์เช่นแอตทริบิวต์ CSS และ HTML ที่กำหนดเอง ที่นี่คุณสามารถใช้ CSS ที่กำหนดเองกับองค์ประกอบต่างๆของโมดูลได้ คุณยังสามารถใช้คลาส CSS และ ID ที่กำหนดเองกับโมดูลซึ่งสามารถใช้เพื่อปรับแต่งโมดูลในไฟล์ style.css ของธีมลูกของคุณ

รหัส CSS

ป้อน CSS ID ทางเลือกเพื่อใช้สำหรับโมดูลนี้ คุณสามารถใช้ ID เพื่อสร้างสไตล์ CSS ที่กำหนดเองหรือเพื่อเชื่อมโยงไปยังส่วนเฉพาะของเพจของคุณ

ชั้น CSS

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

CSS ที่กำหนดเอง

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

ความชัดเจน

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

[vc_row center_row = "ใช่"] [vc_column width = "1/2″] [vcex_button target =" blank "layout =" expand "align =" center "font_family =" Raleway "font_weight =" 700 " style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] ดาวน์โหลดธีม DIVI [/ vcex_button] [/ width_column] [» vc_column] [ » 1/2″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" Layout = "ขยาย" align = "กลาง" font_family = "Raleway" font_weight = "700″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] ดาวน์โหลดเทมเพลต DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

บทแนะนำ Divi อื่น ๆ

• เว็บไซต์ 5 สำหรับการใช้งานร้านอาหาร Divi ธีม
• วิธีการเพิ่มข้อความในผลิตภัณฑ์ Divi WooCommerce
• วิธีการเปลี่ยนสีของเมนูระหว่างหน้า Divi
• วิธีปรับเปลี่ยนกริดของบล็อกด้วย Divi
• วิธีการใช้บทบาทของบรรณาธิการ Divi บน WordPress
• วิธีสร้างแถบเลื่อน Divi แบบเต็มหน้าจอ
• วิธีการเปลี่ยนสีของเมนูระหว่างหน้า Divi
• คุณสมบัติที่คุณอาจไม่รู้เกี่ยวกับ Divi
• วิธีการใช้ Divi Builder ใน WordPress
• วิธีใช้โมดูลเลื่อนภาพ Divi
• วิธีการใช้โมดูล Divi Builder Flip
• วิธีการเพิ่มโมดูลข้อความรับรองในตัวสร้าง Divi
• วิธีใช้โมดูลข้อความ Divi
• วิธีสร้างแถบเลื่อนบน Divi
• วิธีแก้ไขบทบาทผู้ใช้ Divi
• วิธีใช้โมดูล Divi Social Media
• วิธีใช้โมดูลร้านค้าในธีม WordPress Divi
• วิธีใช้โมดูลด้านข้าง Divi
• วิธีการใช้โมดูลตารางราคา Divi
• วิธีการใช้โมดูลชื่อเรื่องของสิ่งพิมพ์ของ Divi
• วิธีเพิ่มโมดูลวิดีโอของ Divi
• วิธีใช้โมดูลการนำทางบทความ
• วิธีการใช้โมดูลค้นหา Divi
• วิธีใช้โมดูลกระเป๋าสตางค์ Divi
• วิธีการใช้โมดูลคนบน Divi Builder
• วิธีใช้โมดูลกระเป๋าสตางค์กับตัวกรอง Divi
• วิธีการใช้โมดูลเลื่อนความกว้างเต็ม
• วิธีใช้โมดูล Divi Builder Image
• วิธีใช้โมดูลการนำทางความกว้างเต็มรูปแบบของ Divi Builder
• วิธีการใช้โมดูลคลังภาพ
• วิธีการใช้โมดูลบัตร Divi Builder Full-Width Card
• วิธีใช้โมดูล Divi Full Width Portfolio
• วิธีใช้โมดูลส่วนหัวแบบเต็มความกว้างของ Divi
• วิธีใช้โมดูล Divi Counter
• วิธีใช้แถบเลื่อนบทความบนเครื่องมือสร้าง Divi
• วิธีใช้โมดูล Divi Email Optin