วิธีแก้ไขเทมเพลตหน้าผลิตภัณฑ์ใน Divi Builder

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

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

คุณสามารถเพิ่มอัตราการแปลงได้โดยการเพิ่มแกลเลอรีผลิตภัณฑ์ในหน้าผลิตภัณฑ์ของคุณ เราขอแนะนำให้คุณใส่รูปถ่ายสินค้าแต่ละรายการอย่างน้อย 3-4 ภาพในคำสั่งซื้อของคุณ หากคุณขายหลักสูตรออนไลน์ เป็นไปได้ว่าคุณจะต้องปิดการใช้งานตัวเลือกปริมาณเพื่อให้หน้าผลิตภัณฑ์ชัดเจน การสลับช่วยให้ดูข้อมูลได้ง่ายขึ้นในขณะที่รักษาหน้าผลิตภัณฑ์ให้สะอาดอยู่เสมอ เราจะแสดงวิธีการติดตั้งโมดูลสลับใต้คำอธิบายผลิตภัณฑ์จากหน้าผลิตภัณฑ์ด้านล่าง ในส่วน Product/Archive ของเรา หัวข้อจะเป็นชื่อ Product/Archive แต่คุณสามารถเลือกวัสดุที่เหมาะสมกับความต้องการของคุณมากที่สุดในฐานะผู้เขียนได้ เมื่อเลือก Product Description จากเมนู คุณจะสามารถเข้าถึงฐานข้อมูลของคุณได้ หลังจากที่คุณทำการเปลี่ยนแปลงเสร็จแล้ว คุณจะได้รับการอัปเดตอัตโนมัติทันทีที่การเปลี่ยนแปลงเสร็จสิ้น โมดูลนี้ช่วยให้คุณสร้างส่วนต่างๆ และปรับแต่งเพจและโพสต์ในแบบของคุณได้ง่ายๆ

Divi Woocommerce ปรับแต่งหน้าผลิตภัณฑ์

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

เทมเพลตหน้าผลิตภัณฑ์ Divi Woocommerce

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

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

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

เราต้องการรวมการกำหนดราคาผลิตภัณฑ์เพื่อแสดงให้ผู้ใช้เห็นว่าผลิตภัณฑ์มีราคาเท่าใดหลังจากเพิ่มการให้คะแนนผลิตภัณฑ์ จากนั้น ในส่วนข้อความราคา ให้รวมโมดูล Woo Price ขั้นตอนต่อไปคือการเลือก Use Custom Style for Button จากแท็บ Design เพื่อให้การออกแบบสอดคล้องกัน ให้เลือกสีม่วงเป็นสีข้อความของปุ่ม ได้เวลาเพิ่มคำอธิบายผลิตภัณฑ์แล้ว หากคุณกด URL ตัวยึดจะแสดงข้อความตัวแทนของหน้าผลิตภัณฑ์ แต่จะได้รับการอัปเดตแบบไดนามิกเพื่อแสดงเนื้อหาของหน้า ในขั้นตอนที่ 3 คุณจะต้องเพิ่มโมดูลผลิตภัณฑ์ที่เกี่ยวข้องกับ Woo

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

เค้าโครงหน้าผลิตภัณฑ์ Divi

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

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

เค้าโครงร้านธีม Divi

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

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

ทำไม Divi ถึงเป็นธีมที่สมบูรณ์แบบสำหรับเว็บไซต์อีคอมเมิร์ซของคุณ

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