WooCommerce Product Carousel Element

12/03/2019

The Woo Product Carousel Element is a great way for you to showcase your WooCommerce products. You have the option to show only one category, a combination of them, or to show all of them. You can also choose to show or hide information such as category, price and buttons. Read below to discover more about this awesome eCommerce Element!

View the Woo Product Carousel Element in Action!

How To Use The Woo Shortcodes Element

Adding a WooCommerce carousel is now made easy with the Fusion Builder Woo Product Carousel Element.

Step 1 – Create a new page or post, or edit an existing one.

Step 2 - Select the container and column you would like to place the shortcodes.

Step 3 - Click on the + Element button at the bottom of the column. Select or search for Woo Product Carousel.

Step 4 - Now you have the options window open. Here you configure the product carousel, by selecting options. The Picture Size is the first option, and the best choice here will depend on both your design wishes and the sizes of your product images. Try both to see what the differences are. The other main options are to choose the category, or categories, you wish to display in the carousel, and the number of products you want to display.

Step 5 - There are also a range of other minor options, to do with layout and spacing etc. Go through each on of these to make your choices.

Step 6 – Once you have configured your carousel, click Save.

Step 8 - If you preview your page, you will see the result of the Woo Product Carousel Element, and you can always return to edit the element to change the way it displays.

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.

  • Picture Size - Choose the picture size for the carousel. Fixed = width and height will be fixed. Auto = width and height will adjust to the image.
  • Categories - Select a category, multiple categories or leave blank for all.
  • Number of Products - Select the number of products to display.
  • Carousel Layout - Choose to show titles on rollover image, or below image.
  • Carousel Autoplay - Choose whether or not to autoplay the carousel.
  • Maximum Columns - Select the number of max columns to display. From 1 - 6.
  • Column Spacing - Insert the amount of spacing between items without 'px'. ex: 13.
  • Scroll Items - Insert the number of items to scroll. Leave empty to scroll the number of visible items.
  • Show Navigation - Choose whether or not to show navigation buttons on the carousel.
  • Mouse Scroll - Choose to enable mouse drag control on the carousel. IMPORTANT: For easy draggability, when mouse scroll is activated, links will be disabled.
  • Show Categories - Choose to show or hide the categories.
  • Show Price - Choose to show or hide the price.
  • Show Buttons - Choose to show or hide the icon buttons.
  • Additional API Parameter - Use additional API parameter, for example &rel=0 to disable related videos.
  • Element Visibility - Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
  • CSS Class - Add a class to the wrapping HTML element.
  • CSS ID - Add an ID to the wrapping HTML element.
View The Options Screen

Global Options

There are no Global Options for the Woo Product Carousel Element.

Woo Product Carousel Element Parameters

Copy to Clipboard
        • picture_size - Choose from fixed, or auto. Choose fixed to use the width and height of the container, or choose auto to use the image’s original resolution.
        • cat_slug - The slug name of the WooCommerce category to display. Use a comma for multiple categories.
        • number_posts - Accepts a numerical value. For example, 7. Sets how many products to display.
        • carousel_layout – Choose from title_on_rollover, or title_below_image. Sets the carousel's layout.
        • autoplay – Choose from yes, or no. This will enable or disable autoplay.
        • columns – Choose from 1 - 6. Sets the maximum number of columns to display.
        • column_spacing – Accepts a numerical value. For example, 35. Sets the space between columns.
        • scroll_items – Accepts a numerical value. For example, 35. Set the amount of items to scroll. Leave empty to scroll though the number of visible items.
        • navigation – Choose from yes, or no. This will show or hide the navigation buttons.
        • mouse_scroll – Choose from yes, or no. Enable or disable mouse drag control.
        • show_cats - Choose from yes, or no. This will show or hide the categories.
        • show_price - Choose from yes, or no. This will show or hide the rollover price.
        • show_buttons - Choose from yes, or no. This will show or hide the rollover buttons.
        • hide_on_mobile - Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
        • class - Add a custom class to the wrapping HTML element for further css customization.
        • id - Add a custom id to the wrapping HTML element for further css customization.