WooCommerce Variation Swatches And Photos
WooCommerce Variation Swatches And Photos

WooCommerce Variation Swatches And Photos allows you to show colors and photos as alternative to dropdowns for variations of variable products.

Installation for WooCommerce Variation Swatches And Photos

  1. Download the .zip file from your WooCommerce account.
  2. Go to: WordPress Admin > Plugins > Add New to upload the file you downloaded.
  3. Activate the extension.

Also, Get WooCommerce USPS Shipping Method

In order to use the colors or photos for your products’ variations, you first need to attach those colors and photos to product attributes:

  • Global attributes are available for your whole store
  • Per product attributes are only available for 1 product

Set up colors and photos for global attributes

1. Go to: Products > Attributes

2. Create a new attribute, or skip this step if you already have one.

3. Select the gear icon on the right next to the attribute. When you hover over this icon, you’ll see “Configure terms”.

4. Add New Color or whatever your attribute is called (or choose to edit an existing term).

5. Select either “Color” or “Image” in the Swatch Type dropdown.

  • If you’ve chosen color, you’ll be able to click on the color icon and select the color you want to use in the color picker. Alternatively, you can type in the HEX value for the color.
  • Select Add New Color.

Add color and image swatches to variable products

Color and photo swatches can only be used for variable products.

1. Create a variable product. Make sure that you select a global attribute or create a custom one in the “Attributes” tab. Also set up the “Variations” tab. More information about that can be found here:

Publish your product.

3. Go to the Swatches tab.

4. Select a “Type” for each of the attributes used for the variations.

  • None. The options will be offered in a dropdown.
  • Taxonomy Colors and Images. The options of the global attribute will be offered. (Only available for global attributes.)

LEAVE A REPLY

Please enter your comment!
Please enter your name here