The Woo List Products widget is a great tool that you can use to display your woo commerce products. Easy to configure, and with the ability to choose different layouts with custom styling, this widget is a great additional to any woo commerce arsenal!
Â
Read more about this widget down below.
The global settings section is going to be used to define the products type, sorting criteria and various other settings.
Product Name : Â Select the desired product in the list.
Number of Products to Show : Â Select the number of items that you want to show in your list.
Products Order By : Select the order by criteria for your list. For example if you want the list of products to be ordered by date or name.
Sort Order : Choose either ascending or descending.
Columns Number : Choose the desired number of columns for the products listing. Up to 5 columns can be used.
Enable Gutter & Gutter Value : Enable this if you want the products to be separated by white space. You can also change the gutter value to control the separating space.
Show Effect : Change the products showing effect. Select one of the many animations available.
Under the layout section, you will be able to change the content alignment. choose a cart icon, and change the button text.
Under the styling tab, you will have full control over the styling of the text and other aspects of the widget.
Customize the text properties for the product name, price, category, and button. Change the font size, font family, line height...​
Alternate the color style for the widget elements including the button and rating stars.
-Normal & Hover : Select​ which widget state you want to customize. Normal for the idle state of the widget and hover for when the widget is being hovered. Note that every option in this section will only affect the selected state.(The cart icon and button only appear on hover, so they are excluded)
-Color : Change the color of the widget elements using their respective control.
-Cart & Preview Icons Sizes : Alternate the size for both the cart and preview icons. The preview icon is the little eye displayed on the left of the button when you hover over a product.
Under the container styling, you can customize the product items background and other various options.
Control the margins & distances between each of the widget elements to customize the layout.