Create informative WooCommerce product listings on your website with ease.

Using Product List #

Step 1 #

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

WordPress Dashboard - WooCommerce plugin

Step 2 #

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

Elementor page builder

Step 3 #

Before you get started with the Product List 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 add new product

Step 4 #

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

WooCommerce product details

Step 5 #

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

WooCommerce product details

Step 6 #

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

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

Elementor page builder - Droit Addons for Elementor's product list widget

Step 7 #

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

Droit Addons for Elementor - Product List Widget

Step 8 #

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. 

Droit Addons for Elementor - Product List Widget

Step 9 #

You can add customization options to your product titles. Click on the Title drop-down menu. From here you can add typography options, color, and padding to your titles. 

Droit Addons for Elementor - Product List Widget

Step 10 #

You can add customization options to your price tags. Click on the Price Style drop-down menu. From here you can add typography options, color, and spacing to your price tags. 

Droit Addons for Elementor - Product List Widget

Step 11 #

To add customization options to your cart buttons, click on the Cart Button drop-down menu. From here you can add typography options, color, hover color, margin, and padding to your cart buttons. 

Droit Addons for Elementor - Product List Widget

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

Powered by BetterDocs