Products Widget

Use the widget to add Products on your website.

Content

Products: Set desired amount of products to display.

Columns: Set desired amount of columns.

Product Layout: Choose between Default and Custom Product Layout.

When Custom Product Layout is selected you can choose the template to use.

Masonry: Slide to YES to enable masonry layout.

Pagination: Slide to YES to enable pagination.

When Pagination is enabled you can also use the following options:

Sorting: Slide to YES to enable sorting.

Show Result Count: Slide to YES to show the amount of results found.

Query

Source: Choose products to be displayed from the dropdown.

You can Include or Exclude products.

Include option settings

Terms: Add needed terms (taxonomies) to show corresponding products.

Order By: Choose the order parameter from the dropdown and set Ascending or Descending order.

Exclude option settings

Terms: Add needed terms (taxonomies) to exclude corresponding products.

Manual Selection: Search & Select products to exclude from query.

Order By: Choose the order parameter from the dropdown and set Ascending or Descending order.

Pagination

Type: Choose a pagination type from the dropdown. (Pagination, Infinite scroll or ‘Load more’ button)

Pagination Type

View: Choose between Numbers+Previous/Next buttons, only Numbers or only Previous/Next buttons.

Page Range: Choose how many pages should be shown on the start and the end of pagination and to either side of current pages.

Load via AJAX: Slide to YES to load posts without page reloading.

Save Pagination: Slide to YES to save page number in URL.

Scroll into View: Slide to YES to scroll products into the visible area of the browser window.

Choose Previous and Next Icons and add a Text to them if needed.

Infinite scroll Type

Preview Infinite Preloader: Click to see how a preloader functions.

Text: Add a needed Infinite text.

Icon: Choose the icon from Icon library or upload desired SVG.

‘Load more’ Type

Button Text: Add Button Text for Normal and Loading modes.

Icon: Choose the icon from Icon library or upload desired SVG.

Style

Header

Here you can set Container, Result count and Sorting fields.

Settings for Container

Background Color: Choose Background color from a color palette or dynamic tags.

Border Type: Choose a Border Type from the dropdown.

Padding: Set padding for desktop, tablet and mobile.

Border Radius: Set a border radius to container for desktop, tablet and mobile.

Spacing: Set a spacing between Header and content.

Settings for Amount of Results

Text Color: Choose a Text Color from a color palette or dynamic tags.

Typography: Set a Typography using settings from the dropdown.

Settings for Sorting

Text Color: Choose a Text Color from a color palette or dynamic tags.

Background Color: Choose Background color from a color palette or dynamic tags.

Typography: Set a Typography using settings from the dropdown.

Border Type: Choose a Border Type from the dropdown.

Border Radius: Set a border radius to container for desktop, tablet and mobile.

Products

Image

Border Type: Choose a Border Type from the dropdown.

Border Radius: Set Image border radius for desktop, tablet and mobile.

Spacing: Set a spacing between Image and content box.

Title

Color: Choose a Title color from a color palette or dynamic tags.

Typography: Set a Typography using settings from the dropdown.

Spacing: Set a spacing between Title and other content.

Rating

Star Color: Choose a Star color from a color palette or dynamic tags.

Empty Star Color: Choose an Empty Star color from a color palette or dynamic tags.

Star Size: Set a Star size here.

Spacing: Set a spacing between Rating and Price.

Sale Price

Color: Choose a Sale Price color from a color palette or dynamic tags.

Typography: Set a Typography using settings from the dropdown.

Regular Price

Color: Choose a Regular Price color from a color palette or dynamic tags.

Typography: Set a Typography using settings from the dropdown.

Button

Text Color: Choose a Text color from a color palette or dynamic tags. (for Normal and Hover modes)

Background Color: Choose Background color from a color palette or dynamic tags.(for Normal and Hover modes)

Border Color: Choose a Border color from a color palette or dynamic tags.(for Normal and Hover modes)

Typography: Set a Typography using settings from the dropdown.

Border Type: Choose a Border Type from the dropdown.

Border Radius: Set Image border radius for desktop, tablet and mobile.

Text Padding: Set a Text padding here.

Spacing: Set a spacing between Button and other content.

View Cart

Color: Choose a View Cart color from a color palette or dynamic tags.

Typography: Set a Typography using settings from the dropdown.

Product Box

Box Shadow: Choose desired settings from the dropdown.(for Normal and Hover modes)

Background Color: Choose Background color from a color palette or dynamic tags.(for Normal and Hover modes)

Border Color: Choose a Border color from a color palette or dynamic tags.(for Normal and Hover modes)

Alignment: Choose between Left, Center and Right alignment for desktop, tablet and mobile.

Border Width: Set a Box Border width here.

Border Radius: Set a Box border radius for desktop, tablet and mobile.

Padding: Set a padding for desktop, tablet and mobile.

Sale Label

Slide to SHOW to enable Sale Label.

Text Color: Choose a Text color from a color palette or dynamic tags.

Background Color: Choose Background color from a color palette or dynamic tags.

Typography: Set a Typography using settings from the dropdown.

Border Radius: Set a Label border radius.

Width: Set desired Label width.

Height: Set desired Label height.

Position: Choose between Left and Right label position.

Distance: Set a distance from the border.

Layout

Columns Gap: Set Columns gap for desktop, tablet and mobile.

Rows Gap: Set Rows gap for desktop, tablet and mobile.

Border Type: Choose a Border Type from the dropdown and set it.

Pagination

Typography: Set a Typography using settings from the dropdown.

Background Color: Choose Background color from a color palette or dynamic tags.

Alignment: Choose between Left, Center, Right or Justified alignment.

Border Type: Choose a Border Type from the dropdown and set it.

Spacing: Set a spacing between pagination and content.

Padding: Set a padding for desktop, tablet and mobile.

Pagination:Arrows

Icon Color: Choose an Icon Color from a color palette or dynamic tags. (for Normal and Hover modes)

Text Color: Choose a Text Color from a color palette or dynamic tags. (for Normal and Hover modes)

Background Color: Choose a Background Color from a color palette or dynamic tags. (for Normal and Hover modes)

Border Color: Choose a Border Color from a color palette or dynamic tags. (for Normal and Hover modes)

Box Shadow: Choose desired settings from the dropdown.(for Normal and Hover modes)

Text Shadow: Choose desired settings from the dropdown.

Width and Height: Set arrows’ box width and height for desktop, tablet and mobile.

Space Between: Set a space between arrows and numbers for desktop, tablet and mobile.

Icon Size: Set arrows’ icon size for desktop, tablet and mobile.

Icon Spacing: Set a spacing between icon and text.

Hide Text on Tablet/Mobile: Slide to YES to hide text on tablet/mobile.

Border Type: Choose a Border Type from the dropdown and set it.

Border Radius: Set a border radius to numbers.

Padding: Set padding for desktop, tablet and mobile.

Pagination: Numbers

Text Color: Choose a Text Color from a color palette or dynamic tags. (for Normal, Hover and Active modes)

Background Color: Choose a Background Color from a color palette or dynamic tags. (for Normal, Hover and Active modes)

Box Shadow: Choose desired settings from the dropdown.(for Normal, Hover and Active modes)

Text Shadow: Choose desired settings from the dropdown.

Width and Height: Set numbers’ width and height for desktop, tablet and mobile.

Space Between: Set a space between numbers for desktop, tablet and mobile.

Border Type: Choose a Border Type from the dropdown and set it.

Border Radius: Set a border radius to numbers.

Padding: Set padding for desktop, tablet and mobile.

Advanced

Set the Advanced options that are applicable to this widget