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.

Widget Lazy Load

lazy-load

Enable Widget Lazy Load: Slide to YES to enable widget lazy load. Enabling the setting will delay the website widget loading until it comes into visitor’s view to improve page load time.

You can choose the settings you want in the widget’s Style tab, or set the Preloader view globally in the Site Settings  to apply to all widgets with lazy loading enabled.

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.

Widget Lazy Load Preloader Type Icon

lazy-load-preloader

Icon

Icon Source: Choose default or custom icon.

Icon Size: Set the icon size for widescreen, desktop, tablet portrait and mobile portrait modes.

Icon Color: Choose the icon color.

Icon Animation Speed (ms): Set the icon animation speed in milliseconds. 

Container

Height: Set the container height for widescreen, desktop, tablet portrait and mobile portrait modes.

Background Type: Choose the container background type between Classic and Gradient and set it.

Overlay Background Type: Choose the container overlay background type between Classic and Gradient and set it.

Border Type: Choose the border type from the dropdown.

Border Radius: Set a desired border radius.

Box Shadow: Choose desired settings from the dropdown.

Widget Lazy Load Preloader Type Grid

lazy-load-grid
lazy-load-grid-2

Grid 

Count: Choose the number of icons that should be displayed.

Columns: Add the number of columns the icons should be shown for widescreen, desktop, tablet portrait and mobile portrait modes.

Height: Set the height for widescreen, desktop, tablet portrait and mobile portrait modes.

Horizontal gap: Choose Horizontal gap between elements for widescreen, desktop, tablet portrait and mobile portrait modes.

Vertical gap: Set Vertical gap between elements for widescreen, desktop, tablet portrait and mobile portrait modes.

Container padding: Add Container paddings for widescreen, desktop, tablet portrait and mobile portrait modes.

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

Icon size: Set the icon size for widescreen, desktop, tablet portrait and mobile portrait modes.

Icon Color: Choose the icon color.

Icon Animation Type: Choose between none, Blink and Spin types.

Icon Animation Speed (ms): Set the icon animation speed in milliseconds. 

Background Type: Choose the background type between Classic and Gradient and set it.

Border Type: Choose the border type from the dropdown.

Border Radius: Set a desired border radius.

Box Shadow: Choose desired settings from the dropdown.

Container

Background Type: Choose the container  background type between Classic and Gradient and set it.

Overlay Background Type: Choose the container overlay background type between Classic and Gradient and set it.

Border Type: Choose the border type from the dropdown.

Border Radius: Set a desired border radius.

Box Shadow: Choose desired settings from the dropdown.

Advanced

Set the Advanced options that are applicable to this widget