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

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

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

ผลิตภัณฑ์เสริม

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

เหมาะสำหรับ: ร้านค้าอีคอมเมิร์ซที่มีตัวเลือกเพิ่มเติม เช่น การห่อของขวัญและการสร้างชื่อย่อ

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

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

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

ตัวอย่างและรูปถ่ายรูปแบบต่างๆ

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

เหมาะสำหรับ: ร้านค้าอีคอมเมิร์ซที่มีสินค้าหลากหลาย

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

เรียนรู้เพิ่มเติมเกี่ยวกับ Variation Swatches และ Photos และดูการใช้งานจริง

รูปภาพ WooCommerce 360

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

เหมาะสำหรับ: ร้านค้าอีคอมเมิร์ซที่ต้องการให้ลูกค้าได้รับประสบการณ์เช่นการถือผลิตภัณฑ์

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

เรียนรู้เพิ่มเติมเกี่ยวกับภาพ 360 ของ WooCommerce

วิดีโอผลิตภัณฑ์สำหรับ WooCommerce

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

เหมาะสำหรับ: ร้านค้าอีคอมเมิร์ซที่มีสินค้าที่แสดงผลได้ดีที่สุด

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

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

แผนภูมิขนาดสำหรับ WooCommerce

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

เหมาะสำหรับ: ร้านค้าอีคอมเมิร์ซที่ขายสินค้าหลายขนาด

ตัวอย่าง:

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

เรียนรู้เพิ่มเติมเกี่ยวกับแผนภูมิขนาดสำหรับ WooCommerce

สินค้าแนะนำ

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

เหมาะสำหรับ: ร้านค้าอีคอมเมิร์ซที่มีผลิตภัณฑ์มากกว่าหนึ่งรายการ

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

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

การเปลี่ยนแปลง CSS อย่างง่าย ไม่จำเป็นต้องมีส่วนขยาย

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

เปลี่ยนขนาดตัวอักษรของชื่อสินค้า

ใช้รหัสด้านล่างเพื่อเปลี่ยนขนาดชื่อผลิตภัณฑ์ของคุณเป็น 36px แทนที่ “36” ด้วยตัวเลขที่คุณต้องการ

 .woocommerce div.product .product_title { font-size: 36px; }

เปลี่ยนสีชื่อสินค้า

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

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

ทำให้ป้ายกำกับรูปแบบเป็นตัวหนา

ใช้รหัสด้านล่างเพื่อแสดงชื่อรูปแบบของคุณเป็นตัวหนา

 .woocommerce div.product form.cart .variations label { font-weight: bold; }

ตัวเอียงป้ายรูปแบบต่างๆ

ใช้โค้ดด้านล่างเพื่อทำให้ป้ายกำกับรูปแบบเป็นตัวเอียง

 .woocommerce div.product form.cart .variations label { font-style: italic; }

เปลี่ยนสีปุ่มซื้อเลย:

ใช้รหัสนี้เพื่อเปลี่ยนสีพื้นหลังของปุ่ม "ซื้อเลย" อีกครั้ง ใช้ตัวเลือกสี HTML เพื่อรับรหัสฐานสิบหกสำหรับสีที่คุณต้องการใช้

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

เริ่มปรับแต่งหน้าผลิตภัณฑ์ของคุณ

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

ดูไลบรารีส่วนขยายแบบเต็มของเราสำหรับตัวเลือกเพิ่มเติม