WooCommerce Product Configurator

A watch with 165 combinations does not need 165 photos

You sell a watch with 5 faces, 3 cases and 11 straps. That is 165 combinations, and every customer wants to see theirs before paying. Photographing them all eats the budget; leaving a single photo forces people to imagine the result at the very moment they decide.

A layered configurator changes where the effort goes: you stop producing finished results and prepare pieces that fit together, and that preparation decides whether the final image looks real. In that example 20 images are enough, but all 20 have to line up exactly.

WooCommerce Product Configurator, by Iconic, works this way with variable products: each attribute value has its transparent image and, when the buyer picks an option, that layer loads over the others. Before buying it, the useful question is whether you can get your pieces separately, with the same framing and the same light.

Layers, conditions and image cache

• One layer per attribute value: in the Configurator tab, each value has its own image selector.
• Drag-and-drop order: attributes placed at the top display above those below.
• Conditional layers: the image of one attribute changes according to what was picked in another, with groups made of attribute, comparison and value.
• Optional background layer: it can be a solid color saved as an image.
• Image cache: it stores configured images to show them instantly, and it is cleared from the plugin dashboard.

Conditions solve the cases where one part changes shape with another choice. If a table offers straight legs and other styles, you create a group for the straight style and assign the image of those legs in each color.

It saves photos, and the variations are still yours

The plugin reduces the images and leaves the WooCommerce model untouched. The product is still variable, and the variations have to exist, with a price and stock; if either is missing, that option stays out of the buyer's reach.

It composes flat images, so the result depends on your layers. You should set a featured image, which appears in listings and serves as a fallback.

If images disappear on saving, the server is limiting the fields it accepts per submission, and the max_input_vars setting has to go up.

Requirements and setup of the first configurable product

It needs WooCommerce and the PHP GD library. Use PNG layers, which is the safe format in every case. Then follow this order:

1. Create the variable product with its attributes and variations, give them a price and stock, and save it.
2. Open Configurator in the product data and turn on the toggle.
3. Prepare the layers in an image editor on a fixed artboard, for example 1000 by 1000 pixels, aligned and with a transparent background.
4. Assign each image to its attribute value with the plus icon.
5. Drag the attributes to set the layer order and save the product.

Swatches, languages, wishlists and builders

It has official integration with WooCommerce Attribute Swatches and WooThumbs, also by Iconic, and with WooCommerce Variation Swatches and Photos by Lucas Stark. The list continues with Variation Swatches for WooCommerce, WPML, YITH Wishlist and WC Product Bundles.

Integrated themes and builders include The Gem, Divi, Elementor, Goya and Be Theme. With any other external plugin compatibility is not guaranteed, so test your combination before loading the whole catalog.

When you need made-to-measure pricing, free design or separate pages

If options change the price through a formula, as with a blind cut to measure, look at Uni CPO. If the customer should create their own design for printing, Lumise attaches the production file to the order.

If each version deserves its own URL, Linked Variations keeps them as independent products linked together.

Image count, WebP and layers that do not update

How many images do I have to prepare?

One per attribute value, plus the background if you use one and those for conditional layers. The example watch goes from 165 to 20.

Does it work for simple products?

No. It only works with variable products.

Can I use WebP?

PNG works in every case. If you prefer WebP, test it on your install before converting the layers.

I changed a layer and still see the old one, what do I do?

Clear the image cache with the Clear Cache button in the Configurator dashboard.