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

เผยแพร่แล้ว: 2023-02-14

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

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

วิธีเพิ่มประสิทธิภาพเทมเพลตหน้าผลิตภัณฑ์ WooCommerce ของคุณ

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

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

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

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

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

วิธีปรับแต่งหน้าผลิตภัณฑ์ของคุณโดยใช้ส่วนขยาย WooCommerce

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

1. รูปแบบผลิตภัณฑ์ขั้นสูงสำหรับ WooCommerce

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

ตัวอย่างสินค้าแปรผัน

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

การเพิ่มแถบสีให้กับรูปแบบผลิตภัณฑ์

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

ตัวอย่างหน้าสินค้าที่มีรูปแบบต่างๆ

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

ตัวเลือกสำหรับตำแหน่งแกลเลอรี

เรียนรู้เพิ่มเติมเกี่ยวกับรูปแบบผลิตภัณฑ์ขั้นสูงสำหรับ WooCommerce

2. ผู้จัดการแท็บ WooCommerce

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

ตัวอย่างแท็บใน WooCommerce

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

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

ตัวอย่างแท็บที่กำหนดเองใน WooCommerce

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

ส่วนต่อประสานส่วนหลังสำหรับสร้างแท็บใหม่

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

เรียนรู้เพิ่มเติมเกี่ยวกับตัวจัดการแท็บ WooCommerce

3. คำถามที่พบบ่อยเกี่ยวกับผลิตภัณฑ์

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

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

กล่องคำถามที่พบบ่อยสำหรับแต่ละผลิตภัณฑ์

ที่ส่วนหน้า คำถามที่พบบ่อยจะแสดงในรูปแบบหีบเพลงพร้อมภาพเคลื่อนไหว

เรียนรู้เพิ่มเติมเกี่ยวกับคำถามที่พบบ่อยเกี่ยวกับผลิตภัณฑ์

4. ผลิตภัณฑ์คอมโพสิต

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

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

ตัวอย่างชุดผลิตภัณฑ์ที่กำหนดค่าได้

ตัวอย่างเช่น สร้อยคออาจมีตัวเลือกสำหรับสายโซ่ (เงิน ทอง) หิน (ทับทิม โกเมน มรกต) และเครื่องรางเสริม (ตัวเลือกรูปร่างหลายแบบ)

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

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

เรียนรู้เพิ่มเติมเกี่ยวกับผลิตภัณฑ์คอมโพสิต

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

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

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

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

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

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

การเพิ่มฟิลด์เพิ่มเติมในหน้าผลิตภัณฑ์

เมื่อคุณตั้งค่า Add-on ของคุณแล้ว รายการเหล่านั้นจะปรากฏบนหน้าผลิตภัณฑ์เหนือปุ่ม Add to Cart ตามลำดับที่คุณเลือก

หน้าผลิตภัณฑ์หมวกพร้อมตัวเลือกในการเพิ่มการห่อของขวัญ

เรียนรู้เพิ่มเติมเกี่ยวกับ Add-on ของผลิตภัณฑ์

ปรับแต่งหน้าผลิตภัณฑ์ของคุณโดยใช้เครื่องมือแก้ไขไซต์

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

เลือก "เรียกดูเทมเพลตทั้งหมด" จากเมนูแบบเลื่อนลงที่ตรงกลางด้านบนของหน้า เลือกเทมเพลต Single Product จากรายการที่ปรากฏ

ค้นหาเทมเพลตผลิตภัณฑ์เดียว

เค้าโครงหน้าเริ่มต้นประกอบด้วยส่วนหัว ส่วนท้าย และบล็อก WooCommerce Single Product ซึ่งแสดงองค์ประกอบข้อมูลผลิตภัณฑ์ ราคา และรูปภาพ

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

เทมเพลตผลิตภัณฑ์เดียวของ WooCommerce แสดงด้วยบล็อกเริ่มต้น

วิธีแก้ไขเทมเพลตส่วนหัวและส่วนท้ายของหน้าผลิตภัณฑ์เดียว

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

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

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

วิธีปรับแต่งเนื้อหาของ Single Product

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

WooCommerce บล็อกผลิตภัณฑ์เดียว

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

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

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

เพิ่มบล็อกพิเศษในหน้าผลิตภัณฑ์แต่ละรายการ

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

ปรับแต่งหน้าผลิตภัณฑ์ของคุณด้วยตนเอง (โดยใช้โค้ดและ hooks)

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

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

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

ปรับแต่งหน้าผลิตภัณฑ์ WooCommerce โดยใช้ hooks

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

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

ต่อไปนี้คือตัวอย่างการเปลี่ยนแปลงอื่นๆ ที่คุณสามารถทำได้ในหน้าผลิตภัณฑ์ของคุณโดยใช้ hooks:

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

ปรับแต่งหน้าผลิตภัณฑ์ WooCommerce โดยใช้ CSS

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

คุณสามารถเพิ่มโค้ด CSS ได้ง่ายๆ โดยไปที่ ลักษณะที่ปรากฏ → ปรับแต่ง → CSS เพิ่มเติม ในแดชบอร์ด WordPress ของคุณ ตัวอย่างเช่น หากคุณต้องการเปลี่ยนสีฟอนต์ของชื่อผลิตภัณฑ์ คุณจะใช้โค้ดต่อไปนี้ แทนที่โค้ดฐานสิบหกของสีด้วยโค้ดของคุณเอง:

 .woocommerce div.product .product_title { color: #222222; }

หากคุณต้องการเปลี่ยนสีของปุ่ม Buy Now คุณจะต้องใช้รหัสนี้ โดยแทนที่รหัสฐานสิบหกอีกครั้งด้วยสีที่คุณเลือก:

 .woocommerce div.product .button {   background: #000000; }

คุณสามารถดูตัวอย่างเพิ่มเติมได้จาก WooCommerce ในบทความนี้

วิธีเพิ่มความเร็วในการโหลดหน้าผลิตภัณฑ์ของคุณ

ไซต์ที่โหลดเร็วมีความสำคัญต่อทั้งผู้เยี่ยมชมและเครื่องมือค้นหา ผู้คนไม่ต้องการรอและเครื่องมือค้นหาไม่ต้องการส่งผู้คนไปยังไซต์ที่มีประสิทธิภาพต่ำ

แท้จริงแล้วทุก ๆ วินาทีนั้นมีค่า — การหน่วงเวลาในการโหลดหนึ่งวินาทีสามารถลดอัตราการแปลงได้ถึง 20%!

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

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

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

การตั้งค่า Jetpack Boost

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

คำถามที่พบบ่อยเกี่ยวกับการปรับแต่งหน้าผลิตภัณฑ์

ยังมีคำถาม? ลองดูคำตอบของคำถามที่พบบ่อยด้านล่าง

วิธีที่ดีที่สุดในการปรับแต่งหน้าผลิตภัณฑ์ WooCommerce คืออะไร?

ไม่มีวิธีใดที่ดีที่สุด วิธีที่ดีที่สุดสำหรับ คุณ ขึ้นอยู่กับระดับความสะดวกสบายของคุณด้วยแนวทางต่างๆ

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

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

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

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

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

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

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

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

ส่วนที่ดีที่สุดสำหรับเจ้าของร้าน? ข้อมูลลูกค้าและคำสั่งซื้อทั้งหมดของคุณได้รับการคุ้มครองและเป็นปัจจุบัน

แนวทางปฏิบัติที่ดีที่สุดในการปรับแต่งหน้าผลิตภัณฑ์ WooCommerce มีอะไรบ้าง

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

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

มันทำเพื่อคุณ คุณจึงไม่ต้องกังวลเกี่ยวกับการบันทึกไซต์ของคุณก่อนที่จะทดลองกับการเปลี่ยนแปลง

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

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

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