php - Product Category Filter with AJAX AND Image Buttons on Divi / Woocommerce

Question

I want to create an AJAX product category filter that loads instantly, in the same page, like the one below:

Ajax "instant" filter:

The only difference is that instead of a little box with text, I want to have an image as the button.

Using clickable images as categories selectors:

Is that possible?

I’m using Divi Theme Builder and WooCommerce.

Answer 1

There are multiple approach to resolve above problem.

Bind click event to image : <img src="./thumb.png" onclick="filterProduct('cat1');" width="200" height="200" />

1. If your store going have limited products, then query all and the filter using JavaScript, bind click event to the image and let JavaScript filter from array.

2. Bind click event to the image, then make ajax call, see WP Ajax. In that ajax call write query to get category specific product like :

   $prods = wc_get_products( array('category' => array('category-slug')) );

I would recommend second approach.