Woo Swatches

Woo Swatches are used in WooCommerce WordPress product layout to showcase product variations like color, size, etc that the business offer to their customers. For example, if you offer three distinct color t-shirts in three different sizes to online shoppers, the Elementor WooCommerce Swatches extensions can assist you in displaying all the variations with additional customization features.

The Xpro Addons are fully compatible with WooCommerce and even offer more than 7 free WooCommerce widgets in their free Addon pack. You can easily create an online store and personalize its display to appeal to your clients and improve their engagement.

With Xpro Woo Swatches, you can add Xpro color, Xpro Image, and Xpro Label variation to your product. Add these variations effortlessly on your e-commerce website to provide your clients with the perfect product that meets their requirements.

How to Install Xpro Woo Swatches Feature for Elementor

Requirements

In order to use Xpro WooCommerce widgets and extensions, you need to install the WooCommerce plugin in your WordPress dashboard. You need to install and activate the Free version of Xpro Elementor Addons to use our Woo Swatches for your WordPress websites. Once the plugin is installed, just make sure Woo Swatches is ‘Enabled’ from the Extensions tab of the Xpro Dashboard. This way you will easily find & use the effect in the Elementor editor.

Follow the steps below to enable the extension:

Step 1

Click on the Xpro Addons option available in the WordPress dashboard menu.

Step 2

From the Dashboard, click on the Extensions Tab, find the Woo Swatches, and then toggle the button ‘ON’ to enable it.

How to Use Elementor Woo Swatches Extension

WooCommerce allows you to add products to your WordPress. After you create a product click on the attributes section to create variations.

In the attributes, you have the following fields and options to create product variations.

Name: Give a name to the attribute.
Slug: Give a unique id to attribute.
Type: Select how this attribute will be displayed.

Click on the Add Attributes button to save these attributes.

After you’ve chosen the category of attributes to display, you may add each sort of variation to it. For example, if you created color attributes, you can also provide the color type by clicking on the configure term button.

Add colors or whatever attributes you are working on and save it so you can use it later.

Now go to the product where you want to add them and add these attributes under the attributes tab.

Save these attributes and add them to the variations. In the variation tab, include all the combinations of variations from attributes.

How to Add Woo Swatches to the Elementor

To add these variations to your Elementor Page builder, create a product layout and use the Xpro Add to Cart widget.

How to Style Woo Swatches for Elementor

Head over to the styling tab and open the Woo Swatches menu to style the display of the layout.

You have different tabs to style the layout of each type of variation. For colors, you can adjust the size of the display with the width, height, and radius options.

For labels, you can personalized typography, text color, background color, and border color.

You can add a border around swatches by choosing one of the border types: solid, double, dashed, dotted, or groove. Additionally, customize the border width, radius, and color.

Best Woo Swatches for Elementor

That is all from the Xpro Woo Swatches feature for Elementor. Combine this feature with Woo Product Image, title, price, and description and create a product layout and build your business online.

Xpro Elementor Addons consists of amazing widgets, feature, and theme template that allows you to create a professional website without a need for any coding. Use the free Theme Builder for Elementor to dynamically design singular and archive theme templates. View our premium Elementor widgets that are advanced in nature and can help you create an incredible visually appealing website.