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

↑ Back to top

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.

More information at: Installing and Managing Plugins. 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

↑ Back to top

1. Go to: Products > Attributes.  See, https://woocommerce.com/document/managing-product-taxonomies/#section-8 for instuctions. 2. Create a new attribute, or skip this step if you already have one. 3. Edit the attribute by clicking edit or 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. 
• If you’ve chosen image, you’ll be able to upload an image.

8. Select Add New Color. For more information about setting up and managing Global Product Attributes, see: Managing Attributes.

Add color and image swatches to variable products

↑ Back to top

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:

Variable Product

2. 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.)
• Custom Colors and Images. You will be able to add colors and image swatches.
• Radio Buttons. The available options will be displayed as radio buttons.

5. Choose whether to add a label or not and where to add it, if you’ve selected “Taxonomy Colors and Images” or “Custom Colors and Images”. This label will display the name of the selected term. 6. Select the size of the swatches if you’ve selected “Custom Colors and Images”. This will determine how large the swatches will be on the product page. 7. Configure the attribute terms. This is similar to how global attribute terms are configured (see above).

• Select the term.
• Choose Attribute Color or Image.
• If you’ve chosen color, select a color.
• If you’ve chosen image, upload an image.

8. Update the product.

Compatibility with other extensions

↑ Back to top

• The CSV Import suite currently does not have the ability to import swatch settings.
• Grouped Products are not currently compatible or supported.

FAQs

↑ Back to top

How do I change the size of the image swatches?

↑ Back to top

You can change the size in WooCommerce > Settings > Products > Display. After changing the size, you need to regenerate your images by using the AJAX thumbnail rebuild plugin.

Where do I put my template files?

↑ Back to top

The files should be placed in: /yourtheme/woocommerce-swatches/single-product/variable.php.

Why is the main picture of my product not changing while selecting variations?

↑ Back to top

WooCommerce Variation Swatches and Photos extension allows you to put pictures or colors for each attribute. However, it does not change the main product image. To change the main product image, you need to navigate to your variations options and upload a picture for each variation. It works this way because let’s say you have two attributes used for variations: Color and design for a t-shirt. You would use Variation Swatches and Photos for the color attribute displaying the color. The design attribute is used for the t-shirt itself. If a color and design is selected, you need an image for variation that shows the t-shirt design and selected color combined.

Why are my swatches not saving?

↑ Back to top

The Variation Swatches and Photos extension does not save swatches or photos after approximately 30 values (this number is based on the system and varies). Contact your hosting provider to increase max_input_vars. This happens frequently, if you have a product with a lot of variations.

Questions & Support

↑ Back to top

Have a question before you buy? Please fill out this pre-sales form. Already purchased and need some assistance? Get in touch the developer via the Help Desk.