How To Show A List Of Clickable Product Categories Below The Search

The WooCommerce Wholesale Order Form allows your customers to perform really quick AJAX driven searches without the need for a page refresh.
If you want to reduce the number of clicks even further, you can use the following snippet of code on your site to display a list of clickable product category links below the search form.
These categories will select the appropriate category in the search form, clear out any keywords, and perform the search for your customer with no further interaction. All just in one click!
Feel free to alter the code to suit your website! It』s very flexible as long as you wrap each one in the tag as shown. For example, you could display all your product categories as a grid of clickable images. The options are only limited by your coding ability 🙂
Drop the following code into your functions.php file in your theme to add a list of clickable product categories:
function wwofCategoriesBeforeListing() {
$args = array(
'taxonomy' => 'product_cat',
'hierarchical' => true,
'hide_empty' => true
);

if ($all_categories) {
foreach ($all_categories as $cat) {
echo 'slug . '" class="wwofCatLink" href="'. get_term_link($cat->slug, 'product_cat') .'">'. $cat->name .'
';
}

echo '
jQuery(".wwofCatLink").click(function(e) {
e.preventDefault();
var catSlug = jQuery(this).data("cat-slug");
jQuery("select#wwof_product_search_category_filter").val(catSlug);
jQuery("input#wwof_product_search_form").val("");
jQuery("input#wwof_product_search_btn").trigger("click");
});
';

}
}

add_action('wwof_action_before_product_listing', 'wwofCategoriesBeforeListing', 10);

Note: This is an advanced tutorial aimed a website developers as a basic implementation to be altered to fit the your site. Contact your developer directly and send them to this article if you want this installed on your site Order Form.