Product Category/Tag

Whether you’re designing a shop page, category menu, or featured section, the Product Category Widget makes it easy to present categories with precision and style.

Key Features:

• Display WooCommerce product categories
• Choose from multiple layout styles
• Customize category image, title, and count visibility
• Link categories to their respective pages
• Fully responsive and optimized

🚀 How to Enable the Product Category Widget

To start using the Product Category Widget, follow these steps:

1. Navigate to your WordPress dashboard.
2. Go to Topper Pack → Widgets.
3. Locate the Product Category Widget from the list.
4. Toggle the switch to “On” to enable it.
5. The widget is now available in the Elementor editor.

🧩 How to Use the Product Category Widget in Elementor

Step 1: Add the Widget to Your Page

• Open your desired page using Elementor Editor.
• Search for “Product Category” in the Elementor widget panel.
• Drag and drop the Product Category Widget TP widget onto your page canvas.
• 🔄 Tip: It includes the TP badge, which means it’s from the Topper Pack.

Step 2: Configure Category Settings

• Under the Content → Settings section:
  • Set Display Categories (e.g., All Categories) to choose which categories to show.
  • Toggle Show Category Image to “Yes” to display category images.
  • Toggle Show Category Title to “Yes” to display category names.
  • Toggle Show Product Count to “Yes” to display the number of products in each category.
  • Set Link Type (e.g., Category Page) to link categories to their respective pages.

Step 3: Style the Category Display

• Under the Style → Category section:
  • Adjust Alignment to position the categories (e.g., left, center, right).
  • Customize Typography for category titles, including font size, weight, and style.
  • Set Color for the category text, and adjust Margin and Padding for spacing.

Step 4: Style the Category Image

• Under the Style → Image section:
  • Adjust Image Size (e.g., in pixels) to resize category images.
  • Set Border Type, Border Radius, and Box Shadow for the images.

Step 5: Style the Container

• Under the Style → Container section:
  • Set Background Type (e.g., Classic) and customize Background Color.
  • Adjust Border Type, Border Radius, and Box Shadow for the container.

✅ Final Preview and Save

Once your Product Category Widget settings and style options are applied:

• Click Preview Changes to see how it looks.
• Hit Publish or Update to save your page.