How to Use the Product Marquee in Elementor?

What is the Product Marquee widget?

The Product Marquee widget is a powerful tool for showcasing your WooCommerce products in a dynamic, scrolling display. Unlike a static grid, the marquee effect continuously moves your products across the screen, making them impossible to miss. This is a great way to highlight new arrivals, bestsellers, or products on sale, drawing the user’s eye and encouraging them to browse your store.

Common use case

A common use case is to place the Product Marquee widget on your homepage or landing pages to feature a selection of your top-selling products. By setting the marquee to scroll continuously, you can create a high-impact, engaging section that immediately grabs visitors’ attention and directs them towards your most popular items.

Additional use cases

• Showcasing new arrivals: Create a dedicated “New Arrivals” section on your website to display the latest products as they are added to your store.
• Highlighting a seasonal sale: Use the marquee to draw attention to products included in a limited-time sale or seasonal promotion.
• Displaying customer favorites: Feature a curated list of products that have received high ratings or positive reviews, building social proof and encouraging conversions.

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 blog post.
• 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 Marquee widget to your page:

1. Navigate to the page where you want to add the widget.
2. In the Elementor editor, search for “Product 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 products.

Settings for the Product Marquee widget

Content tab

Content

1. Image: Toggle to display or hide the product image.
2. Title: Toggle to display or hide the product title.
3. Price: Toggle to display or hide the product price.
4. Ratings: Toggle to display or hide the product ratings.
5. Buttons: Toggle to display or hide the “Add to Cart” and “View Cart” buttons.
6. Sale Flash: Toggle to display or hide the “Sale!” badge on discounted products.
7. Flash Text: Customize the text for the sale badge.
8. Lazy Load: Enable this to load images only when they enter the viewport, improving page performance.
9. Gaps: Control the horizontal and vertical spacing between product cards.

Query

1. Source: Select the product source to display, such as “Latest Products,” “Products,” “Sale Products,” or “Featured Products.”
2. Limit: Set the number of products to display. Enter “-1” to show all products.
3. Include By/Exclude By: Choose the taxonomy to include or exclude, such as “Terms,” or “Authors.”
4. Terms: Select specific terms from available taxonomies, such as Categories, Tags, Formats, and custom taxonomies.
5. Authors: Select specific authors to include.
6. Order By: Choose the order of products, such as “Date,” “Title,” or “Price.”
7. 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: Toggle to enable 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. Scroll Effect:
   • Marquee on Scroll: A toggle to enable or disable the marquee animation and start scroll animation on scroll.

Style tab

Card

1. Width: Set the width of each product card.
2. Background Type: Choose a background color or gradient for the cards.
3. Border Type: Add a border to the cards.
4. Border Radius: Add rounded corners to the cards.
5. Box Shadow: Apply a box shadow effect to the cards for depth.

Image

• Border Type: Add a border to the product images.
• Border Radius: Add rounded corners to the images.
• CSS Filters: Apply visual effects like blur, brightness, or saturation to the images.

Content

1. Padding: Adjust the padding inside the testimonial box.
2. Title:
   • Text Alignment: Set the alignment for the title.
   • Color: Set the text color.
   • Typography: Customize the typography for the title.
   • Spacing: Set the spacing below the title.
3. Price & Rating:
   • Alignment: Set the horizontal alignment for the price and rating.
4. Price:
   • Color: Set the text color.
   • Typography: Customize the typography for the price.
5. Regular Price:
   • Color: Set the text color.
   • Typography: Customize the typography for the regular price.
6. Rating:
   • Color: Set the text color for the rating.
   • Typography: Customize the typography for the rating.
   • Icon Color: Set the color of the star icons.
   • Icon Size: Adjust the size of the star icons.

Buttons

1. Normal/Hover: Style the buttons for both their normal and hover states.
2. Text Color: Set the color of the button text.
3. Background Color: Set the background color of the button.
4. Border Color: Set the color of the button border.
5. Typography: Customize the typography of the button.
6. Alignment: Align the buttons within the card.
7. Border Type: Add a border to the buttons.
8. Border Radius: Add rounded corners to the buttons.
9. Padding: Adjust the padding inside the buttons.
10. Spacing: Adjust the spacing between the buttons.
11. View Cart:
    • Normal/Hover: Style the “View Cart” button for its normal and hover states.
    • Text Color: Set the color of the “View Cart” button text.
    • Background Color: Set the background color of the “View Cart” button.
    • Typography: Customize the typography of the “View Cart” button.
    • Spacing: Adjust the spacing of the “View Cart” button.

Sale Flash

1. Text Color: Set the color of the “Sale!” text.
2. Background Color: Set the background color of the sale badge.
3. Typography: Customize the typography of the sale badge.
4. Padding: Adjust the padding around the sale badge.
5. Border Type: Add a border to the sale badge.
6. Border Radius: Adjust the corner radius of the sale badge.
7. Box Shadow: Apply a box shadow effect to the sale badge for depth.
8. Position: Adjust the horizontal position of the sale badge.
9. Vertical Distance: Fine-tune the vertical position of the sale badge.
10. Horizontal Distance: Fine-tune the horizontal position of the sale badge.

Edge Shadow

• Color: Set the color of the edge shadow.
• Size: Adjust the size of the edge shadow.
• Blur: Control the blur of the edge shadow.

Advanced tab

The Advanced tab provides a comprehensive set of controls that are common to most Elementor widgets. 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. This widget also includes a specific Marquee Custom CSS section, allowing for even more granular control over its unique animation properties.

Frequently Asked Questions (FAQ)

Can I change the products that appear in the marquee?

Yes. In the Content tab, under the Query section, you can select the product source, include/exclude specific products, and set limits to control which products are displayed.

---

How do I change the speed of the scroll?

In the Content tab, under the Marquee Options section, you can use the Speed control to increase or decrease the scrolling speed.

---

Can I use this widget for non-product items?

The Product Marquee widget is specifically designed to work with WooCommerce products. It queries your store’s product database to populate the display. For non-product items, you would need to use a different marquee or carousel widget that can display custom content.