Attaching Images to Products in WooCommerce (Galleries, Variations, and Simple)

Learn the different ways you can attach images to your products in WooCommerce. The method you choose is completely dependent on what type of products you have.

Method 1: One image per simple product

Let’s suppose you have many different products with no variations (none of the products have different sizes or colors). Products with no variations are known as simple products.

As a side note, it only makes sense for colors and sizes to be variations for a product. You wouldn’t have the same product built by three different producers, and you wouldn’t have the same product with three different styles. Your product could have three different styles, but this isn’t typical. A product with a different style would probably be a separate product altogether. Don’t get carried away with variations.

If you have simple products with one image per simple product, the best way to organize your images is by giving the image the name of the product’s SKU. Doing that will help you attach the images to the product. For example, if a product has SKU skua, you would rename the picture to skua.jpg.

Imagine you had an Excel file with one product that had the SKU skua.

sku color size
skua red 9

Now, imagine you upload the image for that product to http://yoursite.com/wp-content/uploads/images/skua.jpg.

Using WP All Import, you can import that Excel file and use the data in columns to create the name of the image. In the snippet below, you can see that we are using the data from the sku.

http://yoursite.com/wp-content/uploads/images/{sku[1]}.jpg

This would build out to http://siresource.com/wp-content/uploads/images/skua.jpg which is exactly where our image is. If you did not name your images with the product sku, you would have to include another column called images and enter the name of the image.

sku color size image
skua red 9 skua.jpg

You could then attach the image to the product using the following snippet.

http://yoursite.com/wp-content/uploads/images/{image[1]}

That would build out to http://yoursite.com/wp-content/uploads/images/skua.jpg but you’ll see later on why this is not a good idea.

Method 2: Multiple images per simple product

If each simple product has multiple images, create a folder with the name of the SKU and drop the images for that product into the folder. Then, rename the pictures in the order that you want them to appear: 1.jpg, 2,jpg, 3.jpg, etc. Note that 1.jpg will be used as the products featured image, and the rest of the images will be added to the product’s gallery.

So, now you have three images for the product above. You can attach the images using the following code in WP All Import.

http://yoursite.com/wp-content/uploads/images/{sku[1]}/1.jpg,

http://yoursite.com/wp-content/uploads/images/{sku[1]}/2.jpg,

http://yoursite.com/wp-content/uploads/images/{sku[1]}/3.jpg

If you included a column called images with the names of the images, the previous method would not work.

sku color size images
skua red 9 1.jpg, 2.jpg, 3.jpg

http://yoursite.com/wp-content/uploads/images/{sku[1]}/{images[1]}

Using the code above seems like it should work, but it doesn’t. It only works for the first image. It produces the following.

http://yoursite.com/wp-content/uploads/images/skua/1.jpg,

2.jp,

3.jpg

You can see that it does not build out the path for the other two images. You would need to manually include the whole path for each image. If you put that in the images cell, it would work.

http://yoursite.com/wp-content/uploads/images/skua/1.jpg, http://yoursite.com/wp-content/uploads/images/skua/2.jpg, http://yoursite.com/wp-content/uploads/images/skua/3.jpg

If this is incredibly confusing to you, and you want bypass setting up an E-commerce shop by yourself, go to my contact page and fill out the form.

Method 3A: Variable products with one image per variable product and parent product

Creating variable products adds complexity to the setup process, but it makes the shopping experience easier and more enjoyable for your visitors.

Let’s suppose you have a shoe store. Each shoe has multiple colors and multiple sizes. Let’s say the shoe with the SKU skua has the colors red, white, and blue, and the sizes 9, 10, and 11. The red, green, and blue shoes will have different images, but the sizes won’t. Name the first image skua_.jpg (yes, with the dash). That will be the featured image for the parent product. Now, name the image for the red shoe “skua_red.jpg” Name the blue shoe “skua_blue.jpg” and so on. The table below makes sense except for the colum sku_for_image, but you will understand why it’s there in a minute.

sku_for_image sku parent_sku color size
skua skua
skua skua_1 skua red 9
skua skua_2 skua red 10
skua skua_3 skua red 11
skua skua_4 skua white 9
skua skua_5 skua white 10
skua skua_6 skua white 13
skua skua_7 skua blue 9
skua skua_8 skua blue 10
skua skua_9 skua blue 12

If each product and its variations has one image, you can use the code below to build out the URLs to the images.

http://yoursite.com/wp-content/uploads/images/{sku_for_image[1]}_{color[1]}.jpg

That will create the URLs

http://yoursite.com/wp-content/uploads/images/skua_.jpg,

http://yoursite.com/wp-content/uploads/images/skua_red.jpg,

http://yoursite.com/wp-content/uploads/images/skua_white.jpg,

http://yoursite.com/wp-content/uploads/images/skua_blue.jpg

Now, you probably understand why we had to add that column called sku_for_images. If we just used the sku, it would go to the wrong folder. If we used the parent_sku, the image for the parent product would not be found.

You also might understand why we needed the dash. If we didn’t add the dash, it wouldn’t be able to find our image.

In addition to using the method above, make sure you select SEO & Advanced Options and “Change image file names to” Use this code there: {sku_for_image[1]}_{color[1]}.jpg

Using this method ensures that each image is only added once. Otherwise, it would add duplicates since the images are also being applied to the sizes, but the different sizes are using the same image. Clear as crystal, right?

It’s not necessary to put these images into a folder, but if you want to, make sure the name of the folder is the the product’s SKU.

Method 3B: Variable products with one image per variable product and parent product

Using functions greatly simplifies the set up of your image files.

Using a function, you can confidently name your images using the product’s sku and color without any added dashes for the parent product. You also won’t need that sku_for_image column.

Add this function to the Function Editor.

function my_image_func( $url, $sku, $parent_sku, $color ) {
  // If the $parent_sku is blank, that means we are on a parent product and should use the $sku
  if ($parent_sku == '') {
    $parent_sku = $sku;
  }
  if ($color !== '') {
    $color = '_' . $color;
  } else {
    $color = '';
  }

  return $url . '/' . $parent_sku . $color . '.jpg';
}

Use it with the following snippet.

[my_image_func(“http://test4.dev/wp-content/plugins/d2l-folder2text/images/”,{sku[1]},{parent_sku[1]},{color[1]})]

That will return something like http://test4.dev/wp-content/plugins/d2l-folder2text/images/skua_red.jpg

Now, you just have to name your images with the sku and color. For example, skua.jpg for the parent product (yes, without a dash!), skua_red for the variable product that is red, skua_blue, and so on. You can keep all of these images in the same folder.

Structure for 3B

Parent Product

skua.jpg

Variable Product

skua_red.jpg

skua_blue.jpg

skua_white.jpg

Method 4A: Variable products with multiple images per variable product and parent product

Finally, we have the most difficult structure for images.

Let’s suppose, again, that you have a shoe store. Each shoe has multiple colors and multiple sizes. However, this time each variable product and parent product of the variations has multiple images. You can use method three, but I wouldn’t recommend it. To use method three, simply name the images for the parent product skua__1.jpg, skua__2.jpg (yes, do include the double underscores), etc. Name the images for the variable products skua_red_1.jpg, skua_red_2.jpg, etc., according to their colors.

http://yoursite.com/wp-content/uploads/images/{sku_for_image[1]}_{color[1]}_1.jpg,

http://yoursite.com/wp-content/uploads/images/{sku_for_image[1]}_{color[1]}_2.jpg,

http://yoursite.com/wp-content/uploads/images/{sku_for_image[1]}_{color[1]}_3.jpg

Repeat and change the numeral at the end for however many pictures you have. Now, you can see why we included double underscores for the parent product. The parent product doesn’t have a color and will evaluate to something like http://yoursite.com/wp-content/uploads/images/skua__1.jpg, http://yoursite.com/wp-content/uploads/images/skua__2.jpg, http://yoursite.com/wp-content/uploads/images/skua__3.jpg,

If you don’t want unique images for your parent product and just want to make the red image the featured image, just give the product a color in the Excel file.

However, I wouldn’t recommend using the method above (method 3). Instead create the folders “skua_”, “skua_red”, “skua_white”, and  “skua_blue”. Drop the images for the parent product into skua_, and rename them to 1.jpg, 2.jpg, 3.jpg etc. Drop the images for the red variable products into skua_red and rename them to 1.jpg, 2.jpg, 3.jpg, etc.

Use this code snippet for that.

http://yoursite.com/wp-content/uploads/images/{sku_for_image[1]}_{color[1]}/1.jpg,

http://yoursite.com/wp-content/uploads/images/{sku_for_image[1]}_{color[1]}/2.jpg,

http://yoursite.com/wp-content/uploads/images/{sku_for_image[1]}_{color[1]}/3.jpg

When I set up a WooCommerce shop, I programmatically create the appropriate folders using the sku and color. I use a MySQL database for that. Then, I just drop the appropriate images into their corresponding folder and rename the images.

Attaching images to the products is the trickiest part. It’s best to leave pictures for last once you’ve figured out the structure for the products.

Method 4B: Variable products with multiple images per variable product and parent product

Another good method of attaching images to products is using WP All Import’s function ability. You can paste a function into a designated area in WP All Import and run that function each time a picture is attached. The wonderful thing is that you can send data to that function.

Remember how we had to name our parent folder with a dash like skua_ and also include a column called sku_for_image? Well, if we name our sku’s a certain way, we won’t need that column or extra dash.

This is how I originally attached the images to the products. As you can see, I had to use the original_sku (sku_for_pic) column.

http://test4.dev/wp-content/plugins/d2l-folder2text/images/{original_sku[1]}/1.jpg,

http://test4.dev/wp-content/plugins/d2l-folder2text/images/{original_sku[1]}/2.jpg,

http://test4.dev/wp-content/plugins/d2l-folder2text/images/{original_sku[1]}/3.jpg,

http://test4.dev/wp-content/plugins/d2l-folder2text/images/{original_sku[1]}/4.jpg,

http://test4.dev/wp-content/plugins/d2l-folder2text/images/{original_sku[1]}/5.jpg,

http://test4.dev/wp-content/plugins/d2l-folder2text/images/{original_sku[1]}/6.jpg

However, if I use a function, I can use this method in conjunction with the function.

[my_image_func(“http://test4.dev/wp-content/plugins/d2l-folder2text/images/”,{sku[1]},{parent_sku[1]},”1.jpg”)],
[my_image_func(“http://test4.dev/wp-content/plugins/d2l-folder2text/images/”,{sku[1]},{parent_sku[1]},”2.jpg”)]

[my_image_func(“http://test4.dev/wp-content/plugins/d2l-folder2text/images/”,{sku[1]},{parent_sku[1]},”3.jpg”)]

function my_image_func( $url, $sku, $parent_sku, $image ) {
  // If the $parent_sku is blank, that means we are on a parent product and should use the $sku
  if ($parent_sku == '') {
    $parent_sku = $sku;
  }
  return $url . '/' . $parent_sku . '/' . $image;
}

Or even this method which is even shorter and makes even more sense.

The first parameter of the function is a URL to the main folder of images.

The second parameter is the sku of the product. The sku will only be used if the parent_sku is blank.

The third parameter is the parent_sku.

The fourth parameter is a list of images separated by a commas. You can just as easily replace that hardcoded list with a value from the Excel file. If you had a column called product_images with a list of images separated by commas, you could use that.

You get back a list of images with their full paths like this:

http://test4.dev/wp-content/plugins/d2l-folder2text/images/ORABL_0010210/1.jpg, http://test4.dev/wp-content/plugins/d2l-folder2text/images/ORABL_0010210/2.jpg, http://test4.dev/wp-content/plugins/d2l-folder2text/images/ORABL_0010210/3.jpg

[my_image_func(“http://test4.dev/wp-content/plugins/d2l-folder2text/images/”,{sku[1]},{parent_sku[1]},{color[1]},”1.jpg, 2.jpg, 3.jpg”)]

function my_image_func( $url, $sku, $parent_sku, $color, $images ) {
  // If the $parent_sku is blank, that means we are on a parent product and should use the $sku
  if ($parent_sku == '') {
    $parent_sku = $sku;
  }
   if ($color !== '') {
    $color = '_' . $color;
   } else {
    $color = '';
   }
  // Clean up our list of images that don't have URLs, yet
  $fixed_list = str_replace(", ", ",", $images);
  // Put the images in an array
  $images = explode( ",", $fixed_list );
  $return = array();
  // Create the URLs
  foreach( $images as $image ) {
    $return[] = $url . "/" . $parent_sku . $color . '/' . $image;
  }
  return implode( ",", $return );
}

What is even more great about this final method is that it’s very versatile. It constructs the path to the images using the products sku OR parent_sku. That means that the sku will always be used. If the parent_sku is blank, it uses the sku. It will always look in path_to_image/product_sku/img.jpg. You will get back something like  http://test4.dev/wp-content/plugins/d2l-folder2text/images/ORABL_0010210/1.jpg

 

[my_image_func(“http://test4.dev/wp-content/plugins/d2l-folder2text/images/”,{sku[1]},{parent_sku[1]},{images[1]})]

Structure for Method 4B

sku_color/image.jpg

Parent Product

skua/1.jpg,

skua/2.jpg,

skua/3.jpg

Variable Product

skua_red/1.jpg

skua_red/2.jpg

skua_red/3.jpg

Using the above method, you can confidently name use the structure below.

Create separate folders named with the sku and color. For example skua for the parent product. The function will take care of getting rid of that nasty dash. skua_red for the red shoe, skua_blue for the blue, etc. Place your images into their corresponding folders and name 1.jpg, 2.jpg, 3.jpg, and so on, OR you can create a list of the images. For example, if the skua_red folder had pictures 1.jpg, 2.jpg, and 3.jpg in it, just create a column called images in your Excel file and place the list of images (1.jpg, 2.jpg, 3.jpg) in each row for the red shoe.

Additional Structure for Method 4B

Parent Product

skua/1.jpg,

skua/2.jpg,

skua/3.jpg

Variable Product

skua/red/1.jpg,

skua/red/2.jpg,

skua/red/3.jpg

OR, you could create a folder with the name of the sku and create folders with of different colors.

skua/red, skua/blue, etc.

Then, modify the function accordingly.

function my_image_func( $url, $sku, $parent_sku, $color, $images ) {
  // If the $parent_sku is blank, that means we are on a parent product and should use the $sku
  if ($parent_sku == '') {
    $parent_sku = $sku;
  }
   if ($color !== '') {
    $color = '/' . $color;
   } else {
    $color = '';
   }
  // Clean up our list of images that don't have URLs, yet
  $fixed_list = str_replace(", ", ",", $images);
  // Put the images in an array
  $images = explode( ",", $fixed_list );
  $return = array();
  // Create the URLs
  foreach( $images as $image ) {
    $return[] = $url . "/" . $parent_sku . $color . '/' . $image;
  }
  return implode( ",", $return );
}

However, if you do it this way, you will have to keep the images of the parent product in the root folder. Personally, I think the previous method is easier.

Additional Resources

Add Path to Multiple Imagers Per Product with WP All Import Functions