Website Building » WooCommerce » How Do I Add Product Variations in WooCommerce With Button Swatches From Scratch?

How Do I Add Product Variations in WooCommerce With Button Swatches From Scratch?

Last updated on January 20, 2023 @ 5:40 am

Product variations are a great way to offer different options for the same product, and can be a useful tool for upselling and cross-selling. Button swatches offer a visual way to represent these variations, making it easy for customers to see what they’re getting.

Adding product variations in WooCommerce with button swatches is easy to do from scratch. You’ll first need to create a variable product, and then add your variation attributes. Once you’ve done that, you can add your button swatches.

Variable products are a great way to offer different options for the same product.

1. Go to WooCommerce > Products. Then, click Add product.

2. Give your product a name and description. Then, select Variable product from the Product data dropdown.

PRO TIP: If you are not familiar with WooCommerce, we recommend that you do not attempt to add product variations with button swatches. This can be a complex process and may result in errors on your website.

To add variation attributes:

    1. Go to: WooCommerce > Products > Add New Product or edit an existing one.

    2. Select Variable product from the Product data dropdown.

    3. Scroll down to Product data > Attributes.

    4. Select Add after selecting Custom product attribute or Global attribute.

    5. Enter values for Name (required), Value(s) (required), Visible on the product page (optional) & Used for variations (required). If you want this attribute to have multiple values, then enter each value on a new line under Value(s).’

In order to add button swatches:

    1.) Download the plugin from WordPress repository.

    2.) Install & Activate Button Swatches for WooCommerce Plugin.

    3.) Upon activation visit your admin area dashboard WooCommerce > Settings page.

    4.) Scroll down little bit under Products tab there is ‘Product Images’ section find enable/disable checkbox option named as ‘Swap main image with gallery images’ just tick mark it enabled like shown in screenshot below then click on Save changes button.

After that edit any variable type of WooCommerce product go down on that page find ‘Swatches’ tab there you will find all attributes which have been created as global attributes as well as custom attributes added while creating/editing any products displayed.

Now click on any attribute’s name link will take you further more setting option page of that attribute where you need to set color or image or label of terms associated with that attribute like shown in screenshot below:

Morgan Bash

Morgan Bash

Technology enthusiast and Co-Founder of Women Coders SF.