Product Slider and Carousel

Enhance product visibility and improve user experience by displaying your products in the slider with the WooCommerce product slider.

Installation

↑ Back to top

• Download the Product Slider and Carousel Plugin for WooCommerce from your WooCommerce dashboard.
• At the WordPress admin panel, go to Plugins > Add New > Upload and select the ZIP file you just downloaded.
• Click Install Now, and then Activate Plugin.

Configuration

↑ Back to top

Enhance product visibility and improve user experience by displaying your products in the slider with the WooCommerce product slider.

Installation

↑ Back to top

• Download the Product Slider and Carousel Plugin for WooCommerce from your WooCommerce dashboard.
• At the WordPress admin panel, go to Plugins > Add New > Upload and select the ZIP file you just downloaded.
• Click Install Now, and then Activate Plugin.

Configuration

↑ Back to top

After you have installed and activated the Plugin, go to WooCommerce > Product Slider. Here, you can add multiple sliders and use their shortcodes on any page to display the slider.

Display Settings

↑ Back to top

• Layout Type: Select the layout type: Slider, Grid, Table, or Category. Slider uses Owl Carousel, Grid uses a responsive CSS grid, Table shows image, name, price, and add to cart in columns, and Category slides categories instead of products.
• Design: Choose a card design for the Slider, Grid, or Category layout: Classic, Minimal, Spotlight, Rounded, or Overlay. Table always uses Classic.
• Card Elements: Show or hide, and drag rows to reorder the elements under the price: Stock status, Add to cart, Rating, Short description, SKU, and Categories. Image, title, and price stay fixed. Available for Slider and Grid only.
• Quick View: Add a Quick view button to Slider and Grid cards. Variable and grouped product add-to-cart buttons open the same window instead of the product page.
• Category Tabs: Show an All tab plus category tabs on Slider and Grid. Selected query categories become the tabs. If none are selected, tabs come from the products in the first results, up to 12.
• Slider Rows: Set the number of product rows visible in the slider (1-4).
• Equal Height Cards: Select Yes to crop every image to the same height, or No to keep each image in its own ratio.

Query Settings

↑ Back to top

• Product Source: Select how products are pulled into the slider: Manual, Dynamic, or Context-based.
• Slider Content: Select products or categories to display in the slider. A multiselect box will be displayed upon choosing the option.
• Select Categories: Choose the categories to include. Leave empty to include products from all categories.
• Number of Products: Set the number of products in the slider. Use -1 for all products. Grid and table layouts paginate the full set, while slider layouts load up to 100 products per page for performance.
• Query Order: Display in ascending or descending order.
• Order By: Set the order by criteria for ascending/descending.
• Filter by Tags: Filter products by tags.

• Filter by Product Type: Filter products by type.
• Filter by Attribute: Select an attribute and its terms, then click Add filter. When you add multiple attributes, only products that match all of them are shown.
• Filter by SKU / Product ID: Enter comma-separated SKUs or product IDs to filter products.
• Hide Out of Stock: Option to hide out-of-stock products.
• Display On Sale Products: Option to display sale products in the slider or not.
• Show Hidden Products: Option to show or hide hidden products in the slider.

Carousel Settings

↑ Back to top

• Desktop (1200px and up): Set the number of products visible on desktop screens.
• Laptop (992px to 1199px): Set the number of products visible on laptop screens.
• Tablet (768px to 991px): Set the number of products visible on tablets.
• Mobile (576px to 767px): Set the number of products visible on mobile screens.
• Small mobile (below 576px): Set the number of products visible on small mobile screens.

• Auto Play: Option to set the slider on auto-play or manually.
• Slider Speed (milliseconds): Set the speed of product slides in milliseconds.
• Autoplay Interval Timeout: Set the autoplay interval timeout.
• Pagination Speed: Set the pagination speed in milliseconds.
• Loop: Slide the products in a loop or in the rewind position.
• Mouse Drag: Option to drag the slider with the mouse.
• Touch Drag: Enable touch drag (for touch screen).
• Pause Autoplay on Hover: Option to pause the autoplay slider on hover.

Style Settings

↑ Back to top

• Title Color: Set the color of the product title.
• Price Color: Set the color of the product price.
• Title Font Size (px): Set the font size of the product title in pixels.
• Title Text Wrapping: Set the title to wrap or display as a single line with ellipsis.

• Button Background: Choose the background color of the Add to Cart button.
• Button Text Color: Select the text color of the Add to Cart button.

• Image Flip on Hover: Enable or disable image flip on hover.
• Image Lightbox: Enable or disable the image lightbox.
• Image Zoom on Hover: Enable or disable image zoom on hover.

• Quantity Selector: Show or hide the quantity selector on product cards.

Advanced Settings

↑ Back to top

• Shortcode: Copy the shortcode to display the slider on any page, post, or widget area.
• Auto Placement: Choose where the slider is inserted automatically, for example on shop and product archives before the loop. This only sets the insert point, and the product source still chooses the products. If several sliders share the same placement, every match is shown, lowest ID first.
• Custom CSS: Add custom CSS for this slider. It prints only on pages that show the slider (maximum 20 KB).
• Custom JS: Add custom JavaScript that prints once, after the slider script, only on pages that show the slider (maximum 20 KB).
• Device Visibility: Hide the slider on desktop, tablet, or mobile with CSS. Mobile is up to 767px, tablet is 768px to 1024px, and desktop is 1025px and up. If all three are checked, nothing prints.
• Schedule: Set a start and end date and time to show the slider only within that window. It uses the site timezone. Leave both empty for no date limit. Outside the window nothing prints, and Replace placement leaves WooCommerce in place.
• Keyboard Navigation: Enable or disable keyboard navigation for the slider.
• Slider Direction (RTL): Set the slider direction. Compatible with WPML, Polylang, and any RTL WordPress theme.

Note: After adding a new slider, you will find a shortcode in each slider tab in WooCommerce > Product Slider. You just need to copy that shortcode and add it to any page to display a slider.