WooCommerce: วิธีเปิดใช้งานตัวกรองผลิตภัณฑ์ (เช่น "ตัวกรอง Ajax")

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

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

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

โชคดีที่มีปลั๊กอินสำหรับสิ่งนั้น และฟรีหรือค่อนข้างถูกเมื่อคุณเปรียบเทียบต้นทุนเล็กน้อยนี้กับผลตอบแทนจากการลงทุน (ROI) ที่คุณมี

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

ดังนั้นปลั๊กอิน "WooCommerce Ajax Product Filter" ที่ดีที่สุดคืออะไร?

1. วิดเจ็ตตัวกรองผลิตภัณฑ์เริ่มต้นของ WooCommerce (ฟรี)

เซอร์ไพรส์

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

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

ในเวลาประมาณ 1 นาที ฉันสามารถเพิ่มตัวกรองตามแอตทริบิวต์ คะแนน และ "ตัวเลื่อน" ราคาได้ ง่ายมาก อย่างไรก็ตาม มีปัญหาสำคัญสองประการ: ตัวกรอง WooCommerce เหล่านี้ ไม่ได้ขับเคลื่อนโดย Ajax (เพราะฉะนั้นหน้า "โหลดซ้ำ" หลังจากใช้ตัวกรองตัวใดตัวหนึ่ง) และมี ข้อ จำกัด มากเกินไป มีวิดเจ็ตเริ่มต้นเพียง 3 รายการ คุณสามารถมีแอตทริบิวต์แบบเลื่อนลงหรือรายการได้เท่านั้น มีตัวเลื่อนราคาเท่านั้นและไม่ใช่รายการช่วงราคาสำหรับ Amazon... โดยพื้นฐานแล้วคุณไม่สามารถทำอะไรได้มากกับการตั้งค่านี้

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

2. ปลั๊กอินการนำทางแบบเลเยอร์เสริมที่เปิดใช้งาน Ajax โดย WooCommerce (พรีเมียม)

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

เมื่อเปิดใช้งานแล้ว ปลั๊กอิน Ajax-Enabled Enhanced Layered Navigation จะให้วิดเจ็ตเพิ่มเติมที่คุณสามารถใช้ได้บนหน้าร้านค้า / เก็บถาวร / หมวดหมู่ที่เรียกว่า " WooCommerce Ajax Layered Nav "

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

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

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

3. ปลั๊กอินตัวกรองผลิตภัณฑ์ WooCommerce Ajax โดย YITH (ฟรี & พรีเมียม)

เมื่อพูดถึง YITH คุณรู้ว่าพวกเขามีปลั๊กอิน WooCommerce สำหรับทุกสิ่ง… ไม่จำเป็นต้องพูดว่าพวกเขายังขายปลั๊กอิน Ajax Product Filter ขั้นสูงอีกด้วย

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

เมื่อเปิดใช้งานปลั๊กอินพรีเมียมแล้ว คุณจะเห็นวิดเจ็ตใหม่ 5 รายการ:

• Ajax Sort by (เป็นการจัดเรียงผลิตภัณฑ์ตามตัวเลือกการเรียงลำดับ WooCommerce แต่ใช้กับ Ajax!)
• ตัวกรองผลิตภัณฑ์ Ajax (จัดเรียงตามแอตทริบิวต์ / หมวดหมู่ / แท็ก / แบรนด์และแสดงเป็นรายการแบบเลื่อนลง / ช่องทำเครื่องหมาย / รายการ / ตัวอย่าง / ป้ายกำกับ)
• ตัวกรองราคา Ajax (สร้างช่วงราคาในรายการที่กรองได้)
• Ajax Stock/on Sale Filter (เพิ่มวิดเจ็ตเพื่อกรองเข้า/ออกสินค้าในการขายหรือในสต็อก)
• Ajax Reset Filter (รีเซ็ตตัวกรองได้ด้วยคลิกเดียว)

นี่คือส่วนหลัง:

และนี่คือหน้าร้านค้าเมื่อวิดเจ็ตตัวกรองเหล่านี้ทำงาน:

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

อย่างที่คุณสามารถจินตนาการได้ YITH WooCommerce Ajax Product Filter เข้ากันได้กับปลั๊กอิน YITH อื่น ๆ ทั้งหมดและสามารถทำสิ่งขั้นสูงได้

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

ใช่ มันยืดหยุ่นมาก และมันได้ผล

4. FacetWP (พรีเมียม)

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

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

FacetWP ช่วยให้คุณสร้าง "แง่มุม" ได้หลายแบบ เช่น การแสดงตัวกรอง เช่น:

• ช่องทำเครื่องหมาย
• หล่นลง
• fSelect
• วิทยุ
• ลำดับชั้น
• ตัวเลื่อน
• ค้นหา
• เติมข้อความอัตโนมัติ
• ช่วงวันที่
• ช่วงตัวเลข
• ระดับดาว
• ความใกล้ชิด

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

1. ราคา
2. ลดราคา
3. ราคาปกติ
4. คะแนนเฉลี่ย
5. สถานะสต๊อกสินค้า (มีในสต๊อก / สินค้าหมด)
6. ลดราคา
7. หมวดหมู่สินค้า
8. แท็กสินค้า
9. คุณลักษณะของผลิตภัณฑ์

อย่างที่คุณเห็นการสร้างแง่มุมของ WooCommerce นั้นค่อนข้างตรงไปตรงมา:

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

5. JetSmartFilters โดย Crocoblock

JetSmartFilters โดย Crocoblock เป็นปลั๊กอินที่ใช้งานง่ายพร้อมระบบกรองแบบ AJAX และวิดเจ็ตที่มีประโยชน์ 9 แบบ ซึ่งทำให้เว็บไซต์ WooCommerce ใช้งานง่ายโดยไม่ต้องเขียนโค้ดแม้แต่บรรทัดเดียว:

1. ตัวกรองการให้คะแนน – จัดเรียงผลิตภัณฑ์ตามการให้คะแนน
2. ฟิลเตอร์ภาพ – มีประสิทธิภาพสูงสำหรับร้านค้าออนไลน์ที่มีสีหรือแบรนด์ต่างกัน
3. ตัวกรองการค้นหา – อนุญาตให้ค้นหาด้วยคำหรือวลี และแสดงผลลัพธ์ที่เกี่ยวข้องอย่างรวดเร็ว
4. ตัวกรองวิทยุ – มีตัวเลือกให้เลือกหนึ่งผลิตภัณฑ์หรือโพสต์จากรายการ
5. ตัวกรองช่องทำเครื่องหมาย – ให้เลือกตัวเลือกต่างๆ จากรายการตรวจสอบ
6. ช่วงวันที่ – ตัวเลือกที่ดีหากคุณจะกรองโพสต์หรือผลิตภัณฑ์ตามวันที่ที่เพิ่มหรือเหตุการณ์ตามวันที่ที่ควรจะเกิดขึ้น
7. ตรวจสอบตัวกรองช่วง – ช่วยในการสร้างช่วงของตัวเลือกในรูปแบบของรายการ ช่องทำเครื่องหมาย
8. ตัวกรองช่วง – ให้คุณตั้งค่าช่วงการค้นหาโดยใช้ ตัวเลื่อน
9. Select filter – ให้เลือกตัวเลือกในรูปแบบของรายการ ดรอปดาวน์

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

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