Creating a Products Slider

You can create a Products Slider to showcase selected WooCommerce products in a slider or a carousel. Go to Sliders > Add New to create a new slider, give it a name, then select ‘Products (requires WooCommerce)’ in the ‘Content Type’ dropdown in the Slider Settings panel.

add-product-slider

Some new panels will open below the Background Settings panel.

Products Feed Slider Layout

Use this panel to set the layout for your slider.

products-feed-slider-layout

Slider Layout

You can choose from four possible layouts:

  • Image Left | Content Right: This will displayed the featured image on the left side of the slide and the content on the right
  • Image Right | Content Left: This will displayed the featured image on the right side of the slide and the content on the left
  • Image Full Width | Content Left: This will display the featured image at the full width of the slide and place the content on top to the left
  • Image Full Width | Content Right: This will display the featured image at the full width of the slide and place the content on top to the right

Caption Design

Your content, e.g. product title, description and price, will appear as a caption with the featured product image. Choose from:

  • Standard: The content will appear with no background color
  • Panel (third): The content will appear at 33% of the slide width with the option to include a background color
  • Panel (half): The content will appear at 50% of the slide width with the option to include a background color

Panel Background

An optional color for the caption panel.

Products Feed Slider Content

This panel allows you to select what products to display in the slider.

products-feed-slider-content

Number of Products

Select how many products to display in your slider

Category

Optionally select which categories to display products from.

Featured Products

Check this if you only want to include featured products in your slider.

On Sale Products

Check this to only include products that are on sale.

Order By

Choose how to order your products from:

  • Date
  • Menu Order
  • Price
  • Sales
  • Title

Order

Choose either ASC or DESC.

Products Feed Slide Content

In this panel, you can refine which content will appear on each slide. There are checkboxes to enable or disable product title, ratings, description, price and add to cart button.

There are some additional settings to give you greater flexibility in how your slider works:

Use Alt Product Image as Background Image

When you install Super Hero Slider Pro, the plugin automatically adds a new field to your product edit screen between the Product Image and Product Gallery panels.

slider-image

You can upload an image here that won’t display in your product page but that is available for your slider. If you prefer to use the alt image in your slider, just check the ‘Use Alt Product Image as Background Image’ option.

Embed Featured Image in Product Description

In conjunction with the setting above, you can choose to include the product’s featured image as part of the slide content. By checking both these options and including an alt image, you can create slides like this:

products-slider-embedded-feature-image

Caption Color

Change the text color in your content.

Products Feed Animations

Use this panel to set animations for the three captions in your content.

products-feed-animations

The captions work like this:

  • Caption 1: Product Title, Ratings and Featured Image
  • Caption 2: Description
  • Caption 3: Price and Add to Cart Button

Products Feed Advanced Settings

This panel includes some additional options.

products-feed-advanced-settings

  • Slider Max Height: if you decide that you’d like to set a maximum height for your slider, enter the value in pixels here
  • Constrain Main Image Width: this will ensure that the width of your main image is set to 100%. If you leave this deselected, the image will potentially be cropped to fit the slide’s dimensions
  • Center Main Image: if the ‘Constrain Main Image Width’ setting is deselected, you can opt to center your image within the slide
  • Embedded Feature Image Max Height: if you have selected to embed the featured image in the slide content, you can set a maximum height for that image here
  • Mobile Breakpoint: there are some layouts which might change for smaller screens. You can change the breakpoint here