Stand with Ukraine. Fight for freedom and democracy

Donate
Back to contents

Products List Widget Overview

 

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

Tutorial requirements:

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

Open the created Shop page and drag-n-drop the Products 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

Products List

In the Products List tab, there are such settings:

  • Thumbnail Position. You can set the “Left,” “Right,” or “Top” position;
  • Hidden Products. If enabled, it shows the products with the “Hidden” Catalog visibility status. You can set this status by the product editing or quick editing;
  • Make Product Item Clickable. If you enable this toggle, customers can proceed to the product page by clicking on the product item in the list;
  • Open in New Window. With this toggle enabled, the product page will be opened in a new window;
  • Use Current Query. This option works only on the product archive templates and allows you to display products for current categories, tags, and taxonomies. For example, on the “Women” category page, this feature will show only women’s clothes;
  • Products Number. Enter the number of products that will be shown on the page;
  • Query by. You can query products by different taxonomies, such as Featured, Sale, Tag, etc.;
  • Exclude by IDs. Enter IDs of the products you want to hide from the list. You can also set the Dynamic Tags feature to exclude products related to certain dynamic content. For example, you can exclude the products of the specific author;
  • Order by. You can order products by such features based on WooCommerce product settings:
    • Date; 
    • Modified Date;
    • ID;
    • Price;
    • Title;
    • Random;
    • Sales;
    • Top Rated;
    • Menu Order;
    • SKU;
    • Current;
    • Stock Status.
  • Order. Select the “ASC” (ascending) or “DESC” (descending) option. For example, if you select the “Title” Order by and “ASC” Order, the list will show products in alphabetical order. If you select the “Date” Order by and “DESC” Order, products will be displayed from the newest to the oldest added;
NOTE!
Be aware that all query settings in the Products List tab are not available if you apply the Custom Query to the widget.
products list settings
  • Title. Disable this toggle to hide the product title;
  • Enable Permalink. If enabled, customers can proceed to the product page by clicking the product title;
  • HTML Tag. You can select <H1-H6>, <div,> <span,> and <p> HTML tags for the product titles;
  • Trim Type and Length. With these two features, you can set the product title length. Select the “Words” or “Letters” Trim Type and enter the number of words or letters that will be visible in the list item. Set -1 to show the full title and 0 to hide it;
  • Enable Title Tooltip. If enabled, it adds the WooCommerce tooltips to the product title;
  • Thumbnail. Disable this toggle to hide the product thumbnail;
  • Enable Permalink. If enabled, customers can proceed to the product page by clicking the product picture;
  • Image Size. Set the product image size in this drop-down menu;
  • Categories. Disable this toggle to hide the product categories;
  • Categories Count. Enter the number of the displayed product categories or set 0 to show the full categories list;
title thumbnail and category settings
  • Price. Disable this toggle to hide the product price;
  • Stock Status. Disable this toggle to hide the product stock status;
  • Rating. Disable this toggle to hide the product rating;
  • Empty Rating. If you enable this toggle, it will show the product rating even if no one has rated it yet;
  • SKU. Enable this toggle if you want to show the product stock-keeping unit;
  • Add To Cart Button. This toggle displays the “Add to Cart” button;
  • Quantity Input. With this feature, users will be able to add more than one item to the cart;
  • Use default ajax add to cart styles. This option enables default WooCommerce styles for the “Add to Cart” AJAX button (“Loading” and “Added” statements);
  • Not Found Message. Here you can set the “not found” notification. This message appears, for example, if you set the Products List widget on the Search Archive Page template;
  • Query ID. Give the Query a unique custom ID to allow server-side filtering;
  • Show Quick View. Adds the “Quick View” button that opens the Quick View pop-up, created with the JetPopup plugin. To learn how to create such a pop-up, proceed to the How to Create a Product Quick View Popup tutorial;
  • Quick View Button Order. If you have more than one button (“Quick View,” “Add to Compare,” and “Add to Wishlist”), you can set their order. Be aware that this feature doesn’t affect the “Add to Cart” button that is always first. You can also set the order for the Desktop, Tablet, and Mobile view.
show quick view toggle

Quick View

To set the “Quick View” button settings, enable the Show Quick View toggle in the Products List tab, proceed to the Quick View tab, and open it.

You can change the Button Icon and Button Label Text, disable the icon with the Use Icon? toggle, and set the “Left,” “Top,” “Right,” or “Bottom” Icon Position.

quick view settings tab

Compare

To customize the “Add to Compare” and “Add to Wishlist” buttons, you need the JetCompareWishlist plugin.

Proceed to the Compare tab and enable the Compare Button toggle.

You can disable the button Icon and set the “Left,” “Top,” “Right,” or “Bottom” Icon Position.

You can also customize the appearance of the standard button, and the button view after users add the product to the Product Comparison Page. For that, hit the “Normal” and “Added” buttons to switch the settings. In both tabs, you can set the Icon and Label.

compare button tab settings

Be aware that in the Added settings tab, you can enable the Use as Remove Button toggle, so customers can remove the product from the Compare Page by clicking on the same button.

If you have more than one button (“Quick View,” “Add to Compare,” and “Add to Wishlist”), you can set their Order. Be aware that this feature doesn’t affect the “Add to Cart” button that is always first. You can also set the order for the Desktop, Tablet, and Mobile view.

use as remove button

Wishlist

Proceed to the Wishlist tab and enable the Wishlist Button toggle.

You can disable the button Icon and set the “Left,” “Top,” “Right,” or “Bottom” Icon Position.

You can also customize the appearance of the standard button and the button view after users add the product to the Wishlist Page. For that, hit the “Normal” and “Added” buttons to switch the settings. In both tabs, you can set the Icon and Label.

wishlist button tab settings

Be aware that in the Added settings tab, you can enable the Use as Remove Button toggle, so customers can remove the product from the Wishlist Page by clicking on the same button.

If you have more than one button (“Quick View,” “Add to Compare,” and “Add to Wishlist”), you can set their Order. Be aware that this feature doesn’t affect the “Add to Cart” button that is always first. You can also set the order for the Desktop, Tablet, and Mobile view.

use as remove button toggle enabled

Custom Query

Move to the Custom Query tab and switch on the Enable Custom Query toggle. You can apply the WC Product Query created with the JetEngine Query Builder feature here.

custom query settings tab

When you finish customizing, hit the “Publish/Update” button.

Products List on the Front End

Proceed to the front end and check the Products List view.

products list on the front end

That’s it. Now you know how to display WooCommerce products in an eye-catching way with the help of the Products List widget.