WooCommerce is a strong e-commerce platform that permits customers to create and customise their on-line shops. One of many key options of WooCommerce is its capacity to filter merchandise based mostly on numerous standards. Nonetheless, the default filters could not all the time meet the wants of each retailer proprietor.
On this weblog put up, we are going to stroll by means of the steps required so as to add a customized product filter to the WooCommerce store web page.
Step 1: Create a Customized Plugin
Step one is to create a customized WooCommerce plugin to accommodate the customized product filter code. You may create a brand new folder within the “wp-content/plugins/” listing and provides it a novel title. Inside this folder, create a brand new PHP file and provides it the identical title because the folder. This file will function the primary plugin file.
Step 2: Add the Code for the Customized Product Filter
The subsequent step is so as to add the code for the customized product filter in WooCommerce. On this instance, we are going to create a filter that permits customers to filter merchandise by colour. Add the next code to the primary plugin file:
<?php /* Plugin Title: Customized Product Filter Description: Provides a customized product filter to the WooCommerce store web page Model: 1.0 Writer: Webkul */ add_action( 'woocommerce_before_shop_loop', 'wk_custom_product_filter' ); perform wk_custom_product_filter() { world $wp_query; $product_colors = get_terms( array( 'taxonomy' => 'pa_color', 'hide_empty' => false, ) ); ?> <type technique="get"> <choose title="product_color"> <choice worth="">Filter by Shade</choice> <?php foreach( $product_colors as $colour ) : ?> <choice worth="<?php echo esc_attr( $color->slug ); ?>"><?php echo esc_html( $color->title ); ?></choice> <?php endforeach; ?> </choose> <enter sort="hidden" title="post_type" worth="product" /> <enter sort="submit" worth="Filter" /> </type> <?php } add_filter( 'pre_get_posts', 'wk_custom_product_filter_query' ); perform wk_custom_product_filter_query( $question ) { if( ! is_admin() && $query->is_main_query() && is_shop() && isset( $_GET['product_color'] ) && ! empty( $_GET['product_color'] ) ) { $tax_query = array( array( 'taxonomy' => 'pa_color', 'discipline' => 'slug', 'phrases' => $_GET['product_color'], ), ); $query->set( 'tax_query', $tax_query ); } return $question; } ?>
Step 3: Save and Activate the Plugin
After you have added the code to the primary plugin file, save the file and activate the plugin within the WordPress admin panel. To activate the plugin, go to the “Plugins” menu and discover the plugin you simply created. Click on “Activate” to activate the plugin.
Step 4: Check the Customized Product Filter
After activating the plugin, go to the store web page and check the customized product filter. You must see a brand new dropdown menu that permits customers to filter merchandise by colour. When a consumer selects a colour, the web page will reload and show solely merchandise that match the chosen colour.
Conclusion
Including a customized product filter to the WooCommerce store web page is a straightforward and efficient manner to enhance the consumer expertise of your on-line retailer. With the pattern code offered above, you’ll be able to simply create a customized product filter based mostly on any standards you select.
By following the steps outlined on this weblog put up, you’ll be able to add a customized product filter to your WooCommerce store web page in only a few minutes.
Assist
Nonetheless, have any points be happy so as to add a ticket and tell us your views to make the code higher https://webkul.uvdesk.com/en/buyer/create-ticket/ additionally you’ll be able to contact us at [email protected].
Thanks for Your Time! Have a Good Day!