วิธีเพิ่มตัวกรองผลิตภัณฑ์ WooCommerce AJAX

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

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

ตัวกรองผลิตภัณฑ์ AJAX คืออะไร

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

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

เหตุใดคุณจึงควรใช้ตัวกรองผลิตภัณฑ์

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

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

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

เนื่องจากคุณอาจไม่อยากเสียลูกค้าไป ตัวกรองผลิตภัณฑ์จึงควรเป็นส่วนสำคัญของกลยุทธ์ธุรกิจออนไลน์ของคุณ

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

วิธีเพิ่มตัวกรองผลิตภัณฑ์ WooCommerce

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

1. ตัวกรองผลิตภัณฑ์ WooCommerce เริ่มต้น
2. การใช้ปลั๊กอินบุคคลที่สาม

เรามาดูทั้งสองวิธีกัน

1. ตัวกรองผลิตภัณฑ์ WooCommerce เริ่มต้น

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

หากต้องการเพิ่มตัวกรองเหล่านี้ในร้านค้าของคุณ ให้ไปที่ WP Admin Dashboard และไปที่ Appearance > Widgets คุณจะพบรายการวิดเจ็ตที่มีทั้งหมดสำหรับไซต์ของคุณที่นั่น

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

นั่นคือทั้งหมดที่คุณต้องทำเพื่อเพิ่มตัวกรองผลิตภัณฑ์ WooCommerce เริ่มต้นในร้านค้าของคุณ

ตัวกรองผลิตภัณฑ์เริ่มต้น

ตามค่าเริ่มต้น มีตัวกรองผลิตภัณฑ์สามประเภท ได้แก่ ราคา คุณลักษณะ และคะแนนเฉลี่ย

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

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

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

น่าเสียดายที่ WooCommerce ไม่รองรับตัวกรอง AJAX ตามค่าเริ่มต้น ดังนั้นคุณต้องพึ่งพาปลั๊กอินของบุคคลที่สาม

2. การใช้ปลั๊กอินของบุคคลที่สาม

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

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

ตอนนี้เรามาดูกันว่าคุณสามารถเพิ่มปลั๊กอินนี้ไปยังร้านค้า WooCommerce ของคุณได้อย่างไร

ขั้นตอนที่ 1: ติดตั้ง Plugin

ขั้นแรก คุณต้องติดตั้งปลั๊กอิน เพื่อไปที่ WP Admin Dashboard และไปที่ Plugins > Add new

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

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

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

ขั้นตอนที่ 2: สร้างตัวกรองผลิตภัณฑ์ใหม่

ในการสร้างตัวกรองผลิตภัณฑ์ ให้ไปที่ WP Admin Dashboard และไปที่ BeRocket > Filters

ในหน้าการตั้งค่า ให้กดปุ่ม เพิ่มตัวกรอง

หน้าการตั้งค่าใหม่จะปรากฏขึ้นและคุณจะต้องกรอกรายละเอียดทั้งหมดเพื่อสร้างตัวกรอง มีหลายส่วนที่คุณต้องกรอก ลองมาดูทีละส่วนกัน

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

เมื่อคุณกรอกแบบฟอร์มแล้ว ให้คลิกที่ปุ่ม บันทึกตัวกรอง เพื่อสร้างตัวกรอง

จัดการตัวกรองของคุณ

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

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

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

ตอนนี้เรามาดูวิธีการเพิ่มกลุ่มตัวกรองผลิตภัณฑ์ใน WooCommerce โดยใช้ตัวกรองผลิตภัณฑ์ AJAX ขั้นสูง

ขั้นตอนที่ 3: สร้างกลุ่มตัวกรอง

ในแดชบอร์ด WordPress ของคุณ ไปที่ BeRocket > Groups และคลิกที่ปุ่ม Add Filter Group เพื่อสร้างกลุ่มตัวกรอง

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

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

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

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

เมื่อเราได้สร้างตัวกรองเหล่านี้แล้ว ก็ถึงเวลาแสดงตัวกรองเหล่านี้ที่ส่วนหน้าของร้านค้า

ขั้นตอนที่ 4: แสดงตัวกรอง

ใน WP Admin Dashboard ของคุณ ให้ไปที่ Appearance > Widgets

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

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

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

ขั้นตอนที่ 5: แสดงตัวกรองนอกพื้นที่วิดเจ็ตโดยใช้รหัสย่อ

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

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

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

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

ขั้นตอนที่ 6: ระบุปัญหากับตัวกรอง

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

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

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

บทสรุป

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

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

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

โดยสรุปเราได้เรียนรู้:

• ตัวกรองผลิตภัณฑ์ AJAX คืออะไร?
• ประโยชน์ของตัวกรองผลิตภัณฑ์ WooCommerce
• วิธีเพิ่มตัวกรองผลิตภัณฑ์ WooCommerce
  • ตัวกรองผลิตภัณฑ์ WC เริ่มต้น
  • การใช้ปลั๊กอินบุคคลที่สาม

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