5 วิธีง่ายๆในการแสดงสินค้าบนร้านค้าออนไลน์ของ wordpress

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

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

สินค้าที่แสดงบนร้านค้าออนไลน์

โดย Jan Saints (งานของตัวเอง): CC-BY-2.0

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

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

ห้าวิธีในการแสดงและจัดเรียงรายการบนร้านค้าออนไลน์ของ WordPress

1. วิธีการอัตโนมัติ
2. วิดเจ็ต
3. ปลั๊กอิน
4. รหัสย่อ
5. แถบเลื่อน

1. ใช้วิธีอัตโนมัติ

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

หน้าแรกสามารถรองรับผลิตภัณฑ์ได้จำนวนหนึ่งเท่านั้นซึ่งหมายความว่าหากคุณมีผลิตภัณฑ์จำนวนมากบางรายการจะอยู่ในหน้าที่ 2, 3, 4 และอื่น ๆ

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

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

ผลิตภัณฑ์ที่แสดงแบบสุ่ม

โดย Jan Saints (งานของตัวเอง): CC-BY-2.0

2. การใช้วิดเจ็ต

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

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

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

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

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

โดย Jan Saints (งานของตัวเอง): CC-BY-2.0

3. การใช้ปลั๊กอิน

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

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

ปลั๊กอินที่แนะนำมากที่สุดสำหรับการแสดงสินค้าบนร้านค้าออนไลน์ของ WordPress คือ Ultimate Product Catalog และ WooCommerce Product Sort and Display

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

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

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

ตัวอย่างเช่นรหัสย่อต่อไปนี้จะแสดงผลิตภัณฑ์ในแค็ตตาล็อกด้วย ID "x"

หรือ

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

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

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

โดย Jan Saints (งานของตัวเอง): CC-BY-2.0

4. การใช้รหัสย่อ

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

- แสดงรายการหมวดหมู่

- แสดงจำนวนหมวดหมู่ที่เฉพาะเจาะจงและใช้ได้ดีกับอาร์กิวเมนต์ต่อไปนี้ หมายเหตุ: อาร์กิวเมนต์เหล่านี้สามารถใช้กับรหัสย่อนี้ได้เช่นกัน.

• number = "null" - เพื่อแสดงจำนวนหมวดหมู่
• orderby = "name" - เพื่อแสดงหมวดหมู่เมื่อเรียงลำดับตามชื่อ หมายเหตุ: ค่า "name" สามารถแทนที่ด้วย date, rand (random), modified และ none
• order = "asc" - เพื่อแสดงหมวดหมู่เมื่อเรียงลำดับจากน้อยไปมาก หมายเหตุ: ค่า "asc" สามารถแทนที่ด้วย "desc" เพื่อเรียงลำดับจากมากไปหาน้อย
• คอลัมน์ = "x" - เพื่อแสดงคอลัมน์ "x" ของหมวดหมู่
• hide_empty = "1" - เพื่อซ่อนหมวดหมู่
• hide_empty = "0" - เพื่อแสดงหมวดหมู่
• parent = "0" - เพื่อแสดงหมวดหมู่ระดับบนสุด
• ids = "x" - เพื่อแสดงหมวดหมู่ด้วย id "x"
• category = "x" - เพื่อแสดงหมวดหมู่ "x"

• category_limit - เพื่อแสดงหมวดหมู่จำนวน จำกัด
• archive_template - เพื่อแสดงเทมเพลตที่เก็บถาวรเฉพาะสำหรับรายการเฉพาะ
• design_scheme - เพื่อแสดงสีหรือขนาดเฉพาะ
• sort = "0" - เพื่อปิดใช้งานตัวเลือกการจัดเรียงผลิตภัณฑ์
• sort = "1" - เพื่อเปิดใช้งานตัวเลือกการจัดเรียงผลิตภัณฑ์
• = "1" - เพื่อเปิดใช้งานรหัสย่อ
• post_type - เพื่อแสดงรายการจากโพสต์ประเภทอื่น
• per_row - เพื่อแสดงผลิตภัณฑ์ต่อแถว
• ว่าง - เพื่อแสดงข้อความบางอย่างเมื่อไม่มีสินค้าที่จะแสดง

• - แสดงรายการ "y" ของหมวดหมู่ "x" แสดงในคอลัมน์ "z" และจัดเรียงจากมากไปหาน้อยขึ้นอยู่กับวันที่ที่โพสต์
• - แสดงรายการผลิตภัณฑ์
• - แสดงชื่อผลิตภัณฑ์ หมายเหตุ: ค่า "ชื่อ" สามารถแทนที่ด้วยค่าอื่นเพื่อสร้างรหัสย่อเพิ่มเติมได้ ค่าเหล่านี้บางส่วน ได้แก่ ราคาคำอธิบายคำอธิบายสั้น ๆ ตารางแอตทริบิวต์ SKU ค่าจัดส่งแกลเลอรีและหมวดหมู่ที่เกี่ยวข้อง
• - แสดงหมวดหมู่สำหรับหน้ารายการผลิตภัณฑ์ปัจจุบัน
• - แสดงผลิตภัณฑ์สำหรับหน้ารายการผลิตภัณฑ์ปัจจุบัน
• - แสดง breadcrumbs
• - แสดงสินค้าจำนวน จำกัด
• - แสดง URL ย้อนกลับไปยังผลิตภัณฑ์ซึ่งชี้ไปที่หน้ารายการผลิตภัณฑ์หลัก
• - แสดงผลิตภัณฑ์ที่กำลังขายอยู่
• - แสดงสินค้าด้วย id "x"
• - แสดงผลิตภัณฑ์ที่มีรหัส "x", "y" และ "z"
• - แสดงสินค้าด้วย SKU "xyz"
• - แสดงสินค้าด้วย SKU "abc", "def" และ "ghi"
• - แสดงราคาและปุ่มเพิ่มในรถเข็นสำหรับสินค้าที่มี id "x"
• - แสดงราคาและปุ่มเพิ่มในรถเข็นสำหรับสินค้าที่มี SKU "x"
• - แสดงรายการ "x" สูงสุด
• - แสดงผลิตภัณฑ์ที่มีแอตทริบิวต์บางอย่างเช่นแอตทริบิวต์ "สี" และสีเป็น "สีดำ"

• - แสดงผลิตภัณฑ์ล่าสุด "x" ที่แสดงในคอลัมน์ "y" และจัดเรียงจากมากไปหาน้อยขึ้นอยู่กับวันที่ที่โพสต์
• - แสดงผลิตภัณฑ์แนะนำ "x" ที่แสดงในคอลัมน์ "y" และจัดเรียงจากมากไปหาน้อยขึ้นอยู่กับวันที่ที่โพสต์
• - แสดงผลิตภัณฑ์ยอดนิยม "x" ที่แสดงในคอลัมน์ "y" และจัดเรียงจากมากไปหาน้อยขึ้นอยู่กับวันที่ที่โพสต์
• - แสดงผลิตภัณฑ์ยอดนิยม "x" ที่แสดงในคอลัมน์ "y" และจัดเรียงจากมากไปหาน้อยขึ้นอยู่กับวันที่ที่โพสต์
• - แสดงสินค้าขายดี "x" แสดงในคอลัมน์ "y" และจัดเรียงจากมากไปหาน้อยขึ้นอยู่กับวันที่ที่โพสต์
• - แสดงผลิตภัณฑ์ที่เกี่ยวข้อง "x" แสดงในคอลัมน์ "y" และจัดเรียงจากมากไปหาน้อยขึ้นอยู่กับวันที่ที่โพสต์
• - แสดงรายการผลิตภัณฑ์พร้อมเทมเพลตรายการแบบคลาสสิก หมายเหตุ: เทมเพลตอื่น ๆ เช่น 'grid' และ 'default' สามารถใช้แทน 'list' ได้
• - แสดงผลิตภัณฑ์จากหมวดหมู่ด้วย id "x" และด้วยเทมเพลตรายการแบบคลาสสิก

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

รหัสย่อวางบนหน้า

โดย Jan Saints (งานของตัวเอง): CC-BY-2.0

5. การใช้แถบเลื่อน

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

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

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

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

ผลิตภัณฑ์ที่แสดงบนแถบเลื่อน

โดย Jan Saints (งานของตัวเอง): CC-BY-2.0

สรุป

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

อ้างอิง

1. Mening. R. วิธีสร้างร้านค้าออนไลน์ด้วย WordPress และ WooCommerce websitesetup.org การตั้งค่าเว็บไซต์ (2560).
2. Andronaco R. วิธีสร้างร้านค้าออนไลน์โดยใช้ WooCommerce และ Wordpress: คำแนะนำง่ายๆเพื่อการตั้งค่าเว็บไซต์อีคอมเมิร์ซที่สมบูรณ์แบบ (2560).
3. Rastaurius E., การออกแบบเว็บไซต์ Etoile แคตตาล็อกผลิตภัณฑ์อีคอมเมิร์ซสำหรับ WordPress wordpress.org. implecode (2560).
4. WooCommerce รหัสย่อที่มาพร้อมกับ WooCommerce docs.woocommerce.com WooCommerce (2559).
5. Truman S., Tuan N., ซอฟต์แวร์ Ar3rev WooCommerce Product Sort and Display Plugin wordpress.org. ซอฟต์แวร์ Ar3rev (2556).
6. YiThemes ปลั๊กอิน Yith Infinite Scrolling wordpress.org. YITHEMES (2560).
7. Razzak S. คำแนะนำพิเศษสำหรับปลั๊กอินตัวเลื่อนผลิตภัณฑ์ WooCommerce cloudways.com Cloudways Ltd. (2016).
8. Balkhi S. วิธีสร้างตัวเลื่อน WordPress ที่ตอบสนองอย่างง่ายดายด้วย Soliloquy wpbeginner.com . WPBeginner (2557).

© 2017 Januaris Saint Fores