Add Product Variations & Color or Image Swatches in WooCommerce

0 Comments

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.