Set up WooCommerce shop page with Search and Filter Pro and Beaver Themer

Here is how you can set up the main WooCommerce shop page with Search and Filter Pro and Beaver Themer.
The layout is to have the filter options on the left and products on the right, the filtering is using the product categories as well as a custom taxonomy.


Woocommerce Search Filter Pro Shop Page

Example shop layout page

Search & Filter Pro

In Search & Filter Pro these are settings tabs.

Search Filer Pro General Settings

General Settings


Search Filer Pro Default Settings

Display Results  Settings

Ajax Container for Beaver Themer is  – .fl-module-post-grid

Full pagination selector in this instance  is –


Search Filer Pro Post Settings

Post Settings


Search Filer Pro Available Fields

Available Fields


Search Filer Pro Search Form Search Taxonomy

Search and a Custom Taxonomy Settings


Search Filer Pro Search Form Taxonomy Reset

Normal Product Category Taxonomy Settings + Reset Button

So in the above these are main settings to get it working, I have not configured any settings in the other tabs.


Beaver Themer

In Beaver Themer create a Product Archive Themer layout, this will be the layout for the main WooCommerce shop page.

Beaver Themer Shop Page

Create Themer Archive Layout


So it’s an archive page layout and its location is the Product Archive which is the main WooCommerce layout.

Beaver Builder Two Column Layout

Themer 2-column layout


Create a 2 column layout, drag in a HTML module on the left for Search And Filter Pro and a Posts module in the right column for the products.

Search Filter Pro Id

Search & Filter Pro Shortcode ID from Search & Filter Pro settings


The HTML module contents will just be the Search & Filter ID shortcode which you get from the Search & Filter main window.


Search Filer Pro Shortcode Id

Shortcode ID (Taken from Search & Filter Form Page)

The Posts module.

Beaver Posts Module Main Query

Use Main Query

The Posts module, set the source as the Main Query in the Content tab, you can set various settings in the rest of the tabs – I find the defaults are pretty good.

All done, also you can add a spinner to entertain your users while they wait for the refresh.


Leave all Comment