Attribute Images for WooCommerce

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.