How to use Product Category Marquee in Elementor

What is the Product Category Marquee widget?

The Product Category Marquee widget is a dynamic and engaging tool designed to showcase your WooCommerce product categories in a continuous, scrolling display. This widget helps you highlight specific categories, making it easy for visitors to navigate your online store and discover product types.

Common use case

A common use case is to place the Product Category Marquee widget on your homepage or shop pages to guide users to key sections of your store. By featuring a curated selection of categories in a moving banner, you can draw attention to popular or seasonal collections, improving user experience and encouraging conversions.

Additional use cases

• Displaying top-level categories in a minimalist design at the top of a page.
• Featuring specific categories related to a blog post or landing page.
• Creating a visual guide to products organized by type, brand, or style.

Requirements

• Have Elementor Pro installed and activated.
• Have the WooCommerce plugin installed and activated.
• Make sure you have products added to your WooCommerce store.
• You need the Marquee Addons Pro plugin installed and activated on your website.
• You can find detailed installation instructions in our dedicated installation guide.
• Make sure that this addon is enabled so you can find it in the Elementor editor.
• Marquee Addons works only with the Elementor Page Builder plugin, so you will need to have it installed and activated as well.

Add the widget

To add the Product Category Marquee widget to your page:

1. Navigate to the page where you want to add the widget in the Elementor editor.
2. Search for “Product Category Marquee” in the widget panel.
3. Drag and drop the widget onto your page.
4. The widget will automatically populate with a scrolling display of your product categories.

Settings for the Product Category Marquee widget

Content tab

Layout

1. Layout: Select how the products card will be displayed — choose between Carousel or Marquee style.
   • Marquee Layout Controls:
     • Gaps: Adjust the horizontal and vertical distance between continuously scrolling cards.
   • Carousel Layout Controls
     • Items to Show: Define how many cards are visible at once within the carousel frame.
     • Items to Scroll: Specify how many cards move per scroll or slide transition.
     • Gap: Set the space between cards in pixels to control the spacing and overall visual balance.

Content

1. Show Image: Toggle to display or hide the category image.
2. Image Resolution: Choose the size of the category image.
3. Show Product Count: Toggle to display or hide the number of products in each category.
4. Open in New Tab: Enable this to open the category link in a new browser tab.

Query

1. Source: Select the product category source, such as “All” categories or specific selections.
2. Limit: Set the number of categories to display. Enter “0” to display all categories.
3. Exclude categories: Select specific categories to exclude from the marquee.
4. Order By: Choose the order of categories, such as “ID,” “Name,” “Count,” or “Menu Order.”
5. Order: Set the order to ascending (ASC) or descending (DESC).

Marquee Options

1. Marquee: Toggle the marquee scrolling effect on or off.
2. Show Vertical: Enable this for vertical scrolling instead of horizontal.
3. Reverse: Change the direction of the scroll.
4. Pause On Hover: Pause the marquee when the user hovers over it.
5. Drag to Scroll: Allow users to manually drag the marquee to scroll.
6. Speed: Adjust the scrolling speed of the marquee.
7. Show Edge Shadow: Add a subtle shadow effect to the edges of the marquee.
8. Marquee on Scroll: A toggle to enable or disable the marquee animation on scroll.
9. On Hover: Select a hover effect to apply when users interact with a card.

Style tab

Card

1. Background Type: Choose a background color or gradient for the cards.
2. Border Type: Add a border to the cards.
3. Border Radius: Add rounded corners to the cards.
4. Box Shadow: Apply a box shadow effect to the cards for depth.
5. Padding: Adjust the padding inside the category cards.

Image

1. Position: Set the alignment of the category image.
2. Width: Set the width of the category image.
3. Spacing: Adjust the spacing between the image and the content.
4. Border Radius: Add rounded corners to the image.
5. Border Type: Add a border to the image.
6. Box Shadow: Apply a box shadow effect to the image.

Title

1. Text Alignment: Set the alignment of the category title.
2. Typography: Customize the typography for the title.
3. Color: Set the text color.
4. Text Stroke: Add a stroke effect to the title text.
5. Text Shadow: Add a shadow effect to the title text.

Product Count

1. Text Alignment: Set the alignment of the product count text.
2. Typography: Customize the typography for the product count.
3. Text Stroke: Add a stroke effect to the product count text.
4. Text Shadow: Add a shadow effect to the product count text.
5. Color: Set the text color.
6. Spacing: Set the spacing below the product count.

Advanced tab

The Advanced tab provides a comprehensive set of controls that are common to most Elementor widgets, allowing for refined design and responsiveness. Here you can adjust the widget’s Layout (e.g., positioning, Z-index), apply engaging Motion Effects (like scrolling effects or entrance animations), customize its Background, add Borders and Box Shadows, apply Masks for unique shapes, control Responsive visibility across devices, add custom HTML Attributes, and inject Custom CSS for bespoke styling.

Frequently Asked Questions (FAQ)

Can I change the direction of the scrolling categories?

Yes. In the Marquee Options section of the Content tab, you can use the Reverse control to change the scrolling direction.

---

How do I control the speed of the category marquee?

The scrolling speed can be adjusted in the Content tab. Within the Marquee Options, you will find a Speed control that allows you to set how fast or slow the categories move across the screen.

---

Is it possible to stop the marquee animation when a user hovers over it?

 Yes, simply enable the Pause On Hover option in the Marquee Options section of the Content tab.