Using AJAX in searching for woocommerce


You have 2 ways to make woocommerce products filtering by AJAX. Lets consider way #1:

  • Go to the plugins settings and check this checkbox: 
  • Go to widget OR shortcode and check this checkboxes: 
  • Try it. BUT! No all themes compatible with its functionality, because a lot of developers overrides woocomerce hooks woocommerce_before_shop_loop and woocommerce_after_shop_loop not in the right way - so or ajax doesn works OR css is broken because of it. Native woocommerce themes as canvas for example works fine because their code is fine ...

So what to do if it is impossible to make ajax search for your shop  page with method #1? Way #2:

You can do it by shortcodes, but for this you will have to create new page and use it for product searching by ajax:

  • Create new page
  • Drop there next shortcode: [mdf_results_by_ajax shortcode="mdf_products per_page=8 columns=4 pagination=tb meta_data_filter_cat=56" animate=1 animate_target=body]. Read more about options of this shortcodes: [mdf_results_by_ajax]and [mdf_products]. Look on 'meta_data_filter_cat' option, set there your filter-category ID there which you created especially for woocommerce products filtering.
  • Go to the plugins settings and check there this checkboxes: 
  • That is all. Here is the demo example.