คู่มือนักออกแบบสำหรับ WooCommerce

หากคุณกำลังออกแบบร้านค้า WooCommerce เช่น Shopify หรือพัฒนาธีม WooCommerce ที่มีอยู่ บทความนี้ Designers Guide To WooCommerce เหมาะสำหรับคุณ องค์ประกอบนี้ให้ข้อมูลเพิ่มเติมเล็กน้อยเกี่ยวกับสไตล์ การเปลี่ยนแปลงการออกแบบ และข้อมูลอื่นๆ ที่ครอบคลุมหน้า WooCommerce ที่เกี่ยวข้อง

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

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

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

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

อีกประเภทหนึ่งคือ Product Single Pages ข้อมูลเหล่านี้จะแสดงผลิตภัณฑ์เดียวและรวมรูปภาพผลิตภัณฑ์ ข้อมูลส่วนหัวของผลิตภัณฑ์ ข้อมูลรายละเอียดของผลิตภัณฑ์ และผลิตภัณฑ์ที่เกี่ยวข้อง การขายต่อเนื่อง และการขายต่อยอด

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

สินค้าประเภทต่างๆ

เครื่องมือนี้มีผลิตภัณฑ์ประเภทต่างๆ

อันดับแรกคือ Product Header ที่แบ่งออกเป็น 5 ส่วน เหล่านี้คือ:

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

เครื่องมือนี้จะอนุญาตให้ผู้ใช้ผลิตภัณฑ์

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

นอกจากนี้ ภายใต้หน้าผลิตภัณฑ์ สิ่งเหล่านี้จะถูกสร้างขึ้นโดยอัตโนมัติด้วยสิ่งต่อไปนี้:

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

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

การขายต่อยอด – สิ่งเหล่านี้คือ "คุณอาจชอบ" ตามด้วยนิ้วหัวแม่มือ/ชื่อสำหรับการขายต่อยอด

การขายต่อเนื่อง – เป็นผลิตภัณฑ์ที่เกี่ยวข้องตามด้วยภาพขนาดย่อ

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

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

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

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

แสดงให้เห็นเช่นเดียวกันบนเครื่องมือคือสติกเกอร์ลดราคา คำว่า 'ลดราคา' ปรากฏขึ้นเหนือการลดราคาของผลิตภัณฑ์—สามารถใช้สไตล์ CSS ได้: สีพื้นหลัง สีฟอนต์ สีเส้นขอบ ความกว้างของเส้นขอบ เส้นขอบทึบ/เส้นประ รัศมีเส้นขอบ

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

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

อ่านเพิ่มเติมเกี่ยวกับธีม WordPress ของ Woocommerce ที่นี่