booster addons
creative elementor bundle
Purchase Now
Purchase Now
Purchase Now

Home - Widgets - Woo Modern Product

Woo Modern Product

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

More Widgets

• Woo List Products
• Woo Categories
• Simple Images Slider
• Block Quotes Slider

# Getting started

Weather you want to display a single product or a list of different products, the Woo Modern Product  widget is the perfect tool to quickly set up your woo e-commerce pages!


Here are the options.

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 layout style. Some styles offer you additional options which will give you even more control over the layout. 

  • Layout Style : Choose a layout style from the options provided. Each style has a unique layout and design with different ways to display the content.
  • : Align your text inside the widget. The options available here are left, center, and right.Note that this option is only available for some of the styles and will only be displayed when they are active.
  • Card Icon and Icon Size : Choose an icon from the list available and control its size. Note that this option is only available for some of the styles.
  • Button Text : Change the text for the button. Note that this option is only available for some of the styles.


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, and button. Change the font size, font family, line height...

  • Color Settings

Alternate the color style for the widget elements including the icom, button, and background. Gradient colors can be used for the product name and price.

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 ot add more design to your product items. You can also change the border radius customize the container shape.
  • Box Shadow : Apply a box shadow to the product items to create unique effects. Changing the shadow color is also possible.

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


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.




Email :

WebSite : Certain Dev

Made with love from Earth!

Certain Dev | all rights reserved © 2020