10Web Help Center

Hi, how can we help?

Products Widget

Copy article URL

in this article

The Products widget is a dynamic tool designed to fetch and display WooCommerce products on any page of your site in an illustrative grid. It allows users to view product prices and add desired quantities to their cart. This widget is most commonly used on the shop page template. Learn more about creating and customizing the shop page template in the dedicated article.

Adding Products widget

  1. Find the Products widget in the widget menu.
  2. Drag it to the page canvas.
  3. Configure the settings from the tabs below.

Content tab

Products

  • Skin: choose visual layout of the widget from Default, Classic, Modern

    Note:

    Available content and style settings will vary depending on the chosen skin.

  • Add to Cart button (Modern skin only): select when to show add to cart button (hide, always, or on hover only)
  • Columns: Set the number of columns to display (1 to 12).
  • Rows: Set the maximum number of rows to display.
  • Pagination: Select Yes to show Pagination or No to hide it.
  • Hide options (skin-dependent): select product features (titles, images, descriptions) to hide or show

Product Hover (Classic skin only):

  • Product Title On Hover: Hide or show the product title on hover
  • Products Description On Hover: Hide or show the product description on hover.

Select Products

  • Type: Choose the source of results: Current Query, Latest Products, Sale, Featured, Manual Selection, Related, Upsells, or Cross-Sells. Each source offers different filtering options.

Include

  • Include By: Choose products to display based on Categories, Tags or Author
  • Order By: Set the display order: Title, Price, Popularity, Rating, Random, or Menu Order.
  • Order: Select DESC (descending) or ASC (ascending).

    Note:

    Availability of Include criteria will vary depending on the Select Products > Type setting you choose.

Exclude

  • Exclude By: Choose Current Post, Manual Selection, Term, then use Search and Select for Manual or Term choices.
  • Order By: Set the display order: Title, Price, Popularity, Rating, Random, or Menu Order.
  • Order: Select DESC (descending) or ASC (ascending) sorting order.

Style tab

Products

  • Columns Gap: Set the gap between columns.
  • Rows Gap: Set the gap between rows.
  • Alignment: Align the products data to the left, right, or center.

Image

  • Thumbnail image width: set up size for thumbnail images
  • Single image width: set up size for single images
  • Border Type: Choose from none, solid, double, dotted, dashed, or grooved.
  • Border Radius: Control the roundness of the border corners.
  • Spacing: Adjust the space between images and their data.

Title

  • Color: Choose the Title color.
  • Typography: Set typography options for the Title text.
  • Spacing: Adjust the space after the Title.

Rating

  • Star Color: Choose the color of filled stars.
  • Empty Star Color: Choose the color of empty stars.
  • Star Size: Set the size of stars.
  • Spacing: Adjust the space after the Rating Stars.

Price

  • Color: Choose the Price color.
  • Typography: Set typography options for the Price.

Regular Price

  • Color: Choose the Regular Price color.
  • Typography: Set typography options for the Regular Price.

Button

Note:

The following options can be set independently for both the normal and hover states:

  • Text Color: Choose the Button Text color.
  • Background Color: Choose the Button background color.
  • Border Color: Choose the Button border color.
  • Typography: Set typography options for the Button Text.
  • Border Type: Choose from none, solid, double, dotted, dashed, or grooved.
  • Border Radius: Control the roundness of the button’s border.
  • Text Padding: Set the padding within the button.
  • Spacing: Adjust the space above the buttons.
  • Automatically Align Buttons: Toggle to align buttons to the bottom of the wrapper, ensuring consistent alignment when product titles wrap to additional lines.

View Cart

  • Color: Choose the View Cart text color.
  • Typography: Set typography options for the View Cart text.

Box

  • Border Width: Control the border thickness around the product’s box.
  • Border Radius: Control the roundness of the box corners.
  • Padding: Adjust the padding within the box. The following options can be set independently for both the normal and hover states:
  • Box Shadow: Adjust box shadow options.
  • Background Color: Choose the box background color.
  • Border Color: Choose the box border color.

Sale Flash

  • Sale Flash: Show or Hide.
  • Text Color: Choose the Sale Flash text color.
  • Background Color: Choose the Sale Flash background color.
  • Typography: Set typography options for the Sale Flash text.
  • Border Radius: Control the roundness of the Sale Flash corners.
  • Width: Control the Sale Flash border thickness.
  • Height: Set the Sale Flash height.
  • Position: Set the Sale Flash position, Left or Right, of the product’s box.
  • Distance: Set the distance of the Sale Flash from the top of the product’s box.

    Note:

    Note: The style of this widget may be affected by your theme and plugins. If you encounter issues, switch to Builder theme and deactivate related plugins.

Advanced tab

You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.

in this article