WooCommerce Product Carousel widget is one of the most useful carousel slider for Elementor. This WooCommerce plugin can display your products in a refined layout that attracts people easily.
Let’s see how it works.
How to insert woocommerce carousel:
Open up your Elemenetor dashboard with the desired page to place the woocommerce carousel. Find or type the WC Carousel on the search bar to quickly find the widget. Just drag and drop the widget on your required place on your page to get started with this product slider for WooCommerce.
Content
Layout
1. Columns: Set how many columns will be displayed, from 1 to 6
2. Columns Gap: Set the column gap between each other.
3. Text Align: Set the alignment of the content in the widget as left, center or right
4. Image Size: Select the size of the image
5. Show Badge: Select to show or hide the badge
6. Title: Select to show or hide the title
7. Rating: Select to show or hide the rating
8. Price: Select to show or hide the price
9. Add to Cart Button: Select to show or hide the add to cart button.
Query
1. Source: Select the source from which the widget will display the content. Options include showing all posts and manual selection. Depending upon which source you’ve chosen for the query, you’ll be given options that allow you to filter the results.
2. Exclusive Products: Write product id here, if you want to exclude multiple products so use the comma as the separator. Such as 1, 2
3. Product Limit: Type the product limit you can show.
4. Show Product: Choose to show all products, on sales or featured products.
5. Hide Free: Choose to yes or no the free products.
6. Hide Out of Stock: Choose to yes or no the hide out of stock.
7. Order by: Set the order in which the posts will be displayed. Options include: Date, Price, Sales or Random
8. Order: Set the order in which the posts will be displayed. Options include: Ascending or Descending
Carousel Settings
1. Autoplay: YES to have the carousel slide automatically
2. Autoplay Speed: Set the speed at which the carousel will slide, in milliseconds
3. Pause on Hover: Choose to yes or no the pause on hover
4. Observer: Choose to yes or no the observer
5. Loop: Set to YES to have the carousel continue sliding
6. Animation Speed: Set the animation speed at which the WooCommerce product carousel will slide, in milliseconds
Navigation
1. Navigation: Choose to Arrows and Dots, Arrows, Dots or none the navigation.
2. Arrows Position: Choose to Top Left, Top Center, Top Right, Center, Bottom Left, Bottom Center or Bottom Right the arrows position.
3. Hide Arrows on Moible: Choose to yes or no the hide arrows on mobile device.
Style
Item
Normal
1. Background: Choose the background color of the item
2. Border Type: choose to border type None, Solid, Double, Dotted, Dashed or Groove the border type.
3. Border Radius: Set the border radius to control corner roundness
4. Box shadow: Set the box shadow
5. Item Padding: Set the padding within the border of each item
6. Description Padding: Set the padding within the border of item description
Hover
1. Background: Choose the on hover background color of the item
2. Box shadow: Set the on hover box shadow of the item
3. Match Padding: You have to add padding for matching overlaping hover shadow of the carousel slider
Badge
1. Background: Choose the background color of the badge
2. Text Color: Choose the text color of the badge
3. Border Type: choose to border type None, Solid, Double, Dotted, Dashed or Groove the border type.
4. Radius: Set the border radius to control corner roundness
5. Padding: Set the padding within the border of badge
6. Margin: Set the margin out side the badge
7. Typography: Change the typography options for the text
Title
1. Color: Choose the title color
2. Margin: Set the margin outsite the title
3. Typography: Change the typography options for the title for the WooCommerce plugin
Price
1. Old Price Color: Choose the old price color
2. Old Price Margin: Set mirgin of the old price
3. Typography: Change the typography options for the old price
4. New Price Color: Choose the new price color
5. New Price Margin: Set mirgin of the new price
6. Typography: Change the typography options for the new price for the WooCommerce product carousel slider
Rating
1. Color: Choose the rating color
2. Active Color: Choose the rating active color
3. Margin: Set margin the rating
Add to Cart Button
1. Color: Choose the button color
2. Background: Choose the background color of the add to cart button
3. Box shadow: Set the box shadow of the button
4. Border Type: choose to border type None, Solid, Double, Dotted, Dashed or Groove the border type.
5. Border Radius: Set the border radius to control corner roundness
6. Padding: Set the padding within the border of button
7. Typography: Change the typography options for the button of the WooCommerce product carousel slider
On Hover
1. Background: Choose the background color of the on hover button
2. Color: Choose the button on hover color
Navigation
1. Arrows Size: Adjust the size of the arrrows
2. Backgound Color: Choose the background color of the arrows
3. Hover Backgound Color: Choose the hover background color of the arrows
4. Arrows Color: Choose the color of the arrows
5. Arrows Hover Color: Choose the on hover color of the arrows
6. Padding: Set the padding within the arrows
7. Border Radius: Set the border radius to control corner roundness
8. Horizontal Offset: Adjust the horizontal offset of the arrrows for the WooCommerce product carousel
Advanced
You may need to add some padding, margin or may you need to add some effect there. You can use the advanced panel to do that. Also, z-index,putting the css class or ID is included here. Motion effect gives you the freedom to make it more interative. You can give hover effect to the widget from here. Box shadow, widget border and border-radius option consist here too.
Just check the options to make sure you are familiar with it for the WooCommerce product carousel slider. If you feel any challenges regarding this widget, feel free to contact us via our support system.
