How to Show WooCommerce Products in a Slider or Carousel
The WooCommerce Product Grid Slider Carousel widget lets you display WooCommerce products inside Elementor layouts. This widget supports grid slider and carousel formats. You can showcase products in featured sections category blocks and landing pages. See the WooCommerce Product Grid Slider Carousel widget page to review widget features and examples.
Before using this widget confirm that WooCommerce is installed and active. Confirm that products exist in your store. If the widget does not appear review the Configuring Widgets documentation. Complete widget setup before building product layouts.
You can preview the widget layout on the Click to see Live Demo
The example below shows the WooCommerce Product Grid Slider Carousel widget inside the Elementor editor.
Note: Before you begin, make sure that you have the WooCommerce Plugin activated.
How to Add WooCommerce Product Grid Slider Carousel Widget #
Open a page using the Elementor editor. Search for the WooCommerce Product Grid Slider Carousel widget in the widget panel. Drag the widget into a section or container. The widget settings panel will open automatically.
Select the layout format you want to display. Grid layout shows products in rows. Slider and carousel layouts create horizontal product displays. Choose the layout that fits your page design.
After adding the widget, your layout will look similar to the example below.
How to Configure Widget Settings #
The widget includes content style and advanced settings. Use the Content tab to control product query and layout options. Use the Style tab to adjust colors typography and spacing. Use the Advanced tab for responsive controls and extra behavior settings.
You can filter products by category tag or featured status. You can also control the number of products shown in the layout. Review all widget features on the widget feature page if you want to explore layout options. Test the widget on desktop and mobile views before publishing.
Grid Slider and Carousel Layout Options #
The grid layout displays products in rows and columns. This layout works well for category sections and product collections. Slider and carousel layouts allow horizontal scrolling through products. These layouts are useful for featured products and homepage showcase sections.
Adjust column count and spacing to match your layout. Enable navigation controls if needed for slider or carousel view. Preview the design on different screen sizes before publishing. Keep the layout simple for better usability.
Product Query Settings #
From this section, you can choose how products will be retrieved and displayed. Select the product query source from Dynamic, Manual, or Current Query Selection. You can also define the product order from the available dropdown options.
After choosing your preferred ‘Query products’, you can filter your contents by ‘Categories’ & ‘Tags’. You have the flexibility to choose multiple options and add as many categories & tags as you wish. If you do not want certain products to appear, you can simply ‘Exclude Products’ those contents as well.
Moreover, you can set the number of ‘Products Per Page’, ‘Offset’ and ‘Not Found Text’. You toggle for enable exclude items without thumbnail & exclude out of stock as well.
Layout Settings #
From this section, you can change your layout, image size and last element position. You can use toggle for display last element to bottom, pagination and filters, also change vertical and horizontal gutter, use the drop-down to select one of these as your animation: Default and Zoom.
Besides, you can use the drop-down to change columns number for supported all devices.
Elements Display Settings #
From this section, you can use the drop-down to select element and change element location and display type. You can change horizontal align and vertical align. Than you can use toggle for hide or display element supported all devices. Moreover, you can styling to your animation and many more.
To add more elements, simply click on the ‘+ ADD ITEM’ button from the bottom.
Media Overlay #
From this section, you can change overlay width & height supported all devices. Use toggle for enable/disable for link product to single page and animation transparency.
Besides, you can change animation, animation duration, animation delay, animation timing and amination size as well.
Image Effects #
From this section, you can change effects. If you can select animation then you can change animation duration, animation delay, animation timing and animation size as well.
Lightbox Popup Settings #
From this section, you can change autoplay speed. You can use toggle for enable/disable autoplay slides, show progress bar, show caption, show counter, show arrows, show zoom button, show full screen button and show download button as well.
Filter Settings #
From this section, you can change filter taxonomy, alignment and select animation. You can use toggle for enable/disable show all filter, set linkable filters and hide empty filters. If all filter is enable then you can set all filter button text.
Pagination Settings #
From this section, you can change pagination type, set load more text, finish text, select loading animation and alignment as well.
How to Style WooCommerce Product Grid Slider Carousel Widget #
To customize Woo Grid/Slider/Carousel, click on the ‘Style’ tab, and you will find many different options here.
Grid Item Styling #
From here, you can change grid item style, background color, border color, border radius and padding. Moreover, you can styling to border and box shadow as well.
Grid Media Styling #
From here, you can styling to border and border radius as well.
Additional Style Settings #
From the ‘Media Overlay’ settings, you can you can set background color and border radius. On the other hand, customize your ‘Title’, ‘Excerpt’, ‘Categories’, ‘Tags’, ‘Rating’, ‘Status’, ‘Price’, ‘Sale Dates’, ‘Add to Cart’, ‘Add to Wishlist’, ‘Add to Compare’, ‘Lightbox’ ‘Separator 1’, ‘Separator 2’ and ‘Password Protected’ from these settings.
Besides, you can also customize your ‘Filters’ and your ‘Pagination’ from these settings.
Final Outcome #
By following the basic steps and a bit more modifying, you can style your Woo Grid/Slider/Carousel as per your preference.
This is how you can showcase WooCommerce products in grid, slider, or carousel layouts using the WooCommerce Product Grid Slider Carousel widget. This widget works well for featured sections, product collections, and promotional layouts. You can also review the step by step blog guide to create WooCommerce product sliders in Elementor without coding.
Looking for a simpler layout with native WooCommerce structure and default hooks?
Try the Woo Product Grid (Classic) widget — ideal for traditional setups with full support for WooCommerce’s default hooks and actions.
👉 View Full Documentation for Woo Product Grid (Classic)
Performance Tips #
Display only the number of products needed for the section. Loading too many products can affect page speed. Disable unused widgets to reduce unnecessary frontend assets. Review the Optimization Guide for better performance control.
Common Issues #
If products do not appear confirm that WooCommerce products exist. Check product visibility settings and assigned categories. Clear cache after updating product data or widget settings. Review the Troubleshooting documentation if the issue continues.
If you need any help, feel free to contact our dedicated support team for further assistance.
Navigation:
