Woo-Categories Widget

Are you looking for an easy way to display WooCommerce categories anywhere on your online store? You can do that with Ultimate Addons for Elementor (UAE).

UAE comes with a “Woo-Categories” widget that allows you to display your selected product categories on any page or post.

You can take a look at our demo to check out how the widget works – Demo Page.

A Slider or Grid Layout

You can add your WooCommerce categories as Grid or Slider. You can do this by clicking on your Woo-Categories widget and navigating to Content > Global > Layout. Next, in the dropdown menu, choose “Grid” to display categories as a grid or “Carousel” to use a slider instead.

Slider Settings

When you select the “Carusel” layout, you will notice the “Slider Options” panel next. Here, you will find all options available for setting up your product category slider.

Navigation

You can start by setting Navigation. You can choose to set both Arrows and Dots, only Arrows or Dots, or None.

Categories – To Show, to Scroll, and Total

Here, you need to decide how you want your slider to look. Total Categories sets the number of categories you wish to add to the slider. 

Next, you need to set the Categories to Show option. This is the number of categories that should be displayed for users out of the total number of categories. Thus, this number needs to be less than the total categories number.

In addition, the Categories to Scroll option determines the number of categories that will be changed with each scroll. In other words, if you set a value of “1”, with each scroll, your slider will move one category further.

Play Options

Enabling Autoplay will make your slider scroll without the need for users to click on the navigation buttons. You will also get additional options to set Autoplay Speed and Pause on Hover.

Next, enabling the Infinite Loop will allow your slider to scroll infinitely in a loop. Otherwise, once the slider reaches the last category, users will only be able to scroll back to the opposite side. Finally, the Transition Speed will set how long the slider will need for one scroll.

Grid Options

If you selected the “Grid” layout, you would notice that the “Grid Options” panel shows below. Here, you will find all options available for setting up your product category grid.

Columns And Category Count

When you choose to display your product categories as a grid, they will be sorted into columns and rows. You can set the number of “Columns” from one to six in total. Your product categories will be automatically distributed to rows. Thus, to control the number of rows, you need to set the “Categories Count”. 

For example, let’s say you set columns to “3” and categories count to “6”. Accordingly, this will create a grid with two rows and three columns:

Set Up Category

The following options are available within both Slider and Grid Options. These options allow you to set the way categories are displayed in Slider or Grid.

Hide Category Product Count

You set the product count, the number of products in each category, to be hidden.

Display Title and Product Count Below the Image

By default, the title and product count are shown above the category image in WooCommerce. But, you can change the title and product count position below the image using the Title/Count Position option.

Display Category Title and Product Count Inline

Next, you can set the Title/Count Style to “Inline”. Thus, the category title will be displayed together with the product count as an inline text.

Filters

You can use filter settings to choose the exact categories which will be displayed.

Category Filter Rule

Select the filtering rule from a dropdown menu:

• Show All: This is a default option. It will display all available product categories;
• Only Top-Level: this rule will display only parent categories;
• Match These Categories: choose this rule to select the exact categories you wish to display. You can add one or more categories;
• Exclude These Categories: Similarly, you can use this rule to exclude one or more categories.

Display Category Description

Enabling Display Category Description will display the category description.

You can add the category description by navigating to Dashboard > Products > Categories. Here, select the category and click “Edit”. Add your description to the “Description” field.

Display Category Description

Enabling Display Empty Categories will also display categories that are not assigned to any products.

Order

Order by allows you to set categories order according to: 

• Name
• Slug
• Description
• Count (Assigned Product Count)
• Menu Order. 

You can also choose the Order to “Descending” or “Ascending”.

Styling

Styling options for every feature are available under the Style tab.

Layout

Under the Layout panel, you can set the gap between columns and rows.

Category Content

In addition, you can style your content. Set Alignment, Colors, Padding, and Typography

Further, you can choose the heading tag they’d like to apply to a category title text.