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

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

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

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

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

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

ตอนนี้ มาดูตัวเลือกต่างๆ ที่คุณต้องแก้ไขหน้าผลิตภัณฑ์ใน WooCommerce

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

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

1. ด้วยปลั๊กอิน
2. โดยทางโปรแกรม
3. ด้วยผู้สร้างเพจ

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

1. วิธีปรับแต่งหน้าผลิตภัณฑ์ WooCommerce โดยใช้ปลั๊กอิน

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

1) ชำระเงินโดยตรงสำหรับ WooCommerce

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

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

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

คุณสมบัติหลัก

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

ราคา

นี่คือปลั๊กอิน freemium มีเวอร์ชันฟรีและแผนพรีเมียมสามแผนซึ่งเริ่มต้นที่ราคาโปรโมชัน 19 USD (ชำระครั้งเดียว) อย่างไรก็ตาม คุณสามารถใช้รหัสต่อไปนี้และ รับส่วนลด 10% :

 direct_ck10

2) WooThumbs

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

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

คุณสมบัติหลัก

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

ราคา

WooThumbs เป็นปลั๊กอินพรีเมียมที่เริ่มต้นที่ 79 USD ต่อปีและให้ทดลองใช้งานฟรี 14 วัน

3) ส่วนเสริมของผลิตภัณฑ์

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

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

คุณสมบัติหลัก

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

ราคา

Product Add-Ons เป็นปลั๊กอินระดับพรีเมียมที่จะคืนเงินให้คุณ 49 USD ต่อปี

4) ราคาเฉพาะลูกค้า WISDM

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

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

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

คุณสมบัติหลัก

• ตัวเลือกในการกำหนดราคาเฉพาะสำหรับลูกค้าแต่ละราย สมาชิก และบทบาทของผู้ใช้
• เสนอส่วนลดและข้อเสนอการขายให้กับผู้ซื้อจำนวนมากและผู้ซื้อ
• ตั้งกฎการกำหนดราคาสำหรับหมวดหมู่สินค้า ตลอดจนกำหนดส่วนลดและดีลสำหรับทั้งร้าน

ราคา

นี่เป็นเครื่องมือระดับพรีเมียมที่เริ่มต้นที่ 80 USD ต่อปี

5) Elex WooCommerce ขอใบเสนอราคา

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

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

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

คุณสมบัติหลัก

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

ราคา

WooCommerce ขอใบเสนอราคาเป็นปลั๊กอินพรีเมียมที่เริ่มต้นที่ 59 USD (ชำระครั้งเดียว)

หากคุณกำลังมองหาปลั๊กอินเพิ่มเติมเพื่อแก้ไขหน้าผลิตภัณฑ์ ดูที่โพสต์นี้

ปรับแต่งหน้าผลิตภัณฑ์ด้วยการชำระเงินโดยตรง

ตอนนี้ มาดูวิธีการแก้ไขหน้าผลิตภัณฑ์ใน WooCommerce โดยใช้ Direct Checkout เครื่องมือ freemium นี้มีการดาวน์โหลดมากกว่า 60,000 ครั้งในที่เก็บ WordPress และจะช่วยให้คุณเพิ่มการแปลง เวอร์ชันฟรีมีฟีเจอร์พื้นฐาน ดังนั้นเพื่อยกระดับหน้าผลิตภัณฑ์ของคุณไปอีกระดับ เราขอแนะนำหนึ่งในแผนพรีเมียมที่เริ่มต้นเพียง 19 USD (ชำระครั้งเดียว)

มาดูบางสิ่งที่คุณสามารถทำได้ด้วย Direct Checkout เพื่อปรับแต่งหน้าผลิตภัณฑ์ของคุณ

1. เพิ่มปุ่มซื้อด่วน

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

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

หลังจากติดตั้งและเปิดใช้งานปลั๊กอินแล้ว ให้ไปที่ WooCommerce > Direct Checkout > General เปิดการเปลี่ยนเส้นทาง และตั้งค่าตัวเลือกต่อไปนี้:

• เพิ่มในรถเข็นเปลี่ยนเส้นทาง : ใช่
• เพิ่มในรถเข็นแล้ว เปลี่ยนเส้นทางไปที่ : Checkout

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

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

2. AJAX หยิบใส่ตะกร้า

AJAX หยิบใส่ตะกร้าเป็นอีกหนึ่งคุณลักษณะที่ยอดเยี่ยมของ WooCommerce Direct Checkout ฟังก์ชัน Add-to-cart ของ AJAX ช่วยให้ลูกค้ารวมสินค้าในรถเข็นได้โดยไม่ต้องโหลดซ้ำทั้งไซต์ วิธีนี้จะช่วยปรับปรุงประสบการณ์ของผู้ใช้และจะช่วยให้คุณเพิ่มยอดขายได้ ยิ่งไปกว่านั้น เนื่องจากหน้าเว็บไม่จำเป็นต้องโหลดซ้ำหลายครั้ง จึงช่วยลดแบนด์วิดท์และการโหลดของเซิร์ฟเวอร์

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

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

2. วิธีปรับแต่งหน้าผลิตภัณฑ์ WooCommerce โดยทางโปรแกรม

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

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

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

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

การลบองค์ประกอบออกจากหน้าผลิตภัณฑ์ WooCommerce

หากต้องการเพิ่มโค้ดเหล่านี้ ให้เปิดตัว แก้ไขธีม WordPress ใน แดชบอร์ด WordPress โดยไปที่ Themes > Theme Editor จากนั้น คลิกที่ไฟล์ Functions.php ในรายการไฟล์ในคอลัมน์ขวาสุด ที่นี่ คุณสามารถเพิ่มสคริปต์ WooCommerce ของคุณเองเพื่อเริ่มปรับแต่งร้านค้าของคุณ

WooCommerce มี hooks มากมายให้คุณปรับแต่งองค์ประกอบใด ๆ ในร้านค้าของคุณ hooks เหล่านี้ทำงานกับองค์ประกอบเฉพาะ ดังนั้น คุณจำเป็นต้องใช้ hook ที่เหมาะสมกับฟังก์ชันที่ถูกต้องและค่าลำดับความสำคัญที่เหมาะสมเพื่อลบหรือจัดลำดับองค์ประกอบเหล่านี้ใหม่ คุณสามารถดู hooks ทั้งหมดและพารามิเตอร์ที่เกี่ยวข้องได้ในหน้านี้หรือไฟล์ content-single-product.php ของปลั๊กอิน WooCommerce

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

สำหรับสิ่งนี้ เพียงวางโค้ดต่อไปนี้ในไฟล์ functions.php ของคุณ:

 // ลบการจัดอันดับดาว
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
// ลบ meta ของผลิตภัณฑ์ 
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
// ลบคำอธิบาย
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );

จากนั้น คลิกที่ ไฟล์อัปเดต และหน้าผลิตภัณฑ์ WooCommerce ของคุณควรลบองค์ประกอบเหล่านี้ออก

การจัดลำดับองค์ประกอบหน้าผลิตภัณฑ์ WooCommerce ใหม่

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

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

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

ในการดำเนินการนี้ ให้เพิ่มสคริปต์นี้ลงในไฟล์ functions.php ของคุณ แล้วคลิก อัปเดตไฟล์

 // เปลี่ยนลำดับคำอธิบาย
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 6 ); 

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

3. แก้ไขหน้าผลิตภัณฑ์ WooCommerce โดยใช้ Page Builders

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

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

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

โบนัส: ปรับแต่งองค์ประกอบ WooCommerce ของคุณโดยใช้ CSS

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

หากต้องการเพิ่มข้อมูลโค้ด CSS ให้กับธีม WordPress ให้ไปที่ ลักษณะที่ ปรากฏ > ปรับแต่ง แล้วคลิก CSS เพิ่มเติม

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

 เปลี่ยน Product Title Font size
.woocommerce div.product .product_title {
ขนาดตัวอักษร: 42px;
}

เปลี่ยนสีชื่อสินค้า
.woocommerce div.product .product_title {
สี: #AAb733;
}

 เปลี่ยนสีปุ่มซื้อเลย
.woocommerce div.product .ปุ่ม {
พื้นหลัง: #000000;
}

หลังจากเพิ่มข้อมูลโค้ดแล้ว อย่าลืมคลิก เผยแพร่ เพื่อสิ้นสุดการเปลี่ยนแปลง

บทสรุป

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

• การใช้ปลั๊กอินเฉพาะ
• โดยทางโปรแกรม โดยใช้ WooCommerce hooks และ templates
• การใช้ตัวสร้างเพจ เช่น Divi และ Elementor

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

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

หากคุณกำลังมองหาคำแนะนำเพิ่มเติมในการปรับแต่งร้านค้าของคุณ ลองดูโพสต์ต่อไปนี้:

• วิธีปรับแต่งหน้าร้านค้า WooCommerce
• วิธีแก้ไขหน้าบัญชีของฉัน
• คู่มือฉบับเต็มเพื่อปรับแต่งปุ่ม Add to Cart ใน WooCommerce
• วิธีเพิ่มค่าธรรมเนียมในการชำระเงิน
• วิธีซ่อนผลิตภัณฑ์ที่เกี่ยวข้องใน WooCommerce

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