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 – ul.page-numbers a.page-numbers

 

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