วิธีสร้างแถบด้านข้างที่กรองแล้วสำหรับหน้า Divi WooCommerce ของคุณ

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

เหตุผลก็คือวิดเจ็ตเหล่านั้นเข้ากันไม่ได้กับเครื่องมือสร้างเพจ ในบทความนี้ เราจะมาดูวิธีง่ายๆ ในการสร้างแถบด้านข้าง WooCommerce ที่กรองแล้วสำหรับเพจที่สร้างด้วย Divi Builder หรือตัวสร้างเพจอื่นๆ

แถบด้านข้าง WooCommerce มาตรฐาน

WooCommerce มีวิดเจ็ตที่สามารถกรองได้หลายแบบ

• กรองสินค้าตามคุณสมบัติ
• กรองสินค้าตามราคา
• กรองสินค้าตามเรตติ้ง

วิดเจ็ตเหล่านี้ใช้งานได้ดีกับธีม WordPress ทั่วไป แต่จะไม่แสดงบนหน้าเว็บที่สร้างด้วยเครื่องมือสร้างเพจ

ธีมเวิร์ดเพรส

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

นี่คือ Divi ที่แสดงหน้าร้านค้าเริ่มต้นของ WooCommerce โดยไม่ต้องใช้ Divi Builder มันแสดงวิดเจ็ตตัวกรองเหมือนกับธีมปกติทั่วไป

WordPress Builders

เพจที่สร้างด้วยตัวสร้างจะไม่แสดงวิดเจ็ตตัวกรอง WooCommerce จะไม่สร้างความแตกต่างใดๆ หากแถบด้านข้างแสดงอยู่ภายในตัวสร้างหรือเป็นแถบด้านข้างมาตรฐาน นี่คือตัวอย่างบางส่วน

เพจนี้สร้างด้วย Beaver Builder ประกอบด้วยแถบด้านข้าง แต่ตัวกรองไม่แสดง ฉันได้เพิ่มวิดเจ็ตข้อความเพื่อให้คุณเห็นว่าแถบด้านข้างแสดงโดยไม่มีวิดเจ็ตตัวกรอง ฉันเผยแพร่หน้าเพื่อดูสด แต่ก็ไม่ได้สร้างความแตกต่างใดๆ

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

นี่คือ Divi Builder ที่แสดงแถบด้านข้างเดียวกัน การใช้ปลั๊กอินหรือธีม Divi Builder ให้ผลลัพธ์เหมือนกัน ฉันเผยแพร่หน้าเพื่อดูสด แต่ตัวกรองยังไม่แสดง

แสดงตัวกรอง WooCommerce ในแถบด้านข้างของตัวสร้าง

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

Themify – ตัวกรองผลิตภัณฑ์ WooCommerce

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

การสร้างตัวกรองผลิตภัณฑ์ใหม่

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

ตั้งชื่อที่อธิบายตัวกรอง เลือกจากเลย์เอาต์แนวตั้งหรือแนวนอน ว่าจะแสดงฟิลด์ว่าง การเรียงลำดับสินค้า การนับสินค้า และสินค้าที่หมดสต็อก เลือกว่าจะแสดงการแบ่งหน้าหรือไม่ และเลือกระหว่างการเลื่อนแบบมาตรฐาน การเลื่อนไม่สิ้นสุด หรือโหลดเพิ่ม

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

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

แต่ละองค์ประกอบจะเปิดคุณลักษณะชุดใหม่ แต่ละคนมีความแตกต่างกัน แต่ส่วนใหญ่มีตัวเลือกที่คล้ายคลึงกัน มาดูที่ Category.

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

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

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

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

เพิ่มวิดเจ็ตข้อความลงในแถบด้านข้างแล้ววางในรหัสย่อ

ตัวกรองจะแสดงในหน้าร้านค้าที่สร้างขึ้นด้วยผู้สร้าง นี่คือหน้าที่มีตัวสร้าง Divi

นี่คือตัวกรองที่แสดงบนหน้าเว็บที่สร้าง Beaver Builder ในธีม Twenty Sixteen

นี่คือตัวกรองที่มี Elementor ในธีม Twenty Seventeen อันนี้ใช้เลย์เอาต์แนวนอน

การใช้ Themify – ตัวกรองผลิตภัณฑ์ WooCommerce พร้อม Divi Layouts

Divi มีเลย์เอาต์ร้านค้ามากมายให้เลือก ในตัวอย่างนี้ ฉันได้เพิ่มโมดูลข้อความในหน้าร้านค้าร้านค้าเฟอร์นิเจอร์ และวางรหัสย่อตัวกรองภายในโมดูลข้อความ ฉันสามารถเลือกโมดูลแถบด้านข้างได้ แต่ตัวอย่างนี้ไม่สำคัญ

นี่คือการจัดวางแนวตั้ง มันเข้ากันได้ดีกับการออกแบบเลย์เอาต์

ฉันตั้งค่าปุ่มให้เข้ากับสไตล์ของเลย์เอาต์ ขออภัย ฉันไม่สามารถปรับปุ่มค้นหาได้

นี่คือเค้าโครงแนวนอน ตัวอย่างนี้ยังคงใช้เค้าโครงคอลัมน์ 3/2 ที่ฉันเลือกสำหรับตัวกรองแนวตั้ง

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

สำหรับอันนี้ ฉันได้วางตัวกรองไว้ใต้โมดูลร้านค้า

นี่คือตัวกรองที่อยู่เหนือโมดูลร้านค้า

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

การกรองผลิตภัณฑ์ WooCommerce

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

ผลการค้นหา

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

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

จบความคิด

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

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

Themify – ตัวกรองผลิตภัณฑ์ WooCommerce เป็นตัวเลือกที่ดีหากคุณต้องการปลั๊กอินฟรีเพื่อเพิ่มตัวกรองผลิตภัณฑ์ในหน้า Divi Builder ของคุณ

เราต้องการได้ยินจากคุณ คุณได้ลองใช้ปลั๊กอิน Themify – WooCommerce Product Filter พร้อมหน้าร้านค้าที่สร้างด้วย Divi Builder หรือไม่? แจ้งให้เราทราบเกี่ยวกับประสบการณ์ของคุณในความคิดเห็น

ภาพเด่นผ่าน Max Griboedov / shutterstock.com