If you run an online shop, first impressions matter. The WooCommerce Product Slider for Elementor gives you a fast and eye-catching way to show off your inventory, so guests are hooked the moment they arrive.
This handy widget from Spexo Addons for Elementor lets you whip up eye-catching carousels with a few quick clicks. Whether you stack products in a grid, slide them with a swipe, or loop them automatically, customers are far more likely to stop scrolling and start shopping.
Highlight WooCommerce Products Through an Animated Slider
Want to show off your WooCommerce shop without a lot of fuss? The Product Grid/Slider/Carousel widget lets you whip up eye-catching sliders that slide, flip, or fade with almost zero effort.
The widget instantly turns a plain product list into a WooCommerce Product carousel, complete with handy Add to Cart buttons. Because each slide moves on its own, the action never feels stale. Shoppers glide through items, see prices, and can shoot a product directly into their cart in seconds.
No code means anyone can play designer. Pick a pre-set layout and the slider instantly tidies itself up, or drag knobs until the display looks just right. Add star ratings for instant trust, fiddle with colors, or stack product badges-just drag, drop, and watch the magic.
How To Create A WooCommerce Product Slider In Elementor?
If youre a fan of dragging and dropping things into place with Elementor, chances are you like the idea of a sparkling product slider that does the heavy lifting for you. The Product Grid, Slider, and Carousel widget from Spexo Addons lets you pull that off without writing a single line of code, and a short guide below will show you how.
Before you dive in, your WooCommerce shop needs to be up and running. Upload your products, then install Spexo Addons for Elementor, and youre nearly there. To make it earier for you, heres a handy checklist of what youll need.
Necessary Tools to Create a WooCommerce Product Slider
- Elementor: The core page-builder must be active on your site. You will need to install and activate Elementor on your website.
- WooCommerce: Get the WooCommerce plugin and follow its setup wizard until your store feels complete.
- Spexo Addons for Elementor: As the Product Grid/Slider/Carousel widget is an element from Spexo Addons for Elementor, you need to install and activate Spexo Addons on your website.
After installing and activating these plugins, you’re all set to create your WooCommerce Product Slider in Elementor.
Step 1: Activate Product Grid/Slider/Carousel Widget In Elementor
The first thing you need to do is activate the Product Grid/Slider/Carousel element. To do this, first head over to your WordPress dashboard and navigate to Spexo Addons → Widget Settings tab. Here, filter by WooCommerce. Toggle the ‘Woo Grid/Slider/Carousel’ option and make sure that is enabled. If it is not, simply turn on the widget’s switcher.
Next, open a new page in Elementor Editor and search for the ‘Woo Grid/Slider/Carousel’ widget in the ‘ELEMENTS’ tab.
Drag and drop the widget onto your page, and the Product Grid/Slider/Carousel will automatically appear with the default settings.
Step 2: Customize Your Product Grid/Slider/Carousel
Now it’s time to customize your product slider. You can style it to your liking using the Elementor Editor.
Click on your Product Grid/Slider/Carousel element and go to the ‘Content’ and ‘Style’ tabs. Here, you’ll find various options to personalize your product slider. In the ‘Style’ tab, you can adjust margins, width, padding, background colors, and more to ensure your product slider perfectly complements your website’s design.
If you want to find out more details about how to customize your product carousel with Product Grid/Slider/Carousel widget, then check out our step-by-step documentation here.
Step 3: Publish Your Product Slider
When you are done, you can publish your Product Grid/Slider/Carousel by saving your changes and clicking on the Publish button in Elementor. Take a look at the product slider that we made in this tutorial.
Spexo Addons for Elementor lets you build a Product Grid, Slider, or Carousel with point-and-click ease-no coding required. In fewer than ten minutes you can assemble a polished product carousel that displays your merchandise and encourages visitors to make a purchase. The entire process is designed for store owners who want results without wrangling with custom scripts.
If you need any help, feel free to contact our dedicated support team for further assistance.
FAQs about WooCommerce Product Sliders in Elementor
It’s a drag-and-drop Elementor widget from Spexo that helps you create responsive WooCommerce product sliders, carousels, and grids without coding.
Yes, Spexo Addons work with the free Elementor version. Just install WooCommerce, Elementor, and Spexo Addons to get started.
Use the ‘Woo Grid/Slider/Carousel’ widget from Spexo Addons. Drag it into your page and customize it with Elementor’s visual editor.
Yes, you can adjust spacing, colors, typography, slider effects, and more using the Style tab in Elementor.
Yes, it includes Add to Cart functionality so users can purchase products directly from the carousel.
Yes, Spexo Addons lets you display WooCommerce product ratings inside your slider for added trust and conversions.
Yes, you can add as many product sliders as you need and style them independently within Elementor.
Yes, the widget works with most modern themes that support Elementor and WooCommerce. For the best result go with Spexo Elementor Theme.
Bonus: Create a Gorgeous Online WooCommerce Store with Pre-Made Elementor Templates
Love using Elementor? Then head over to Spexo Theme and browse through multiple ready Elementor templates and build your online store instantly on WordPress.
