PowerPack Woo - Categories widget for Elementor lets you display your WooCommerce product categories in a clean and attractive layout. Instead of showing a simple list of categories, you can present them in a Grid, Carousel, or Tiles layout with category images, titles, product count, and descriptions.
This widget is a great way to help visitors browse your store and quickly find products they are interested in.
Getting Started: Using the Woo - Categories Widget#
Follow these steps to add Woo - Categories widget to your page:
- Open page in Elementor.
- Search for "Woo Categories" in the Elementor widgets panel.
- Drag and drop widget onto your page.
- Once widget is added, you'll see two main tabs in left panel:
- Content
- Style
Let's explore each option available in these tabs., but before we proceed, make sure you have installed and activated the below-mentioned plugins:
Required Tools#
Let's explore each option available in these tabs.
Content Tab#
Content tab lets you choose how product categories are displayed and which categories appear on your page.
It includes following sections:
- Layout
- Grid Options
- Carousel Options
- Filters
Layout#
- Layout: Choose how you want to display your WooCommerce categories. Available layouts include:
- Grid: Displays categories in multiple columns.
- Carousel: Shows categories inside a responsive slider.
- Tiles: Displays categories in stylish tile layouts.
- Categories Count: Set the number of categories you want to display on the page.
- Content Position: Choose where category information appears over category image.
- Image Resolution: Select image size used for category thumbnails. Choosing appropriate image resolution helps maintain image quality while improving page loading speed.
- Category Title: Enable or disable category title.
- Product Count: Enable this option to show the number of products available in each category.
- Category Description: Enable this option to display category description below or over category image, depending on selected layout.
- Tiles Style: This option appears only when Tiles layout is selected. Choose between: Style 1 or Style 2
Grid Options#
This section is available only when Grid layout is selected.
- Columns: Choose the number of columns for the category grid. Increase or decrease columns depending on available page width and number of categories.
Carousel Options#
This section appears only when the Carousel layout is selected.
- Categories to Show: Choose how many categories are visible at one time.
- Categories to Scroll: Set how many categories move when a visitor clicks navigation arrows or carousel advances automatically.
- Autoplay: Enable this option to make the carousel slide automatically. Disable it if you want visitors to navigate manually.
- Infinite Loop: Enable this option to continuously loop the carousel after reaching the last category.
- Transition Speed (ms): Control animation speed while the carousel moves from one category to another. Lower values create faster transitions, while higher values create smoother and slower animations.
- Navigation: Choose the navigation style for the carousel. Available options are: Arrows & Dots
Filters#
This section helps you control which WooCommerce categories appear in the widget.
- Category Filter Rule: Choose a filtering rule for displaying categories according to your requirements.
- Display Empty Categories: Enable this option to include categories that do not contain any products. Disable it to display only categories with products.
- Order By: Choose how categories should be sorted. For example, you can sort them by name or other available WooCommerce options.
- Order: Choose sorting order.
Style Tab#
Style tab lets you customize the appearance of WooCommerce Categories widget to match your website design. It includes following sections:
- Layout
- Category Content
- Arrows
- Dots
Layout#
Customize the overall appearance of category boxes.
- Columns Gap: Adjust spacing between category columns.
- Border Type: Choose border style for category boxes.
- Border Hover Color: Set border color displayed when visitors hover over category box.
- Box Shadow: Add shadow around category boxes to create more depth and visual separation.
Category Content#
Customize appearance of category title, product count, description, and content area.
- Vertical Align: Choose vertical alignment for content inside the category box.
- Horizontal Align: Set the horizontal position of the content.
- Text Alignment: Align text to left, center, or right.
- Background Type: Choose background style for the content area. You can use a solid color or other supported background types.
- Margin: Add space outside the content area.
- Padding: Add space inside the content area for better readability.
- Title: Customize category title using: Color & Typography
- Product Count: Customize product count using: Color & Typography
- Opacity: Adjust transparency of content area to create desired visual effect.
Arrows#
This section is available when carousel navigation is set to Arrows.
- Choose Arrow: Select arrow icon style.
- Arrows Size: Adjust size of navigation arrows.
- Align Arrows: Choose where arrows appear within the carousel.
- Background Color: Change the background color of the arrows.
- Color: Choose icon color for arrows.
- Border Type: Add and customize borders around arrows.
- Border Radius: Create rounded or circular arrow buttons.
- Padding: Adjust spacing inside arrow buttons.
Dots#
This section is available when carousel navigation is set to Dots.
- Position: Choose where navigation dots appear.
- Size: Adjust size of dots.
- Spacing: Control space between navigation dots.
- Color: Choose color for navigation dots.
- Border Type: Add borders around dots.
- Border Radius: Adjust corner radius to create rounded or circular dots.
- Margin: Add spacing around dot navigation.
Wrapping Up!#
WooCommerce Categories widget makes it easy to showcase your product categories in a professional and organized way. With multiple layouts, flexible filtering options, carousel settings, and extensive styling controls, you can create category sections that match your store's design and help customers discover products faster.