This widget lets you create and showcase informative WooCommerce product listings with ease.

Using Woo List  #

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. 

WordPress Dashboard - new plugin

Step 2 #

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

Elementor

Before you get started with the Woo List widget, you must have the WooCommerce plugin configured and products listed with details.

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. 

Add my product - WooCommerce plugin

Step 3 #

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

WooCommerce Plugin - add new product

Step 4 #

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

WooCommerce plugin - new product details

Step 5 #

After you’re done configuring/adding products from the WooCommerce plugin, your products will now be visible via the Woo List widget on your website. 

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.

Elementor drag and drop page builder

Step 6 #

From the Query Settings drop-down menu, you will be able to add – per page item view, sort by order, order type, spacing, offset, and posts per column. 

Droit Addons for Elementor - Woo List widget

Step 7 #

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

Elementor page builder

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 List widget - General style menu

Step 9 #

To customize your product list block further, click on the Content Box. From here, you can add alignment, background type, margin, padding, and border radius to your product list section.

Woo List widget - Content box menu

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. 

Elementor page builder

Step 11 #

You can customize your product titles from the Title drop-down menu. From here, you can add color, typography, and spacing to your product list.

Droit Addons for Elementor - Woo List widget

Step 12 #

To customize your price tag, click on the Price drop-down menu. From here, you can add color, typography, spacing, and offset to both your regular and sale price tags.

Droit Addons for Elementor - Woo List widget

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

Powered by BetterDocs