Widgets: WooCommerce

Control the colors and layout for WooCommerce Breadcrumbs

Style

Text Color: Choose the color of the Breadcrumbs text

Link Color: Choose the color of the Breadcrumbs link text

Typography: Set the typography options for the Breadcrumbs text

Alignment: Align the breadcrumbs to the left, right, or center

Note: The style of this widget is often affected by your theme and plugins. If you experience any such issue, try to switch to a basic theme and deactivate related plugins, or adjust the styling within your theme’s settings.

Control the product Data Tabs style in the WooCommerce Single template

Style

Tabs

Normal | Active

The following options can be set independently for both the normal and active states.

1. Text Color: Choose the color of the Tabs text
2. Background Color: Choose the background color of the Tabs text
3. Border Color: Choose the border color of the Tab

1. Typography: Set the typography options for the Tabs text
2. Border Radius: Set the border radius to control corner roundness

Panel

1. Text Color: Choose the color of the Panel text
2. Typography: Set the typography options for the Panel text

Heading

1. Text Color: Choose the color of the Heading text
2. Typography: Set the typography options for the Heading text

1. Border Width: Control the thickness of the Panel border
2. Border Radius: Set the border radius to control corner roundness of the panel
3. Box Shadow: Adjust box shadow options

Note: The style of this widget is often affected by your theme and plugins. If you experience any such issue, try to switch to a basic theme and deactivate related plugins, or adjust the styling within your theme’s settings.

Display a WooCommerce Page (Cart Page, Single Product Page, Checkout Page, Order Tracking Form, or My Account Page) anywhere on your site.

Content

Element

Page: Select a WooCommerce page to display, choosing from Cart Page, Single Product Page, Checkout Page, Order Tracking Form, or My Account Page. If “Single Product Page” is selected, an additional field becomes available to allow you to search and select a particular page to display.

Add Additional Information to your product display on WooCommerce Single template

Style

General

1. Heading: Show or Hide
2. Color: Choose the color of the Heading
3. Typography: Change the typography options for the Heading

1. Color: Choose the color of the Additional Information text
2. Typography: Change the typography options for the Additional Information text

Display products on any page of your site, setting their content and style with the WooCommerce Products widget

Content

Products

1. Columns: Set the exact number of columns to display, from 1 to 12
2. Rows: Set the maximum number of rows to display
3. Pagination: Select Yes to show Pagination or No to hide it
4. Allow Order: Select Yes to give users the option to sort the products by Default, Popularity, Rating, Latest, Price: Low to High, or Price: High to Low
5. Show Result Count: Select Yes to show number of results for this archive, or No to hide it

Query

Source: Select source of results, choosing from Current Query, Latest Products, Sale, Featured, or Manual Selection. Depending upon which source you’ve chosen for the query, you’ll be given options which allow you to filter the results.

Include

1. Include By: Term, then use Search and Select to choose which ones to use
2. Order By: Set the order in which the products will be displayed. Options include: Title, Price, Popularity, Rating, Random, and Menu Order.
3. Order: DESC (descending) or ASC (ascending)

Note: Choosing Related as the  Source and Category as the Include By term will display posts related to the category assigned to the current post being displayed. So if the user is viewing a post in the Travel category, for example, the page will show Related posts which are also in the Travel category. If the post currently displayed has multiple categories assigned to it, the Related posts will pull posts from the FIRST category (alphabetically) assigned to the post.

Exclude

1. Exclude By: Current Post, Manual Selection, Term, then use Search and Select for Manual, or Term choices
2. Order By: Set the order in which the posts will be displayed. Options include: Title, Price, Popularity, Rating, Random, and Menu Order.
3. Order: DESC (descending) or ASC (ascending)

Style

Products

1. Columns Gap: Set the exact gap between the columns
2. Rows Gap: Set the exact gap between the rows
3. Alignment: Align the products data to the left, right, or center

Image

1. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
2. Border Radius: Set the radius to control corner roundness of the border
3. Spacing: Adjust the amount of space between the images and their data

Title

1. Color: Choose the product Title color
2. Typography: Set the typography options for the Title text
3. Spacing: Adjust the amount of space after the Title

Rating

1. Star Color: Choose the color of a filled star
2. Empty Star Color: Choose the color of an empty star
3. Star Size: Set the size of stars
4. Spacing: Adjust the amount of space after the Rating Stars

Price

1. Color: Choose the color of the product Price
2. Typography: Set the typography options for the product Price

Regular price

1. Color: Choose the color of the product’s Regular Price
2. Typography: Set the typography options for the product’s Regular Price

Button

Normal | Hover

The following options can be set independently for both the normal and hover states.

1. Text Color: Choose the color of the product’s Button Text
2. Background Color: Choose the background color of the product’s Button
3. Border Color: Choose the border color of the product’s Button

1. Typography: Set the typography options for the product’s Button Text
2. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
3. Border Radius: Control corner roundness of the button’s border
4. Text Padding: Set the padding within the button
5. Spacing: Adjust the amount of space above the buttons

View Cart

1. Color: Choose the color of the View Cart text under the buttons
2. Typography: Set the typography options for the View Cart text

Box

1. Border Width: Control the thickness of the border around the product’s box
2. Border Radius: Control corner roundness of the products box
3. Padding: Change the padding within the products box

Normal | Hover

The following options can be set independently for both the normal and hover states.

1. Box Shadow: Adjust box shadow options
2. Background Color: Choose the background color of the products box
3. Border Color: Choose the border color of the products box

Sale Flash

1. Sale Flash: Show or Hide
2. Text Color: Choose the color of the Sale Flash text
3. Background Color: Choose the background color of the Sale Flash
4. Typography: Set the typography options for the Sale Flash text
5. Border Radius: Control the corner roundness of the Sale Flash
6. Width: Control the thickness of the border for the Sale Flash
7. Height: Set the height of the Sale Flash
8. Position: Set the position of the Sale Flash, Left or Right, of the products box
9. Distance: Set the distance of the Sale Flash from the top of the products box

Note: The style of this widget is often affected by your theme and plugins. If you experience any such issue, try to switch to a basic theme and deactivate related plugins, or adjust the styling within your theme’s settings.

Set the image or gallery you wish to display for WooCommerce Products in the WooCommerce Single template

Style

1. Sale Flash: Show or Hide the Sale Flash
2. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
3. Width: Control the thickness of the border around the main image
4. Color: Choose a color for the border
5. Border Radius: Set the border radius to control corner roundness
6. Spacing: Adjust the amount of space between the main image and thumbnails

Thumbnails

1. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
2. Width: Control the thickness of the border around the thumbnails
3. Color: Choose a color for the border
4. Border Radius: Set the border radius to control corner roundness
5. Spacing: Adjust the amount of space between each thumbnail

Note: The style of this widget is often affected by your theme and plugins. If you experience any such issue, try to switch to a basic theme and deactivate related plugins, or adjust the styling within your theme’s settings.

Display a grid of WooCommerce Product Categories anywhere on your site.

Content

Layout

1. Columns: Set the exact number of columns to display, from 1 to 12
2. Categories Count: Select the number of categories to display

Query

1. Source: Select the source from which to display categories, choosing from All, Manual Selection, By Parent, or Current Subcategories. If Manual Selection is chosen, manually select which categories to display. If “By Parent” is chosen, select from Only Top Level, or select an individual category from the dropdown list.
2. Hide Empty: Set to Yes to categories with no products within them
3. Order By: Set the order in which the categories will be displayed. Options include Name, Slug, Description, or Count
4. Order: Select to display categories in ASC or DESC (Ascending or Descending) order

Style

1. Columns Gap: Set the exact gap between the columns
2. Rows Gap: Set the exact gap between the rows
3. Alignment: Align the products data to the left, right, or center

Image

1. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
2. Border Radius: Set the radius to control corner roundness of the border
3. Spacing: Adjust the amount of space between the images and their data

Title

1. Color: Choose the Title color
2. Typography: Set the typography options for the Title text

Count

1. Color: Choose the color for the Count
2. Typography: Set typography options for the Count

Note: The style of this widget is often affected by your theme and plugins. If you experience any such issue, try to switch to a basic theme and deactivate related plugins, or adjust the styling within your theme’s settings.

Set the style and position of the Product Price in the WooCommerce Single template

Style

1. Alignment: Align the Price to the left, right, or center
2. Color: Choose the color of the Price’s text
3. Typography: Change the typography options for the Price

Sale Price

1. Color: Choose the color of the Sales Price text
2. Typography: Change the typography options for the Sales Price
3. Stacked: Select Yes to place the Sales Price under the Price or No to place the Sales Price next to the Price
4. Spacing: Adjust the amount of space between the Price and the Sales Price

Note: The style of this widget is often affected by your theme and plugins. If you experience any such issue, try to switch to a basic theme and deactivate related plugins, or adjust the styling within your theme’s settings.

Add an Add to Cart button to a specific product anywhere on your site.

Content

Product

1. Product: Select the product to be added to the cart
2. Show Quantity: Set to Yes to allow the user to change the quantity
3. Quantity: If Show Quantity is set to No, this option becomes available so that you can predetermine the number of items to add to the cart

Button

1. Type: Select the type of button to use, choosing from Default, Info, Success, Warning, and Danger
2. Text: Enter the text to be displayed on the button
3. Alignment: Align the [widget] to the left, right, center, or justified
4. Size: Select the preset button sizes, from Extra Small to Extra Large
5. Icon: Select a Font Awesome icon to display on the button
6. Icon Position: Choose to display the Icon Before or After the button text
7. Icon Spacing: Set the amount of space between the Icon and the button text
8. Button ID: (Optional) Assign a unique button ID to use for situations such as Google Analytic’s events

Style

Button

1. Typography: Set the typography options for the button text

Normal | Hover

The following options can be set independently for both the normal and hover states.

1. Text Color: Choose the color of the button text
2. Background Color: Choose the background color of the button
3. Hover Animation: Choose an animation effect when hovering over the icon, such as Grow, Pulse, Skew, etc.

1. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
2. Border Radius: Control border roundness of the button
3. Box Shadow: Adjust box shadow options
4. Padding: Set the padding within the button

Set the style and layout of the WooCommerce Archive Products

Content

Content

1. Allow Order: Select Yes to give users the option to sort the products by Default, Popularity, Rating, Latest, Price: Low to High, or Price: High to Low
2. Show Result Count: Select Yes to show number of results for this archive, or No to hide it

Advanced

1. Nothing Found Message: Enter the message to be shown to users when there are no results to display

Style

Products

1. Columns Gap: Set the exact gap between the columns
2. Rows Gap: Set the exact gap between the rows
3. Alignment: Align the products data to the left, right, or center

Image

1. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
2. Border Radius: Set the radius to control corner roundness of the border
3. Spacing: Adjust the amount of space between the images and their data

Title

1. Color: Choose the product Title color
2. Typography: Set the typography options for the Title text
3. Spacing: Adjust the amount of space after the Title

Rating

1. Star Color: Choose the color of a filled star
2. Empty Star Color: Choose the color of an empty star
3. Star Size: Set the size of stars
4. Spacing: Adjust the amount of space after the Rating Stars

Price

1. Color: Choose the color of the product Price
2. Typography: Set the typography options for the product Price

Regular price

1. Color: Choose the color of the product’s Regular Price
2. Typography: Set the typography options for the product’s Regular Price

Button

Normal | Hover

The following options can be set independently for both the normal and hover states.

1. Text Color: Choose the color of the product’s Button Text
2. Background Color: Choose the background color of the product’s Button
3. Border Color: Choose the border color of the product’s Button

1. Typography: Set the typography options for the product’s Button Text
2. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
3. Width: Control the thickness of the border around the product’s Button
4. Border Radius: Control corner roundness of the button’s border
5. Text Padding: Set the padding within the button
6. Spacing: Adjust the amount of space above the buttons

View Cart

1. Color: Choose the color of the View Cart text under the buttons
2. Typography: Set the typography options for the View Cart text

Box

1. Border Width: Control the thickness of the border around the product’s box
2. Border Radius: Control corner roundness of the products box
3. Padding: Change the padding within the products box

Normal | Hover

The following options can be set independently for both the normal and hover states.

1. Box Shadow: Adjust box shadow options
2. Background Color: Choose the background color of the products box
3. Border Color: Choose the border color of the products box

Pagination

1. Spacing: Set the amount of space above the pagination
2. Border: Show or Hide border around pagination
3. Border Color: Choose the color of the pagination border
4. Padding: Set the padding within the pagination

Normal | Hover | Active

The following options can be set independently for the normal, hover, and active states.

1. Typography: Set the typography options for the pagination text
2. Color: Choose the color of the pagination text
3. Background Color: Choose the background color for the pagination

Sale Flash

1. Sale Flash: Show or Hide
2. Text Color: Choose the color of the Sale Flash text
3. Background Color: Choose the background color of the Sale Flash
4. Typography: Set the typography options for the Sale Flash text
5. Border Radius: Control the corner roundness of the Sale Flash
6. Width: Control the thickness of the border for the Sale Flash
7. Height: Set the height of the Sale Flash
8. Position: Set the position of the Sale Flash, Left or Right, of the products box
9. Distance: Set the distance of the Sale Flash from the top of the products box

Nothing Found Message

1. Color: Choose the color of the Nothing Found Message text
2. Typography: Set the typography options for the message text

Note: The style of this widget is often affected by your theme and plugins. If you experience any such issue, try to switch to a basic theme and deactivate related plugins, or adjust the styling within your theme’s settings.

The Media Carousel widget allows you to create a slider of videos and images.

The widget includes 3 skins:

1. Carousel is the standard rotating carousel skin that shows a customized number of image or video slides per view. 
2. Slideshow is a slider skin that displays one primary slide and small image thumbnails below.
3. Coverflow is a slider skin that shows a central slide in the front and two side slides in the back. 

Inside each slide, you can add the image or video, and have it link to its media file or an external link. The carousel can display a mixture of both images and videos at once.
If you have Lightbox enabled, this will also be available for this widget.

The Media Carousel widget also has options for optimal display on mobile devices.

Carousel Skin

Content

Slides

1. Skin: Carousel
2. Slides: Choose the image or video to display and set the URL to link to
3. Effect: Choose how each slide transitions, either Slide, Fade, or Cube
4. Slides Per View: Set number of slides to view at one time, maximum of 10
5. Slides to Scroll: Set number of slides to scroll per swipe, maximum of 10
6. Height: Set the height of the carousel
7. Width: Set the width of the carousel

Additional Options

1. Arrows: Choose to show or hide the navigation arrows
2. Pagination: Select None, Dots, Fraction, or Progress
3. Transition Duration: Set the time it takes for each slide to appear. This time is in milliseconds, so 1000 ms is equal to 1 second.
4. Autoplay: Show or hide
5. Autoplay Speed: Set the time between each slide. This time is in milliseconds, so 1000 ms is equal to 1 second.
6. Infinite Loop: Show carousel in continuous loop, infinitely. Yes or No
7. Pause on Interaction: Select whether or not to pause autoplay when a user interacts with the carousel. Yes or No
8. Overlay: Select overlay type, when user hovers over a slide. None, Text, or Icon
9. Image Size: Select size of image, from Thumbnail to Full, or Custom
10. Image Fit: Select how image fits into its container, either Cover, Contain, or Auto

Slideshow Skin

Content

1. Skin: Slideshow
2. Slides: Choose the image or video to display and set the URL to link to
3. Effect: Choose how each slide transitions, either Slide, Fade, or Cube
4. Height: Set the height of the carousel
5. Thumbnails:
   Slides Per View: Number of slides, per view, maximum of 10
   Ratio: Select from 1:1, 4:3, 16:9, or 21:9

Additional Options

1. Arrows: Choose to show or hide the navigation arrows
2. Transition Duration: Set the time it takes for each slide to appear. This time is in milliseconds, so 1000 ms is equal to 1 second
3. Autoplay: Show or hide
4. Autoplay Speed: Set the time between each slide. This time is in milliseconds, so 1000 ms is equal to 1 second
5. Infinite Loop: Show carousel in continuous loop, infinitely. Yes or No
6. Pause on Interaction: Select whether or not to pause autoplay when a user interacts with the carousel. Yes or No
7. Image Size: Select size of image, from Thumbnail to Full, or Custom
8. Image Fit: Select how image fits into its container, either Cover, Contain, or Auto

Coverflow Skin

Content

1. Skin: Coverflow
2. Slides: Choose the image or video to display and set the URL to link to
3. Slides Per View: Set number of slides to view at one time, maximum of 10
4. Slides to Scroll: Set number of slides to scroll per swipe, maximum of 10
5. Height: Set the height of the carousel
6. Width: Set the width of the carousel

Additional Options

1. Arrows: Choose to show or hide the navigation arrows
2. Pagination: Select None, Dots, Fraction, or Progress
3. Transition Duration: Set the time it takes for each slide to appear. This time is in milliseconds, so 1000 ms is equal to 1 second.
4. Autoplay: Show or hide
5. Autoplay Speed: Set the time between each slide. This time is in milliseconds, so 1000 ms is equal to 1 second.
6. Infinite Loop: Show carousel in continuous loop, infinitely. Yes or No
7. Pause on Interaction: Select whether or not to pause autoplay when a user interacts with the carousel. Yes or No
8. Overlay: None, Text, or Icon
9. If Text is chosen:
   Caption: Choose which text to display as the caption – Title, Caption, or Description
   Animation: Choose from Fade, Slide Up, Slide Down, Slide Right, Slide Left, Zoom In
10. If Icon is chosen:
    Icon: Choose from a search icon, plus icon, eye icon, or link icon
11. Animation: Choose from Fade, Slide Up, Slide Down, Slide Right, Slide Left, Zoom In
12. Image Size: Select size of image, from Thumbnail to Full, or Custom
13. Image Fit: Select how image fits into its container, either Cover, Contain, or Auto

Style

Slides

1. Space Between: Set the space between slides
2. Background Color: Choose a background color for the carousel
3. Border Size: Control the thickness of the border
4. Border Color: Choose a color for the border
5. Padding: Set the padding
6. Border Radius: Set the border radius to control corner roundness

Navigation

Arrows

1. Size: Scale arrow size up or down
2. Color: Choose the color for the arrows

Pagination (not available on Slideshow type)

1. Position: Place pagination outside or inside of slides
2. Size: Scale pagination size up or down
3. Color: Set the color of the pagination

Play Icon (You must have videos in the slides to see it)

1. Color: Set the color of the video play icon
2. Size: Set the size of the video play icon
3. Text Shadow: Set the text shadow of the video play icon

Overlay (not available on Slideshow type)

If Text was chosen for the Overlay:

1. Background Color: Choose a background color for the overlay
2. Text Color: Choose the color of the overlay text
3. Typography: Change the typography options for the overlay text

If Icon was chosen for Overlay:

1. Background Color: Choose a background color for the overlay
2. Text Color: Choose the color of the overlay icon
3. Icon Size: Scale the size of the overlay icon up or down

Lightbox

1. Color: Choose the lightbox background color
2. UI Color: Choose the UI Color. This affects the lightbox arrow and dot navigations and the X closing icon.
3. UI Hover Color: Choose the UI hover color. This affects the lightbox arrow and dot navigations and the X closing icon when the user hovers over each.
4. Video Width: Set the width of the video

Note: Autoplay is affected by Google’s Autoplay policy on Chrome browsers.

Note: Using Elementor template shortcodes within the widget may sometimes work, but it is not a supported feature.

Advanced

Set the Advanced options that are applicable to this widget

The Menu Cart widget enables you to place a WooCommerce cart icon in your menu or anywhere on your page. 

Content

Menu Icon

1. Icon: Select the icon to show, choosing from Cart, Basket, or Bag, in Light, Medium or Solid designs.
2. Items Indicator: Select the type of indicator to use for number of items in the cart, choosing from None, Bubble, or Plain
3. Hide Empty: Slide to YES to hide items indicator if cart is empty
4. Subtotal: Show or Hide the cart’s current subtotal
5. Alignment: Align the menu cart to the left, right, or center

Style

Menu Icon

Normal | Hover

1. Text Color: Choose the color of the subtotal text
2. Icon Color: Choose the color of the cart icon
3. Background Color: Choose the background color of the widget container
4. Border Color: Choose the border color of the widget container
5. Border Width: Control the thickness of the border around the widget container
6. Border Radius: Set the border radius to control corner roundness
7. Typography: Change the typography options for the subtotal text

Icon

1. Size: Adjust the size of the cart icon
2. Spacing: Adjust the amount of space between the cart icon and the subtotal text
3. Padding: Change the padding settings of the widget container

Items Indicator

1. Text Color: Choose the color of the number of items in the items indicator
2. Background Color: Choose the background color of items indicator
3. Distance: Set the distance between the icons indicator and the subtotal text

Note: When the Menu Cart is clicked, a cart overlay slides open. The following options control the design aspects of the cart overlay.

Cart

1. Divider: Show or Hide the divider line after each item in the cart overlay
2. Remove Item Icon: Show or Hide the icon that allows users to remove an item from the cart

Subtotal

1. Color: Choose the color of the subtotal text in the cart overlay
2. Typography: Change the typography options for the subtotal text in the cart overlay

Products

Product Title

1. Color: Choose the color of the product title in the cart overlay
2. Typography: Change the typography options for the product title in the cart overlay

Product Price

1. Color: Choose the color of the product price in the cart overlay
2. Typography: Change the typography options for the product price in the cart overlay

Divider

1. Style: Select the style of the divider above and below the subtotal in the cart overlay, choosing from none, solid, double, dotted, dashed, or grooved
2. Color: Choose the color of the subtotal divider in the cart overlay
3. Weight: Set the thickness of the subtotal divider
4. Spacing: Set the spacing between subtotal dividers and the subtotal text

Buttons

1. Layout: Choose the layout of the buttons in the cart overlay, either Inline or Stacked.
2. Space Between: Set the amount of space between the cart overlay buttons

View Cart

1. Text Color: Choose the color of the Show Cart button text in the cart overlay
2. Background Color: Choose the background color of the Show Cart button in the cart overlay
3. Border Color: Choose the border color of the Show Cart button in the cart overlay
4. Border Width: Control the thickness of the border around the Show Cart button in the cart overlay

Checkout

1. Text Color: Choose the color of the Checkout button text in the cart overlay
2. Background Color: Choose the background color of the Checkout button in the cart overlay
3. Border Color: Choose the border color of the Checkout button in the cart overlay
4. Border Width: Control the thickness of the border around the Checkout button text in the cart overlay
5. Typography: Change the typography options for both buttons in the cart overlay
6. Border Radius: Set the border radius for both buttons in the cart overlay

Mini Cart

To avoid conflicts with WooCommerce plugins or themes that may utilize their own Mini Cart templates, Elementor gives you the option to enable or disable Elementor’s version of the Mini Cart template. If WooCommerce is activated, follow these steps to enable or disable Elementor’s Mini Cart template.

1. Go to Elementor > Settings > Integrations > WooCommerce
2. Choose Enable for this option in order to replace the default WooCommerce mini cart template or your theme’s mini cart template with Elementor’s template. Unless manually set to Disable, this setting is automatically enabled once the Menu Cart widget is used anywhere on your site.
3. Choose Disable to opt out of using Elementor’s Mini Cart template.

Display and control the style of the product Meta Data on WooCommerce Single template

Style

Style

1. View: Choose to display the Product Meta in Table view, Stacked view, or Inline
2. Space Between: Set the amount of space between each Product Meta item
3. Divider: Set to On to place a divider line between each Product Meta item
4. Style: Choose the style of the divider line from Solid, Double, Dotted, or Dashed.
5. Weight: Control the thickness of the divider line
6. Height: Control the height of the divider line
7. Color: Choose the color of the divider line

Text

1. Typography: Set the typography options for the Product Meta text
2. Color: Choose the color of the Product Meta text

Link

1. Typography: Set the typography options for the Product Meta link text
2. Color: Choose the color of the Product Meta link text

Captions

Category

1. Singular: Set the name to use for Singular Category
2. Plural: Set the name to use for Plural Category

Tag

1. Singular: Set the name to use for Singular Tag
2. Plural: Set the name to use for Singular Tag

SKU

1. SKU: Set the name to use for Defined SKU
2. Missing: Set the name to use for Missing SKU

Note: The style of this widget is often affected by your theme and plugins. If you experience any such issue, try to switch to a basic theme and deactivate related plugins, or adjust the styling within your theme’s settings.

Style the Product Content on the WooCommerce Single template

Style

1. Alignment: Align the product content to the left, right, center, or justified
2. Text Color: Choose the color of the product content of the text
3. Typography: Set the typography options for the product content text

Insert an “Add To Cart” button and control the layout and style of the Add to Cart button in the WooCommerce Single template

Style

Button

1. Alignment: Align the title to the left, right, center, or justified
2. Typography: Change the typography options for the Add To Cart button
3. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
4. Border Radius: Set the border radius to control corner roundness
5. Padding: Change the padding settings of the button

Normal | Hover

The following options can be set independently for both the normal and hover states.

1. Text Color: Choose the color of the button’s text
2. Background Color: Choose the background color of the button
3. Border Color: Choose the border color of the button

Quantity

1. Spacing: Adjust the amount of space between the Quantity field and the Button
2. Typography: Change the typography options for the Quantity text
3. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
4. Border Radius: Set the border radius to control corner roundness
5. Padding: Change the padding settings of the Quantity field

Normal | Focus

The following options can be set independently for both the normal and focus states.

1. Text Color: Choose the color of the Quantity’s text
2. Background Color: Choose the background color of the Quantity field
3. Border Color: Choose the border color of the Quantity field

Variations

1. Spacing: Change the amount of space between the variations and the Add To Cart button
2. Space Between: Change the amount of space between each variation

Label

1. Color: Choose the color of the Variations’ Label text
2. Typography: Change the typography options of the Variations’ Label text

Select Field

1. Color: Choose the color of the Variations’ Select field text
2. Background Color: Choose the background color of the Variations’ Select field
3. Border Color: Choose the border color of the Variations’ Select field
4. Typography: Change the typography options of the Variations’ Select field
5. Border Radius: Set the border radius to control corner roundness

Note: The style of this widget is often affected by your theme and plugins. If you experience any such issue, try to switch to a basic theme and deactivate related plugins, or adjust the styling within your theme’s settings.

The Reviews widget displays a sliding carousel of user reviews.

Content

Slides

Items

Shows a list of all the items in the slide. You can drag and drop them to change their order. Click on the Add Item button to add another item to the list.

Tip: Quickly duplicate or delete items by clicking an item’s Duplicate or Delete icon 

1. Image: Upload or choose the reviewer’s image
2. Name: Enter the reviewer’s name
3. Title: Enter the reviewer’s job title
4. Rating: Assign a numerical rating, from 0.0 to 5.0
5. Icon: Choose the type of icon to use, either Font Awesome or Unicode
6. Link: Link the review to a URL
7. Review: Enter the text of the review

1. Slides Per View: Select the number of slides to show at one time, from 1 to 10
2. Slides to Scroll: Select how many slides to scroll per swipe, from 1 to 10
3. Width: Set the width of the carousel, in percentage or pixels

Additional Options:

1. Arrows: Show or hide the navigation arrows
2. Pagination: Select the carousel pagination style, either None, Dots, Fraction, or Progress
3. Transition Duration: Set the time between slide movement, in milliseconds
4. Autoplay: Slide to YES to have the carousel slide automatically
5. Autoplay Speed: Set the speed at which the carousel will slide, in milliseconds
6. Infinite Loop: Set to YES to have the carousel continue sliding, infinitely
7. Pause on Interaction: Set to YES to have the autoplay pause when the carousel is hovered over with a mouse or clicked
8. Image Size: Set the size of the image, from thumbnail to full, or enter a custom size

Style

Slides

1. Space Between: Control the space between review items
2. Background Color: Choose the background color of the review card
3. Border Size: Set the thickness of the border around the review card
4. Border Radius: Set the border radius to control corner roundness
5. Border Color: Choose a color for the border
6. Padding: Set the padding within the border of the review card’s box

Header

1. Background Color: Choose the background color of the review card’s header
2. Gap: Control the space between the Header and the Review text
3. Separator: Choose to show or hide the separator line between the header and the review text
4. Color: Choose the color of the separator line
5. Size: Set the height of the separator line

Text

Name / Title / Review

1. Color: Choose the color of the Name/Title/Review
2. Typography: Change the typography options for the Name/Title/Review

Image

1. Image Size: Adjust the size of the reviewer’s image
2. Image Gap: Control the space between the image and the reviewer’s profile information
3. Border Radius: Set the border radius to control corner roundness

Icon

1. Color: Set the color of the social icon. Choose either the Official Color of the social network, or set a custom color of your choice
2. Size: Adjust the size of the social icon

Rating

1. Icon: Choose the type of icon to use, either Font Awesome or Unicode
2. Unmarked Style: Choose Solid or Outline for unmarked icons
3. Size: Set the size of the rating stars
4. Spacing: Adjust the amount of space between each star
5. Color: Choose the color of the rating stars
6. Unmarked Color: Choose the color of the unmarked portion of the stars

Navigation

Arrows / Pagination

1. Size: Adjust the size of the navigation arrows
2. Color: Choose the color of the navigation arrows

Note: Autoplay is affected by Google’s Autoplay policy on Chrome browsers.

Control the colors and layout for WooCommerce Breadcrumbs

Style

Text Color: Choose the color of the Breadcrumbs text

Link Color: Choose the color of the Breadcrumbs link text

Typography: Set the typography options for the Breadcrumbs text

Alignment: Align the breadcrumbs to the left, right, or center

Note: The style of this widget is often affected by your theme and plugins. If you experience any such issue, try to switch to a basic theme and deactivate related plugins, or adjust the styling within your theme’s settings.

Control the style and layout of the Product Title in the WooCommerce Single template

Content

1. Title: Automatically dynamically generated
2. Link: Enter the URL for the item’s link. Click the Link Options cog to either add rel=nofollow to the link or to open the link in a new window.
3. Size: Choose from Default, Small, Medium, Large, XL, XXL
4. HTML Tag: Select the HTML tag to use for the Title, from H1 to H6, or div, span, or p
5. Alignment: Align the Title to the left, right, center, or justified

Style

1. Text Color: Choose the color of the text
2. Typography: Change the typography options for the text
3. Text Shadow: Add a shadow and blur to the text
4. Blend Mode: Select from multiple layer effects including Normal, Multiply, Screen, Overlay, etc.

Insert and set the style for Related Products in WooCommerce Single template

Content

Related Products

1. Products Per Page: Set the exact amount of related products to be displayed
2. Columns: Set how many columns will be displayed, from 1 to 12, for each device (Desktop, Tablet, Mobile)
3. Order By: Set the order in which the products will be displayed. Options include Date, Title, Price, Popularity, Rating, Random, Menu Order
4. Order: Select ASC or DESC (ascending or descending) order

Style

1. Columns Gap: Set the exact gap between the columns
2. Rows Gap: Set the exact gap between the rows
3. Alignment: Align the related products data to the left, right, or center

Image

1. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
2. Width: Control the thickness of the border around the related product images
3. Color: Choose the border color
4. Border Radius: Set the radius to control corner roundness of the border
5. Spacing: Adjust the amount of space between the images and their data

Title

1. Color: Choose the related product Title color
2. Typography: Set the typography options for the Title text
3. Spacing: Adjust the amount of space after the Title

Rating

1. Star Color: Choose the color of a filled star
2. Empty Star Color: Choose the color of an empty star
3. Star Size: Set the size of stars
4. Spacing: Adjust the amount of space after the Rating Stars

Price

1. Color: Choose the color of the related product Price
2. Typography: Set the typography options for the related product Price

Regular price

1. Color: Choose the color of the related product’s Regular Price
2. Typography: Set the typography options for the related product’s Regular Price

Button

Normal | Hover

The following options can be set independently for both the normal and hover states.

1. Text Color: Choose the color of the related product’s Button Text
2. Background Color: Choose the background color of the related product’s Button
3. Border Color: Choose the border color of the related product’s Button

1. Typography: Set the typography options for the related product’s Button Text
2. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
3. Width: Control the thickness of the border around the related product’s Button
4. Border Radius: Control corner roundness of the button’s border
5. Text Padding: Set the padding within the button
6. Spacing: Adjust the amount of space above the buttons

View Cart

1. Color: Choose the color of the View Cart text under the buttons
2. Typography: Set the typography options for the View Cart text

Heading

1. Heading: Show or Hide the Related Products heading
2. Color: Choose the color of the related products heading text
3. Typography: Set the typography options for the heading text
4. Text Align: Align the related products Heading to the left, right, or center
5. Spacing: Adjust the amount of space after the Heading

Box

1. Border Width: Control the thickness of the border around the related product’s box
2. Border Radius: Control corner roundness of the related products box
3. Padding: Change the padding within the related products box

Normal | Hover

The following options can be set independently for both the normal and hover states.

1. Box Shadow: Adjust box shadow options
2. Background Color: Choose the background color of the related products box
3. Border Color: Choose the border color of the related products box

Sale Flash

1. Sale Flash: Show or Hide
2. Text Color: Choose the color of the Sale Flash text
3. Background Color: Choose the background color of the Sale Flash
4. Typography: Set the typography options for the Sale Flash text
5. Border Radius: Control the corner roundness of the Sale Flash
6. Width: Control the thickness of the border for the Sale Flash
7. Height: Set the height of the Sale Flash
8. Position: Set the position of the Sale Flash, Left or Right, of the related products box
9. Distance: Set the distance of the Sale Flash from the top of the related products box

Note: The style of this widget is often affected by your theme and plugins. If you experience any such issue, try to switch to a basic theme and deactivate related plugins, or adjust the styling within your theme’s settings.

Control the layout and style of the product Short Description on WooCommerce Single template

Short Description

Style

1. Alignment: Align the short description to the left, right, center, or justified
2. Text Color: Choose the color of the Short Description text
3. Typography: Set the typography options for the Short Description text

Note: The style of this widget is often affected by your theme and plugins. If you experience any such issue, try to switch to a basic theme and deactivate related plugins, or adjust the styling within your theme’s settings.

Display and style Product Stock info on WooCommerce Single template

Style

1. Text Color: Choose the color of the Product Stock text
2. Typography: Set the typography options for the Product Stock text

Note: The style of this widget is often affected by your theme and plugins. If you experience any such issue, try to switch to a basic theme and deactivate related plugins, or adjust the styling within your theme’s settings.

Set the style and placement of the Archive Description within the Product Archive template

1. Alignment: Align the Archive Description widget to the left, right, center, or justified
2. Text Color: Set the color of the text
3. Typography: Set the typography option of the text

Set the Upsell Products style in WooCommerce Single template. Make sure to set the Product Upsells in your Product pages > Linked Products > Upsells. This is where the Upsells widget gets the information from.

Content

Upsells

1. Columns: Set how many columns will be displayed, from 1 to 12, for each device (Desktop, Tablet, Mobile)
2. Order By: Set the order in which the upsells will be displayed. Options include Date, Title, Price, Popularity, Rating, Random, Menu Order
3. Order: Select ASC or DESC (ascending or descending) order

Style

Products

1. Columns Gap: Set the exact gap between the upsell products columns
2. Rows Gap: Set the exact gap between the upsell products rows
3. Alignment: Align the upsells data to the left, right, or center

Image

1. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
2. Width: Control the thickness of the border around the upsell product images
3. Color: Choose the border color
4. Border Radius: Set the radius to control corner roundness of the border
5. Spacing: Adjust the amount of space between the images and their data

Title

1. Color: Choose the color of the upsell product title
2. Typography: Set the typography options for the upsell product title
3. Spacing: Adjust the amount of space after the upsell product title

Rating

1. Star Color: Choose the color of a filled star
2. Empty Star Color: Choose the color of an empty star
3. Star Size: Set the size of stars
4. Spacing: Adjust the amount of space after the Rating Stars

Price

1. Color: Choose the color of the upsell product Price
2. Typography: Set the typography options for the upsell product Price

Regular price

1. Color: Choose the color of the upsell product’s Regular Price
2. Typography: Set the typography options for the upsell product’s Regular Price

Button

Normal | Hover

The following options can be set independently for both the normal and hover states.

1. Text Color: Choose the color of the upsell product’s Button Text
2. Background Color: Choose the background color of the upsell product’s Button
3. Border Color: Choose the border color of the upsell product’s Button
4. Typography: Set the typography options for the upsell product’s Button Text
5. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
6. Width: Control the thickness of the border around the upsell product’s Button
7. Border Radius: Control corner roundness of the button’s border
8. Text Padding: Set the padding within the button
9. Spacing: Adjust the amount of space above the buttons

View Cart

1. Color: Choose the color of the View Cart text under the buttons
2. Typography: Set the typography options for the View Cart text

Heading

Heading: Show or Hide the upsell products heading

Box

1. Border Width: Control the thickness of the border around the upsell product’s box
2. Border Radius: Control corner roundness of the upsell products box
3. Padding: Change the padding within the upsell products box

Normal | Hover

The following options can be set independently for both the normal and hover states.

1. Box Shadow: Adjust box shadow options
2. Background Color: Choose the background color of the upsell products box
3. Border Color: Choose the border color of the upsell products box

Sale Flash

1. Sale Flash: Show or Hide
2. Text Color: Choose the color of the Sale Flash text
3. Background Color: Choose the background color of the Sale Flash
4. Typography: Set the typography options for the Sale Flash text
5. Border Radius: Control the corner roundness of the Sale Flash
6. Width: Control the thickness of the border for the Sale Flash
7. Height: Set the height of the Sale Flash
8. Position: Set the position of the Sale Flash, Left or Right, of the upsell products box
9. Distance: Set the distance of the Sale Flash from the top of the upsell products box

Note: The style of this widget is often affected by your theme and plugins. If you experience any such issue, try to switch to a basic theme and deactivate related plugins, or adjust the styling within your theme’s settings.