Hello Elementor

Image Variation

If you have variable product in your store and have attribute variation created globally in attributes >> products page. This tutorial is for you.

Step 01: Editing Attribute

Access Products > Attributes.

To set image attribute type to Image attribute, click on Edit.

After selecting button, it will open attribute editing panel. Select Image Type from the type dropdown.

When attribute type selection is completed, get back to the attribute list page. The Attribute list would look like the following image. Now Image Attribute is showing Image type instead of default Select type.

After selecting attribute type, the frontend of the product would look like the following screenshot. Don’t be panic, if you find your attribute variations weird. It happens because you haven’t set any image for variations yet.

Editing Variations


To define image as variations inside the image attribute. Head over to Products > Attributes. Select Configure terms from image attribute.

After selecting Configure terms, a list of attribute variations comes up. For Image attribute, three variations: CharmeuseSatinSilkVelvet and Wool variations are listed for me. As those variation have no image defined, they look like the following screenshot.

Edit each variation one by one to add variation image. For demonstration, I am going to select Edit link for Charmeuse variation.

From variation edit panel. Select desired image press Upload/Add Image button and the update the changes pressing the Update button. For my red variation.

After adding image for entire variations, you are ready to publish.

Video Guide:


CONTENTS