The WooCommerce Category Carousel Slider Widget helps you showcase WooCommerce categories in an interactive carousel format inside of Elementor. It comes with advanced products query options that will give you full control to filter your products exactly the way you want. You can turn on or off different parts of the slider to make it suitable exactly for your needs.
Let’s look at each of the options in the “WooCommerce Category Carousel Widget” below.
Install WooCommerce Category Carousel Widget for Elementor #
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “WooCommerce Category Carousel”
- Hover over the widget in the search results and click install
- Add your “WooCommerce Category Carousel” widget to any Elementor Page
General Settings #
Select Post Type
Select type of post you want to display.
Include By
Include the products from different options given below
- Specific Terms
- Children of
- Children of Current Term
- By Search Text
- Only Childless
- Not a Child of Other Term
- Term Meta
Exclude By
Choose specific products that you would like to exclude from your selection by adding rules.
- Specific Terms
- Current Term (for archive only)
- Hide Empty Terms
Order By
Order the WooCommerce categories by following terms:
- Name
- Slug
- Term Group
- Term Id
- Description
- Parent
- Count - (Number of posts associated)
- Include -(Specific terms order)
- Meta Value
Order Direction
Set the order direction from below option:
- Default
- Descending
- Ascending
Button Text
Type text to display in button.
Carousel Settings #
Layout
Select the layout of carousel.
- Under
- Overlay
- Under Overlap
- Partial Overlay
- Reveal from Bottom
- Side by Side
Number of Items
Set the number of items to display in carousel.
Loop
Turn on/off the loop option.
Autoplay
Turn on the autoplay option for carousel.
Margin Between Items
Set the margin between carousel items.
Transition Speed
Set the transition speed of carousel.
Autoplay Interval
Set the interval between autoplay transitions.
Center Mode
Turn on/off the center mode.
RTL
Turn on the option for right to left websites.
Open Link in New Tab
Open link in new tab.
Arrows Setting #
Left Arrow
Choose icon for left arrow.
Right Arrow
Choose icon for right arrow.
Connected Widgets Settings #
Enable Remote Connection
Use remote control widgets to create advanced creative layouts.
Widget Name for Connection
This name will be used to connect and controls this widget by other widgets.
Sync
You can connect two item-based widgets and sync them.
Sync Group
Choose the same group for two or more item-based widgets so they can sync together.
WooCommerce Category Carousel Widget Styling #
A lot of styling options are provided to control every aspect of the widget’s appearance. Modify the colors to match your site’s look and feel. You can customize every single detail to perfectly blend with your website design.
General Styling #
Set the alignment, image height, and image border radius.
Content Styling #
Style the content padding, and content background color.
Title Styling #
You can set the title color, typography, and spacing.
Description Styling #
In this section, set the description color, typography, and spacing.
Button Styling #
Set the button background color, text color, border, spacing, and padding.
Nav Arrows Styling #
You can set the nav arrow spacing, positioning, background size, icon size, background color, and icon color.
Nav Dots Styling #
Here, You can style the nav dots size, color, spacing, and alignment.
Usage Examples #
Here are some live use cases for the WooCommerce Category Carousel widget.
WooCommerce Category Carousel widget with overlay layout.
