Categorize your product gallery with stunning effects using the Woo Filter widget.

Using Woo Filter  #

Step 1 #

Make sure you have the Woo List widget enabled from your Dashboard > Droit Addons > Elements. Also, make sure to have the WooCommerce plugin installed and activated. 

Step 2 #

Search for the Woo Filter widget from the left-hand side menu, and drag the widget to your preferred location.

Elementor page builder

Before you get started with the Woo Filter widget you must have the WooCommerce plugin configured and products listed with details. Here is an example.

To get started visit your Dashboard > WooCommerce > Add my products. From here you can add your products manually or import an existing product listing via a CSV file. 

WooCommerce plugin - add new product

Step 3 #

From here you can add your product title, description, tag, category, regular/special price, feature images, and so much more. 

WooCommerce plugin - new product

Step 4 #

When you’re done adding your products to WooCommerce. Make sure to press ‘’Publish’’ to make it live.

WooCommerce plugin - product details

Step 5 #

Let’s start by configuring the Layout menu. From here, you can adjust how your product list will look by adding spacing, alignment, and layout style.

Note: If you see any misalignments, inconsistencies, or any other issues, rest assured that your product gallery/list block is working fine. Please check the preview. 

Woo Filter - Layout menu

Step 6 #

From the Query Settings drop-down menu, you will be able to add – select your preferred category, sort by order, order type, display limit, spacing, and posts per column. 

Elementor page builder - Woo Filter

Step 7 #

From the Content drop-down option, you can toggle between all the content types within your product gallery block. 

Woo Filter - Content menu

Step 8 #

Now to add style options to your product list block, head over to the Style tab. And click on “General.” From here, you will be able to add margin, padding, alignment, background, and more to your product list. 

Woo Filter - General style menu

Step 9 #

You can customize your filter/category buttons from this Filter menu with image, background, color, typography, margin, padding, border and so much more.

Elementor page builder

Step 10 #

To customize the thumbnails of your product list, click on the Thumbnail drop-down menu. From here you can customize the image settings with height, weight, image fit, border type, margin, padding, and image shadow. 

Woo Filter - Thumbnail menu

And that’s it. When you’re done, press “Publish” to save your changes.

Powered by BetterDocs