วิธีปรับแต่งหน้าผลิตภัณฑ์ WooCommerce ใน Divi

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

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

ทำไมต้องปรับแต่งหน้าผลิตภัณฑ์ WooCommerce?

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

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

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

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

วิธีปรับแต่งหน้าผลิตภัณฑ์ WooCommerce ใน Divi

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

เปิดใช้งาน Visual Editor

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

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

• หยิบใส่ตะกร้า
• ข้อมูลเพิ่มเติม
• เกล็ดขนมปัง
• ประกาศเกี่ยวกับรถเข็น
• คำอธิบาย
• แกลลอรี่
• รูปภาพ
• เมต้า
• ราคา
• เรตติ้ง
• สินค้าที่เกี่ยวข้อง
• ความคิดเห็น
• คลังสินค้า
• แท็บ
• ชื่อ
• เพิ่มยอดขาย

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

1. แสดงหรือซ่อนคำวิจารณ์

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

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

2. การปรับเปลี่ยนแกลลอรี่

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

เมื่อคุณอัปเดตหน้าผลิตภัณฑ์ด้วยรูปภาพแล้ว จะมีลักษณะดังนี้:

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

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

3. การปรับเปลี่ยนรูปภาพเด่น

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

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

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

4. การปรับเปลี่ยนปุ่มเพิ่มในรถเข็น

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

ในส่วน องค์ประกอบ คุณจะเห็นสองตัวเลือกหลัก

• ช่องปริมาณ
• คลังสินค้า

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

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

5. ใช้การเปลี่ยนแปลงกับผลิตภัณฑ์ที่เกี่ยวข้อง

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

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

หลังจากนั้น เพิ่มโมดูลผลิตภัณฑ์ที่เกี่ยวข้องกับ WooCommerce ลงในแถวดังที่แสดงด้านล่าง

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

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

6. เพิ่ม Toggle

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

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

ในการเพิ่มการสลับ คุณต้องมีสองสิ่งหลัก

• ชื่อ
• ร่างกาย

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

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

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

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

เคล็ดลับหน้าผลิตภัณฑ์ WooCommerce

ก่อนสรุปคู่มือนี้ เรามีคำแนะนำสั้นๆ สำหรับคุณ

อัปเดตธีมและปลั๊กอินเป็นประจำ

เพื่อให้แน่ใจว่าคุณจะสามารถเข้าถึงคุณลักษณะล่าสุดที่ Divi นำเสนอได้เสมอ เราขอแนะนำให้คุณอัปเดตธีม Divi, ปลั๊กอินตัวสร้าง Divi และแกน WordPress เป็นเวอร์ชันเสถียรล่าสุดที่พร้อมใช้งาน

วิธีที่ง่ายที่สุดคือเปิดการอัปเดตอัตโนมัติจากแผงธีม Divi

สิ่งที่คุณต้องทำคือชื่อผู้ใช้ Elegant Themes และคีย์ API ที่คุณจะพบได้ในแดชบอร์ดของบัญชี Elegant Themes เมื่อคุณป้อนข้อมูลเหล่านั้นแล้ว ให้บันทึกการเปลี่ยนแปลงและคุณจะได้รับการอัปเดตอัตโนมัติ

การใช้งานทั่วทั้งไซต์

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

โบนัส: วิธีอื่นในการแก้ไขหน้าผลิตภัณฑ์ WooCommerce

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

บทสรุป

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

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

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

คุณทำการเปลี่ยนแปลงอะไรกับร้านค้าของคุณโดยใช้ Divi คุณมีปัญหาใด ๆ ในการกวดวิชาของเราหรือไม่? แจ้งให้เราทราบในส่วนความคิดเห็นด้านล่าง!