Woo Featured Products Slider Element

09/08/2019

The Woo Featured Products Slider Element is a great way for you to showcase your WooCommerce products. It’s very similar to the Woo Carousel Element, only with this Element it’s automatically using your featured products for the content. 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!

IMPORTANT NOTE: To set a product as ‘Featured’, navigate to the ‘Products’ tab on your WP Admin Sidebar and click the ‘Star’ icon.

How to Use the Woo Featured Products Slider Element

To use the Woo Featured Products Slider Element, please follow the simple steps below.

Step 1 – Navigate to the Products section of your WordPress admin. Look for the Featured column, that is the one with the star icon (see screenshot below).

Step 2 – Click the star icon next to all products that you want to be featured. You need to do this one product at a time, as the page will refresh each time. Doing this makes the product a featured product.

Step 3 – Next, go to the page you want the featured products to appear.

Step 4 – Click on the Woo Featured Products Slider Element via the Fusion Builder, and select your preferred options.

Step 5 – Click Save. Your featured products will now appear in a slider on your page.

WooCommerce Starred Products

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.

  • 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.

  • 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 Featured Products Slider Element.

Woo Featured Products Slider 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.
        • 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.
        • show_nav – 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.