วิธีสร้างหน้าร้านค้า WooCommerce ที่สวยงาม (ใน 5 ขั้นตอน)

กำลังค้นหาวิธีที่ง่ายที่สุดในการปรับแต่งหน้าร้านค้า WooCommerce หรือไม่?

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

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

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

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

สารบัญ:

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

วิธีปรับแต่งหน้าร้านค้า WooCommerce ด้วยบล็อก

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

1. วางบล็อคผลิตภัณฑ์ทั้งหมด

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

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

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

เปิดหน้านี้ในตัวแก้ไขบล็อก และคุณควรเห็นสิ่งนี้:

ตามค่าเริ่มต้น หน้า ร้านค้า จะมีบล็อก สินค้าทั้งหมด และส่วนหัว หากคุณไม่เห็นบล็อกนี้ คุณสามารถเพิ่มบล็อกลงในเพจได้โดยคลิกที่เครื่องหมาย บวก (+) แล้วเลือกจากรายการตัวเลือก:

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

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

2. เพิ่มกลุ่มผลิตภัณฑ์แนะนำและ/หรือผลิตภัณฑ์ที่ได้รับการคัดเลือก

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

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

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

จากนั้นคุณสามารถปรับแต่งบล็อกนี้ได้ตามต้องการ ตัวอย่างเช่น คุณอาจเปลี่ยนรูปภาพและแก้ไขปุ่ม CTA

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

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

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

3. เปิดใช้งานการค้นหาสินค้าบนหน้าร้านค้า

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

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

ฟังก์ชันการค้นหาของ WooCommerce มีลักษณะดังนี้:

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

4. ใช้บล็อกหมวดหมู่เด่น

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

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

บล็อก หมวดหมู่เด่น จะมีลักษณะดังนี้:

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

เนื่องจากบล็อก หมวดหมู่ผลิตภัณฑ์เด่น เป็นบล็อกพื้นฐาน เราขอแนะนำให้คุณดูปลั๊กอิน เช่น Otter Blocks เพื่อปรับแต่งเพิ่มเติม

ด้วย Otter Blocks คุณจะปรับเปลี่ยนบล็อกของ WooCommerce โดยเพิ่มแอนิเมชั่นและการตั้งค่าการมองเห็นอื่นๆ:

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

5. เพิ่มตัวเลือกในการกรองสินค้าตามราคา

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

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

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

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

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

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

และนั่นก็ค่อนข้างมาก! เมื่อเสร็จแล้ว อย่าลืมบันทึกการเปลี่ยนแปลง แล้วหน้าร้านค้าใหม่ของคุณจะเริ่มทำงานทันที

ตั้งค่าหน้าร้านค้า WooCommerce ของคุณวันนี้

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

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

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