Back to contents

JetWooBuilder: Products List Widget Overview

 

This tutorial provides an overview of the Products List widget from JetWooBuilder plugin and explains what steps you need to take to use it on your Shop page.

Products List widget from the JetWooBuilder plugin helps you to showcase the WooCommerce products into attractive list layouts. With this widget, you can create stylish lists with products for your online store in a few clicks. Let’s commence.

Beforehand you need to create a Shop page with JetWooBuilder. Follow the Shop Page creation tutorial to know how to do it.

After that, open the created Shop page and drag-n-drop the Product List widget to the section where you want to place it. You will see your products displayed on the page in the form of a list.

Products List widget

Navigate to the Content settings block. In the General settings section, you can select the Layout and set Products Number.

Product List widget General settings

The great thing here is that you’re able to Query products by different taxonomies, such as Featured, Sale, Tag, etc. If you will type in the ID of a product to the Exclude products by IDs field – it won’t be shown in a list. You can also Order products by some features or in ascending/descending order.

Product List widget General settings

By the way, you can enable or disable Products Title and Featured Image if you want. The other tools can help you to customize the design of the title and the image.

Product List widget General settings

Product Categories, Price, Stock Status, Rating, SKU, and Add to Cart Button can also be disabled if you don’t want to show that information on the list. Use default ajax add to cart styles toggle can help you to disable the default WooCommerce style of the “Add to cart” button.

Product List widget General settings

You can change the “not found” notification in the Not found message field. And finally, there is an opportunity to enable the Quick View button and set the Button Order for it. If you have installed the JetCompareWishlist plugin, you will also be able to add the Compare and Wishlist buttons.

Product List widget General settings

Afterward, navigate to the Quick View section. In that section, you’re able to select the Icon and Label Text for the button and choose its position.

Products List widget Quick View setting

Moreover, you can change the appearance of the Products List in the Style settings section. There’s the ability to change every item and customize it according to your preferences.

When you’re done with all the settings click on the “Publish” button and preview how your Price List looks like.

Congrats! Now you know how to display your products in the most eye-catching way with the help of the Products List widget.