booster addons
creative elementor bundle
Purchase Now
Purchase Now
Purchase Now

Home - Widgets - Woo List Products

Woo List Products

Preview Widget
Preview Widget
Getting Started
Global Settings
Layout Settings
Content Styling
Container Styling

More Widgets

• Woo Categories
• Woo Modern Product
• Filter Showcase Images
• Simple Images Slider

# Getting started

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.

Global Settings

The global settings section is going to be used to define the products type, sorting criteria and various other settings.

  • Products Type : Select if you want to use a single product or list instead.
  • Single :

Product Name :  Select the desired product in the list.

  • 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.

Layout Settings

Under the layout section, you will be able to change the content alignment. choose a cart icon, and change the button text.

  • Button Text : Change the text for the button. Note that this option is only available for some of the styles.
  • : Align your content ( the button and icon) inside the widget. The options available here are left, center, and right.
  • Cart Icon : Choose an icon from the list available to add more design to your products.

Styling

Under the styling tab, you will have full control over the styling of the text and other aspects of the widget.

  • Font Settings

Customize the text properties for the product name, price, category, and button. Change the font size, font family, line height...

  • Color Settings

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.

Container Styling

Under the container styling, you can customize the product items background and other various options.

  • Background Type : Customize the background color. Both solid and gradient colors are available.
  • Border : Alternate the borders values to add more design to your product items.
  • Box Shadow : Apply a box shadow to the product items to create unique effects. Changing the shadow color is also possible.

  • Distances

Control the margins & distances between each of the widget elements to customize the layout.

Get Help From Professionals

Can't find what you are looking for?

If you can't find what you are looking for any our documentation website, please feel free to open a support ticket  & get help from our support team.

Open a Ticket
Open a Ticket

WHO ARE WE ?

We are a group of talented WordPress developers & designers from Earth our main goal is to create great products & provide the best services to our customers.

BOOSTER ADDONS

CREATIVE ELEMENTOR BUNDLE

FOLLOW US

Email : contact@certaindev.com

WebSite : Certain Dev

Made with love from Earth!

Certain Dev | all rights reserved © 2020