Product Categories Widget

The Product Categories widget allows you to display a grid of WooCommerce product categories anywhere on your site using 10Web Builder.

Adding a Product Categories widget

Add the Product Categories widget by finding it on the widgets panel and dragging it to the page canvas. For details, see Add Elements article.

Content tab

Layout

• Columns: Set the exact number of columns to display, from 1 to 12.
• Categories Count: Select the number of categories to display.
• Categories Count(Toggle): Hide or Show the number of products in each category
• Category Title Position: Choose the position of the Category Title from the dropdown list to make it visible outside, inside the bottom, or inside top.

Query

• Source: Select the source from which to display categories, choosing from Show All, Manual Selection, By Parent, or Current Subcategories.
  
  If Manual Selection is chosen, manually select which categories to display.
  If By Parent is chosen, select from Only Top Level, or select an individual category from the dropdown list.
• Hide Empty: Set to Yes to hide categories with no products within them.
• Order By: Set the order in which the categories will be displayed. Options include Name, Slug, Description, or Count.
• Order: Select to display categories in ASC or DESC (Ascending or Descending) order.

Style tab

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

Image

• Hover Animation: Choose an animation from the dropdown list to see it while hovering on the image.
• Animation Duration: Choose the duration of the animation from 1 to 3000 ms.
• Border Type and Radius: Customize the border type and radius. For details, see the Border Type and Border Radius guide.
• Spacing: Adjust the amount of space between the images and their data.

Title

• Color: Choose the title color.
• Typography: Set the typography options for the title text.
• Background Color: Choose a background color using the color picker for the title box.
• Border Type and Radius: Customize the border type and radius. For details, see the Border Type and Border Radius guide.

Count

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

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.