Add Product Variations & Color or Image Swatches in WooCommerce
This tutorial will focus on adding product variations in WooCommerce and then add a color swatch or an image swatch to allow customers a really cool way to select with product variation they want.
Add product variations with WooCommerce:
You will be able to set the following product variations using only WooCommerce. WooCommerce comes with this ability as default.
- Add a product
- Set up the product with variations
- Set a featured product image
- Add product variation images to WordPress media library
- Set up a global color attribute
- Add the global color attribute to our product
- Add product level colors to our global color attribute
- Link all product variations for fast product variation setup
- Add prices to product variations
- Add product variation images to the product level variations
- Demonstrate on the front-end our new product with the variation
WooCommerce Variations Swatches & Photos Plugin Demonstration:
You will need to get the WooCommerce Variations Swatches & Photos plugin to do this part of the tutorial.
- Select the new Swatches tab
- Select color
- Add hexadecimal colors for Red, Blue, Lime, Purple (there is a color picker you can use as well)
- Show front-end that the product variations can now be selected with the new color swatches.
- Demonstrate how to use images to make an image swatch instead of colors.
Change the size of Image Swatches:
You can change the size of your image swatches, the size the image will display. Go to WooCommerce > Settings > Products > Display > and scroll down and find Swatches & Photos and set your size there.
Allowed Product Variations:
- An image – select the placeholder the icon to see the image uploader. After you choose an image select Set Variation Image.
- SKU – If you use SKUs, set the SKU for the variation, or leave blank to use the variable products SKU.
- Enabled – Enable or disable that variation.
- Downloadable – If this a downloadable variation.
- Virtual – If this product isn’t shipped, removes any shipping settings for the variation.
- Manage Stock – Use to manage the stock on the variation level.
- Stock quantity – Stock for the particular variation, or left blank to use the variable product’s stock settings.
- Regular Price – Set the price this variation sells for. Required
- Sale Price – Set a price for when the variation is on sale. Optional
- Stock Qty – Shows if Manage Stock is selected. Input the quantity you have.
- Allow Backorders – Choose how to handle backorders.
- Stock Status – Set the status of your variations stock.
- Weight – The weight for the variation, or left blank to use the variable product’s weight.
- Dimensions – The dimensions for the variation, or left blank to use the variable product’s dimensions.
- Shipping class – Shipping class can affect shipping. Set this if it differs from the variable product.
- Tax class – A tax class for this variation. Useful if you are offering variations spanning different tax bands.
- Downloadable Files – Shows if Downloadable is selected. Add file(s) for this variation for customers to download.
- Download Limit – Shows if Downloadable is selected. Set how many times a customer can download the file(s). Leave blank for unlimited.
- Download Expiry – Shows if Downloadable is selected. Set the number of days for the download to expire after purchase.