---
title: EB Woo Product Carousel
description: Here is how to use EB Woo Product Carousel on any WooCommerce website to  beautifully display your products.
url: "https://essential-blocks.com/docs/eb-woo-product-carousel/"
updated: "2026-09-28"
category: WooCommerce
tags:
  - WooCommerce
  - WordPress
---

# EB Woo Product Carousel

**[EB Woo Product Carousel](https://essential-blocks.com/demo/woo-product-carousel/)** is a powerful block available in the Essential Blocks plugin that allows you to showcase your WooCommerce products in a seamless and visually appealing way. With this block, you can easily display your products and customize the styling to suit your brand's aesthetic. The EB Woo Product Carousel is the perfect solution for those looking to highlight their products and drive more sales

Follow the step-by-step guidelines to add **Essential Blocks Woo Product Carousel** using Gutenberg.

***Note:****Before starting with the EB Woo Product Carousel, you have to*[***install & activate the WooCommerce plugin***](https://woocommerce.com/document/installing-uninstalling-woocommerce/)*on your WordPress dashboard. After that*[***add & save any product***](https://woocommerce.com/document/managing-products/#:~:text=Go%20to%20WooCommerce%20%3E%20Products%20%3E%20Add,virtual%20(service)%20if%20applicable.)*on your site easily. *

## **How To Activate EB Woo Product Carousel?**

To activate **EB Woo Product Carousel**, navigate to **‘Essential Blocks → ‘Blocks’**. Then, toggle to enable this **‘Woo Product Carousel’**block. 

Note: As the Essential Blocks Woo Product Carousel is a premium block, you will need to **[install and activate Essential Blocks PRO](https://essential-blocks.com/docs/install-activate-essential-blocks-pro/)** on your website along with the free version.

![EB WOO PRODUCT CAROUSEL](https://essential-blocks.com/wp-content/uploads/2023/05/1.gif)

## **How To Configure EB Woo Product Carousel In Gutenberg?**

First, navigate to the WordPress dashboard **‘Page’** → ‘Add New’ and create a new one or select the page if you already have a created one where you want to add a Woo Product Carousel in Gutenberg.

To add the [**Essential Blocks**](https://essential-blocks.com/#) element, click on the**‘+’**icon. Find ‘Woo Product Carousel’ from the search bar. Simply click on the block and it will be added. Or you can simply drag and drop the block to the desired location.

![EB WOO PRODUCT CAROUSEL](https://essential-blocks.com/wp-content/uploads/2024/04/image-36-1024x481.png)

After you have inserted the block, You will get two options: **‘Choose’** or **‘Start blank’**. Select **‘Start blank**and a default layout will appear on the page. 

![EB WOO PRODUCT CAROUSEL](https://essential-blocks.com/wp-content/uploads/2024/04/image-45-1024x463.gif)

On the other hand, select **‘Choose’** to access the Product Carousel Templates. You will get **4 premade presets**to the product carousel. Pick the one that matches with your preferences.

![EB Woo Product Carousel](https://essential-blocks.com/wp-content/uploads/2023/05/image-142.gif)

Now, click on the settings icon. A right-side panel will appear on your Gutenberg editor. From here, you can configure and customize the contents and appearance of the EB Woo Product Carousel.

![EB WOO PRODUCT CAROUSEL](https://essential-blocks.com/wp-content/uploads/2026/09/gdocs-581d28f360.gif)

### **General**

Under the **‘General’** tab you’ll find five different options: **Carousel, Layout, Product Query, Button, Sale Badge,** and **Advanced**. From all of these options, you can configure each and every part of your EB Woo Product Carousel.

In the **‘Carousel’**section, you can toggle the **‘Show Arrows’**and **‘Dots’** to be displayed on your carousel. Additionally, you can choose whether to enable the infinite loop and ensure all products have similar heights by respectively enabling **‘Infinite’** and**‘Equal Height’** for your EB Woo Product carousel. You also have the option to enable **‘Pause on Hover’** and **‘Autoplay’** and much more.

![EB WOO PRODUCT CAROUSEL](https://essential-blocks.com/wp-content/uploads/2026/09/gdocs-6f81c04aba.gif)

In the **‘Layout’**section, there are four different design presets available for the EB Woo Product Carousel, which you can choose from the **‘Preset’**drop-down to determine the design style of your choice. In addition, you can select the image sizes from the**‘Image Size’**drop-down. You also have the ability to turn on the **‘Show Rating’, ‘Show Price’,**and**‘Show Sale Badge’** options as per your preference.

![EB WOO PRODUCT CAROUSEL](https://essential-blocks.com/wp-content/uploads/2026/09/gdocs-6a739d3c89.gif)

From the **‘Product Query’**section, you can configure in which order you want to decide your products from the **‘Order By’** drop-down with options –**‘Product ID’, ‘Product Title’, ‘Product Slug’, ‘Price’, ‘Popular’, ‘Rating’,**and **‘Date’.** Then you can also choose whether to show them in **‘Ascending Order’,**or**‘Descending Order’**from the **‘Order’**drop-down.

![EB Woo Product Carousel](https://essential-blocks.com/wp-content/uploads/2023/05/image-143.gif)

Using the **‘Offset’**field in your EB Woo Product Carousel, you can choose which product to display first, as it allows you to hide a certain number of products from the beginning. 

The **‘Product Categories’** and **‘Product Tags’** fields can be configured to display products from a specific category or tag in your EB Woo Product Carousel. 

![EB Woo Product Carousel](https://essential-blocks.com/wp-content/uploads/2023/05/image-144.gif)

However, you can include or exclude your product tags as per your preference. Also you can set the products per page in ascending or descending order, along with the categories to include or exclude.

![EB Woo Product Carousel](https://essential-blocks.com/wp-content/uploads/2023/05/image-145.gif)

From the **‘Button’** option, configure your button text directly to provide a clear call-to-action for your customers. 

You can set your product status where you would like to include or exclude a particular product in the carousel following the individual product tags or categories.

![EB Woo Product Carousel](https://essential-blocks.com/wp-content/uploads/2023/05/image-146.gif)

Sale Badge contents can be changed from the ‘**Sale Badge**’ option. Now, configure the alignment and text to be displayed on the sale badge of your EB Woo Product Carousel.

![EB WOO PRODUCT CAROUSEL](https://essential-blocks.com/wp-content/uploads/2023/05/9.gif)

If you require further configuration for your EB Woo Product Carousel, you can add additional CSS information from the **‘Advanced’**section. Make sure to separate multiple classes with spaces.

![EB WOO PRODUCT CAROUSEL](https://essential-blocks.com/wp-content/uploads/2023/05/10.png)

### **Style**

To access the **'Style'** tab, switch to the panel on the right-hand side, where you can customize the appearance of all the elements in your EB Woo Product Carousel. There are multiple options under the Style Tab. Let’s take a look at them.

![EB WOO PRODUCT CAROUSEL](https://essential-blocks.com/wp-content/uploads/2023/05/11.png)

From the **‘Products’**section, you can change the ‘**Background Color’, ‘Padding’**, and**‘Margin’**for the Product cards of your EB Woo Product Carousel. You can also adjust the**'Border Style', 'Border Radius',**and **'Box Shadow'** properties for the Product Cards of your EB Post Carousel in both the**'Normal'** and**'Hover'**states**.**

![EB WOO PRODUCT CAROUSEL](https://essential-blocks.com/wp-content/uploads/2023/05/12.gif)

From the **‘Content’** option make changes to the structure of your Woo Product Carousel. Modify the**'Content Alignment', 'Content Background Color', 'Padding',** and **'Slides Gap'** from there.

![EB WOO PRODUCT CAROUSEL](https://essential-blocks.com/wp-content/uploads/2023/05/13.gif)

In addition, you have the ability to define the**'Border Style', 'Border Radius',**and **'Box Shadow'** for the content section of every Product Card in your EB Woo Product Carousel, for both the **'Normal'**and **'Hover'** states.

![EB WOO PRODUCT CAROUSEL](https://essential-blocks.com/wp-content/uploads/2023/05/14.gif)

From the **‘Image’** section, you can modify the width of your product images. You have the option to enable the **'Auto Height'**feature, which automatically adjusts the height of the product. Alternatively, you can manually adjust the product height by selecting one of the predefined options from the **‘Object Fit’** drop-down, which is visible only when the**'Auto Height'**toggle is disabled.

![EB WOO PRODUCT CAROUSEL](https://essential-blocks.com/wp-content/uploads/2023/05/15.gif)

Now**,**style the**‘Image Wrapper Background’**and**‘Image Overlay Color’**from there. You can also set the**'Border Style', 'Border Radius',**and **'Box Shadow'** for the product images displayed in your EB Post Carousel, for both the **'Normal'**and **'Hover'** states.

![EB WOO PRODUCT CAROUSEL](https://essential-blocks.com/wp-content/uploads/2023/05/16.gif)

The **‘Product Title’**and **‘Product Price’** options offer you to customize the product title and price text. You can style their **‘Typography’, ‘Color’, ‘Hover Color’, ‘Space’,**and much more from these options. 

![EB WOO PRODUCT CAROUSEL
](https://essential-blocks.com/wp-content/uploads/2023/05/17.gif)

Customize your product rating from the **‘Product Rating’**section. From here you can adjust the  **‘Color’, ‘Icon sizer’,**and **‘Space’**of the ratings.

![EB WOO PRODUCT CAROUSEL
](https://essential-blocks.com/wp-content/uploads/2023/05/18-2.gif)

Style the Add To Cart **Button**from the ‘**’Burron’**section. Customize its **‘Typography’, ‘Text Color’, ‘Text Hover Color’, ‘Background Color’, ‘Background Hover Color’,** and **‘Space’**. You can also customize the**'Border Style', 'Border Radius',**and **'Box Shadow'** for the Add to Cart Buttons of your EB Post Carousel, for both the **'Normal'**and **'Hover'** states.

![EB WOO PRODUCT CAROUSEL](https://essential-blocks.com/wp-content/uploads/2023/05/19-1.gif)

Customize your sale badge from the **‘Sale Badge Style’**option. You can set the**‘Typography’, ‘Sale Text Color’,**and **‘Sale Text Background Color’**from there**.**Also, adjust the Sale Badge’s**‘Border color’, ‘Border Radius’,** and**‘Border Width’**as needed.

![EB WOO PRODUCT CAROUSEL](https://essential-blocks.com/wp-content/uploads/2023/05/20-1.gif)

From the**‘Arrow’**section, set your Arrow’s**‘Color’** and **‘Background Color’**both for**‘Normal’**and **‘Hover’** situations. Also set the**‘Arrow Size’, ‘Background Position’**, and **‘Arrow Position’**.

![EB WOO PRODUCT CAROUSEL](https://essential-blocks.com/wp-content/uploads/2023/05/21-1.gif)

Style the Dots of your EB Woo Product Carousel from the **‘Dot’** section. Customize the dot **‘Color’, ‘Active Color’, ‘Dot Size’,** and **‘Dots Gap’**from here.

![EB WOO PRODUCT CAROUSEL](https://essential-blocks.com/wp-content/uploads/2023/05/22.gif)

You can add further styling for your EB Woo Product Carousel from the **‘Advanced’**section. Add additional CSS class(es) in the input field to make necessary changes. 

![EB WOO PRODUCT CAROUSEL](https://essential-blocks.com/wp-content/uploads/2023/05/23-1.png)

### **Advanced**

The **'Advanced'** tab offers a range of options to enhance the interactivity and visual appeal of the tabs. You can modify various design aspects such as**‘Margin’, ‘Padding’, ‘Background Color’, ‘Background Image’, ‘Border Style’,  ‘Box Shadow’**, and more. The tab provides multiple customization options for advanced block design.

![EB WOO PRODUCT CAROUSEL](https://essential-blocks.com/wp-content/uploads/2023/05/24.gif)

## **Final Outcome**

By following the simple and easy steps, you can add the EB Woo Product Carousel block and style it in Gutenberg.

         [![Family Size Pizza](https://essential-blocks.com/wp-content/uploads/2024/01/Frame-4273231143-1.png)](https://essential-blocks.com/product/family-size-pizza-2/) sale

### [Family Size Pizza](https://essential-blocks.com/product/family-size-pizza-2/)

     [Add to cart](/docs/eb-woo-product-carousel/?add-to-cart=13930)           [![Family Size Pizza](https://essential-blocks.com/wp-content/uploads/2024/01/Frame-427323114.png)](https://essential-blocks.com/product/family-size-pizza/) sale

### [Family Size Pizza](https://essential-blocks.com/product/family-size-pizza/)

     [Add to cart](/docs/eb-woo-product-carousel/?add-to-cart=13929)           [![Merienda Burger](https://essential-blocks.com/wp-content/uploads/2024/01/Frame-427323112.png)](https://essential-blocks.com/product/merienda-burger/) sale

### [Merienda Burger](https://essential-blocks.com/product/merienda-burger/)

     [Add to cart](/docs/eb-woo-product-carousel/?add-to-cart=13925)           [![Logitech Master Mx3](https://essential-blocks.com/wp-content/uploads/2023/05/mouse2.png)](https://essential-blocks.com/product/logitech-master-mx3/) sale

### [Logitech Master Mx3](https://essential-blocks.com/product/logitech-master-mx3/)

     [Add to cart](/docs/eb-woo-product-carousel/?add-to-cart=9806)

Here’s how you can easily set up and design the EB Woo Product Carousel in Gutenberg.
Got stuck? Feel free to [**contact our support**](https://wpdeveloper.com/support/) for further assistance.