WordPress Woocommerce Changing Images on Color and Size Change

Hi, so I’ve been asked to help with a WordPress site using Woocommerce. The goal is to be able to switch images based on size and color selection. I’ve decided to make a video to make it clear exactly what to do and possible help other people who might have the same problem in future. I’ve set up the woocommerce. I haven’t added any products yet, and before I do I’m going to set up attributes. Attributes mean things like color or size. You can edit per product or you can add it here and use it on every single product that you have or not. It makes it easier if you are going to be adding a lot of product. So type color, and click add attribute. The next thing I want to do is all values to the attributes. Put in red, click add new color and repeat the steps for blue & green.

Now I could add size in the same way but I want to show you how to add values at the product level

as well. So Let’s add our first product. I am going to call it “cool t-shirt”. Under product data, you have several diffect options. The one we want is variable product. I’m just going to put 123 for the sku for now. And let’s look at attributes. If you click on that, we will see color which I set up in the attribute section just a moment ago. So let’s add color to our cool t-shirt. Now I’m going to add in the red blue and green by hitting select all, and if you have a shirt that has another color you can add it here, such as yellow. It is very important you hit save for variation. Click save attribute. Now if you only have an attribute that you will use for one or two products, you may want to set it up here. I’m going to set up size now to show you how to do it, but normally I would set this up in the attributes section because it is such a common setting.

Select custom product attibute in the attribut drop down. Put size in the name box and we are going to put small med and large in the values box, seperated by what is call a pipe | this is found just above the enter key with a shift. Your entry should look like this: small|med|large

Click use for variation, save attribute.

Let’s go down to variations. Now we can add every variation. I’ve set up 3 sizes and 3 colors so we can have 9 combinations, or you can do it for each one, because maybe you don’t have red small or blue large or whatever. Yo can do it here. So, set the boxes for blue and small, save, and click on the box, and boom! You get all these options! You want to give it a price, if you don’t it will not show up. I’ve upload images already that I got off of freeimages.com. Let’s add the blue shirt images.

Now do the same for red large and green small.. save the changes

Don’t forget, as I do, in the video to PUBLISH THE PRODUCT

So look at your shop page. Click on cool t-shirt to get to the product page. I have not set a default image, but it would show up now if I did.

Click on red. Only large comes up because I only put that size in for red.

Select large, and the red shirt will come up.

Play around with the drop downs, and you’ll see the images change

That’s how you set up product variation using Woocommerce and WordPress

I hope you found this useful. If you have any questions please email with the link at the top of the page.