WordPress.org
Get WordPress
WordPress.org

Plugin Directory

Attribute Images for WooCommerce

Attribute Images for WooCommerce

By A Fine Studio
Download

Description

Too many variations to add an image to each one? Put the image on the option instead.

WooCommerce links product images to variations. That works for a handful of options, but the numbers soon get out of hand. A dog collar in 12 prints, 6 sizes, 3 widths and 4 hardware finishes is 864 possible combinations. If only the print changes how the product looks, adding an image to every one of those variations is slow to set up, hard to keep up to date and heavy on your admin screens.

Attribute Images for WooCommerce fixes this at the source. Give each attribute option, such as a print, colour or fabric, one image. Leave your variations set to “Any” for that attribute, and the main product image changes the moment a customer picks an option, even before they’ve chosen a size or anything else.

The chosen image then follows the order all the way through. The basket, mini-basket, checkout, order emails and your admin order screen all show the exact print or colour the customer picked, not a generic product photo. Customers can see at a glance that they’ve ordered the right thing, and so can you when it comes to making or packing it.

Quick start

  1. Create a global attribute, such as Design.
  2. Add your options (prints, colours, patterns) and give each one an image.
  3. Add the attribute to your product and set your variations to “Any Design”.
  4. View the product. Choosing a design now changes the image.

Full step-by-step instructions are on the Installation tab.

Why you’ll like it

  • Far fewer variations. Keep variations for the things that change the price or stock, not for every look.
  • Set it once, use it everywhere. An option’s image is reused on every product that uses it, so a print shared by collars and leads only needs one image.
  • Instant feedback for customers. The image updates as soon as the option is chosen, and stays put once the full variation is selected.
  • Seamless from product page to order. The chosen image carries through to the basket, mini-basket, checkout, order emails and admin order screen, with no extra setup.
  • Lightweight. No settings page, no custom database tables and no extra variations. One small script loads only on variable product pages that need it.
  • Works with your theme. Uses WooCommerce’s own image functions where it can, and updates custom theme galleries directly where it can’t, including carousels and WebP images.

Features

  • Image field on every global attribute option, using the media library
  • Image column in the attribute options list, so you can see what’s missing at a glance
  • Panel on the product edit screen naming the attribute that will control the image, and why
  • Main product image and first thumbnail switch when an option is chosen
  • Zoom and lightbox show the chosen option’s image
  • Basket, mini-basket, checkout, order emails and the admin order screen show the chosen option’s image, including the Cart and Checkout blocks
  • The original image returns when the option is cleared
  • Lightbox shows the chosen option’s image, including themes that load lightbox images separately (such as Ricky)
  • Optional filter to choose which attribute controls the image
  • Clean uninstall

Alt text for your option images

When the image switches, it uses that image’s own alt text, so screen readers and search engines describe the exact print or colour the customer chose. With a separate image for every option, clear and distinct alt text makes a real difference to accessibility and product search.

If you have a large catalogue to describe, ALTification, from the same developer, generates alt text for WooCommerce product images using each product’s short description, categories, attributes and focus keyphrase. That helps similar option images get accurate, distinct descriptions rather than near-identical ones.

Screenshots

Choosing a print switches the main product image straight away, before any other options are selected.
Choosing a print switches the main product image straight away, before any other options are selected.
The chosen print stays in place once the size, width and other options are selected.
The chosen print stays in place once the size, width and other options are selected.
Without option images, 12 designs across 68 variations means 816 images to assign. With Attribute Images for WooCommerce you only need 12.
Without option images, 12 designs across 68 variations means 816 images to assign. With Attribute Images for WooCommerce you only need 12.
Create a global attribute, such as Design, under Products > Attributes.
Create a global attribute, such as Design, under Products > Attributes.
Add an image to each option under Configure terms.
Add an image to each option under Configure terms.
The Image column shows at a glance which options have an image.
The Image column shows at a glance which options have an image.

Installation

These steps use a product with a choice of prints as the example. Swap “Design” for whatever changes how your product looks, such as Colour, Fabric or Pattern.

1. Install the plugin

  1. Go to Plugins > Add New Plugin and search for “Attribute Images for WooCommerce”, or upload the zip file.
  2. Click Install Now, then Activate. WooCommerce must be installed and active.

2. Create a global attribute

  1. Go to Products > Attributes.
  2. In “Name”, enter Design. This is the label customers see above the dropdown.
  3. Leave the other settings as they are and click Add attribute.

3. Add your options and their images

  1. In the attributes list, click Configure terms next to Design.
  2. In “Name”, enter the option as customers should see it, for example Red Ghost – C247.
  3. Under “Image”, click Select image and choose the picture for that option.
  4. Click Add new Design.
  5. Repeat for each option. The Image column shows which options have an image.
  6. To change the order of the options in the dropdown, drag them in the list.

4. Add the attribute to your product

  1. Edit your variable product and open Product data > Attributes.
  2. Choose Design from the “Add global” (or “Add existing”) dropdown.
  3. Select the options this product comes in, or click Select all.
  4. Tick Visible on the product page and Used for variations.
  5. Click Save attributes.

5. Set up your variations

  1. Open Product data > Variations.
  2. For each variation, set Design to Any Design…. One variation then covers every design, so you only need variations for the things that change the price or stock, such as size.
  3. Click Save changes, then Update the product.

6. Check it works

  1. View the product.
  2. Choose a design. The main image changes straight away.
  3. Choose the other options. The design image stays in place.
  4. Click Clear. The original product image comes back.

Already using a custom attribute?

If the product has a Design attribute typed straight into the product (it won’t show a “Global” label), it has no options to hold images. To switch it over:

  1. Follow steps 2 and 3 above, using the same option names as the existing attribute.
  2. Edit the product, open Product data > Attributes and click Remove on the old Design attribute.
  3. Follow step 4 to add the global Design attribute, and drag it back to its original position.
  4. Open Variations and check they show “Any Design…”, then click Save changes and Update.

Prices, stock and your other attributes are not affected. We recommend trying this on a staging site or a duplicate product first.

FAQ

Does it work with custom product attributes?

No. Images are stored against attribute options, which only global attributes (Products > Attributes) have. You can replace a custom attribute on a product with a global one that has the same values.

Does it work with swatch plugins?

Yes. Swatch plugins change how options are displayed, turning dropdowns into colour, image or button swatches. This plugin changes the main product image when an option is chosen, so the two work well together: customers click a print swatch and see that print straight away. It has been tested with the popular Variation Swatches for WooCommerce plugin. If you use a different swatch plugin or a theme with built-in swatches and the image doesn’t change, please let us know in the support forum.

Do I need to remove the images from my existing variations?

No. The option’s image is shown when that option is chosen, including after a full variation has been selected.

Which attribute is used if more than one has images?

The first variation attribute on the product whose options have images, so the order of the attributes on the product decides it. The Attribute Images panel on the product edit screen names the one that will be used, so you can see at a glance which a product has picked. To choose a specific one yourself, add this to your theme’s functions.php or a code snippets plugin:

add_filter( 'attrimg_attribute', function () { return 'pa_colour'; } );

Does the basket show the chosen option’s image?

Yes. The basket, mini-basket, Cart and Checkout blocks, order emails and the order screen in your admin all show the image of the option the customer chose. Only the image changes, so prices, basket contents and orders are not affected. To turn this off, use:

add_filter( 'attrimg_use_in_cart_and_orders', '__return_false' );

Can the same option show a different image on different products?

No. Each option has one image across the shop. If you need product-specific images for the same option, a per-product gallery plugin is a better fit.

The image doesn’t change with my theme. How can I check what’s happening?

Start with the Attribute Images panel on the product edit screen. It names the attribute the product will use and how many of its options have an image, and says what it checked when it finds none. The usual causes are an attribute that isn’t ticked for “Used for variations”, options that don’t have an image yet, or an earlier attribute with images taking precedence over the one you meant. If it’s the last of those, drag the attribute you want above the other on the product, or set it explicitly with the attrimg_attribute filter shown above.

If the panel looks right but the image still doesn’t change on the product page, the theme’s gallery is the next thing to look at. Enable WP_DEBUG, or add add_filter( 'attrimg_debug', '__return_true' );, then view the product page source while logged in as an administrator. A comment starting “Attribute Images for WooCommerce” says what the plugin found. Clear any caching or script optimisation plugins after installing. A small number of heavily customised galleries may not be supported, so please open a support topic with your theme name.

Does it slow my site down?

No noticeable impact. The script is small, loads only on variable product pages that use option images, and the image data is added to the page, so there are no extra requests when an option is chosen.

What happens if I delete the plugin?

Deleting the plugin from the Plugins screen removes the option images it saved. Your media library files are not touched.

Reviews

There are no reviews for this plugin.

Contributors & Developers

“Attribute Images for WooCommerce” is open source software. The following people have contributed to this plugin.

Contributors

Translate “Attribute Images for WooCommerce” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.5.2

  • Added: an Attribute Images panel on the product edit screen, naming the attribute a product will use, how many of its options have images, and what was checked when it finds none.
  • Fixed: the basket and order screens worked out which attribute to use differently from the product page, so they could show the image of a different option. Both now agree.

1.5.1

  • Initial public release.

Meta

Ratings

No reviews have been submitted yet.

Your review

See all reviews

Contributors

Support

Got something to say? Need help?

View support forum