woocommerce how to add product image

WooCommerce. How to add multiple product images and manage product images gallery

This tutorial will show you how to add multiple product images and manage product images gallery in WooCommerce A website is a set of related web pages typically served from a single web domain. A website is hosted on at least one web server, accessible via a network such as the Internet or a private local area network through an Internet address known as a uniform resource locator (URL). All publicly accessible websites collectively constitute the World Wide Web.
Some websites require a subscription to access some or all of their content. Examples of subscription websites include many business(. ) " class="glossaryLink " >website .

Managing Featured Image is an image that is selected as the representative image for Posts, Pages or Custom Post Types.
The display of this image depends on the theme.
The featured image can be added after clicking the "Set featured image" button:
Usually, the "Featured Image" metabox is visible on the Edit Post and Edit Page screens.
However, if the button "Set featured Image" is not there, make sure it is enabled in the screen options on the top right.
‘ class="glossaryLink " >Featured image

Featured Image is an image that is selected as the representative image for Posts, Pages or Custom Post Types.
The display of this image depends on the theme.
The featured image can be added after clicking the "Set featured image" button:
Usually, the "Featured Image" metabox is visible on the Edit Post and Edit Page screens.
However, if the button "Set featured Image" is not there, make sure it is enabled in the screen options on the top right.
‘ class="glossaryLink " >Featured image is the main image for your product. It is the image which will be displayed within your product loops and the initial focus of the image gallery on your product details page.

Log into your WordPress Dashboard is the first screen you see when you log into the administration area of your blog.
The main idea of the dashboard is to give you a place where you can get an at-a-glance overview of what’s happening with your blog. You can catch up on news, view your draft posts, see who’s linking to you or how popular your content’s been, quickly put out a no-frills post, or check out and moderate your latest comments. It’s like a bird’s eye view of operations, from which you can swoop down into(. ) " class="glossaryLink " >dashboard , navigate to Products Tabs are user interface elements. Each tab has its own content and only one tab can be accessed at the same time. Users can open content of a particular tab by clicking on this tab. So, a user can access different content in the same window. Such way of content representation allows placing more content into a single page. Please check the screenshot with tabs below:
" class="glossaryLink " >tab and press on Add Product:

Name your new product. You may add long and short descriptions to it. Then click on Set Featured Image is an image that is selected as the representative image for Posts, Pages or Custom Post Types.
The display of this image depends on the theme.
The featured image can be added after clicking the "Set featured image" button:
Usually, the "Featured Image" metabox is visible on the Edit Post and Edit Page screens.
However, if the button "Set featured Image" is not there, make sure it is enabled in the screen options on the top right.
‘ class="glossaryLink " >featured image button:

Once you are in Images gallery, upload the Featured Image is an image that is selected as the representative image for Posts, Pages or Custom Post Types.
The display of this image depends on the theme.
The featured image can be added after clicking the "Set featured image" button:
Usually, the "Featured Image" metabox is visible on the Edit Post and Edit Page screens.
However, if the button "Set featured Image" is not there, make sure it is enabled in the screen options on the top right.
‘ class="glossaryLink " >featured image and determine the image settings, click on the blue Set Featured Image is an image that is selected as the representative image for Posts, Pages or Custom Post Types.
The display of this image depends on the theme.
The featured image can be added after clicking the "Set featured image" button:
Usually, the "Featured Image" metabox is visible on the Edit Post and Edit Page screens.
However, if the button "Set featured Image" is not there, make sure it is enabled in the screen options on the top right.
‘ class="glossaryLink " >featured image button to set it as the Featured Image is an image that is selected as the representative image for Posts, Pages or Custom Post Types.
The display of this image depends on the theme.
The featured image can be added after clicking the "Set featured image" button:
Usually, the "Featured Image" metabox is visible on the Edit Post and Edit Page screens.
However, if the button "Set featured Image" is not there, make sure it is enabled in the screen options on the top right.
‘ class="glossaryLink " >featured image for your product:

Managing Product Gallery

With the Featured Image is an image that is selected as the representative image for Posts, Pages or Custom Post Types.
The display of this image depends on the theme.
The featured image can be added after clicking the "Set featured image" button:
Usually, the "Featured Image" metabox is visible on the Edit Post and Edit Page screens.
However, if the button "Set featured Image" is not there, make sure it is enabled in the screen options on the top right.
‘ class="glossaryLink " >Featured Image being the primary image, product galleries simply display all images attached to a product.

In order to attach more images to your newly created product, locate a feature called Product Gallery in the right bottom corner:

Upload new images to Image gallery and select them using the same method as setting Featured Image is an image that is selected as the representative image for Posts, Pages or Custom Post Types.
The display of this image depends on the theme.
The featured image can be added after clicking the "Set featured image" button:
Usually, the "Featured Image" metabox is visible on the Edit Post and Edit Page screens.
However, if the button "Set featured Image" is not there, make sure it is enabled in the screen options on the top right.
‘ class="glossaryLink " >Featured image .

Press Add to Gallery button:

Re-ordering and removing images from product galleries

Images in the product gallery can be re-ordered easily via drag and drop. Simply re-order your images by moving them around.

To remove an image from the product gallery, hover is to hold the mouse pointer over a defined area on a web page without clicking, in order to cause some changes to appear.
For example, the text or link may become underlined or change color while the cursor is hovering over it.
Hover effects can be also applied to images. With hover effect images change shapes, colors, position, etc. which makes the website look dynamic.
" class="glossaryLink " >hover over the image and click on the red “x”:

Once you have done all that, publish your product and view it:

Feel free to check the detailed video tutorial below:

The Beginners Guide to WooCommerce: Adding Product Images & Galleries

In the previous articles we added different types of products in WooCommerce. Images in an online store provide a visual treat to the customers and give them a better idea about any product. So in this article I will explain how you can add product images or product galleries.

Product Image

The Product Image, or more precisely the featured image, serves as the main image for your product. Each product has a featured image. You should include a clear featured image and ensure that there is no text on the image. It’s my personal experience that images with text over them are less visible and more messy, leading to a situation of low CTR (Click Through Rate), whereas the images with no text in them are clicked/viewed more, leading to more sales and better ROI. As an example, you can check the featured images of Tuts+ courses.

Adding a Product Image

If you look towards the lower right side of the product editing page you will find a meta box for Product Image. You can set an image here by clicking Set product image.

Once you click it, you will be directed to an image uploader like the one shown in the above figure. From here you can either upload a new image file from your computer or you can click Media Library to select an already uploaded image as your product image.

Click the Set product image button once you are done with your selection. After this, click Save Draft (if the product is not published) or Update (if the product is published), and the product image appears on the front-end.

Product Galleries

Normally sites can have a single featured image, but an e-commerce site must have multiple images on a product to get better sales. Now the best practice here is to add at least three and at the most five images. Customers always need more than you provide them with. But that doesn’t mean you can add tens of images in gallery images. Gallery images are for a quicker view. If you want to add more images, you need to use the editor for the description of product.

Product galleries will contain all the images related to a single product. A featured or product image will also be a part of this gallery, but will be considered as the main image.

Adding a Product Gallery

To add a Product Gallery, look towards the lower right side of the page, near to the meta box for Product Image, and you will find the meta box for Product Gallery. Here, click Add product gallery images, and you will again be directed to an image uploader from where you can upload and choose images which will appear in the gallery.

Once your images are uploaded, click Add to gallery.

When you publish the product, these gallery images will appear at the front-end. The above figure shows the product image being displayed as the main image, and its related gallery images are displayed right below it. Customers may click any of these images and scroll through the entire gallery.

Reordering or Removing Images from Product Gallery

If you want to change the order of images in the gallery then you may drag and drop the images in the preferred order.

To delete or remove an image from the gallery, hover your mouse over the image you want to remove, and click the cross mark which appears in red.

To confirm these changes again, click Save Draft or Update.

This is how you can add various images for your product in any online store. If you have any queries regarding this topic, you can comment below.

Add Product Images or SKUs to WooCommerce Order Emails

Updated November 25, 2018

Read Time: 3 minutes

Share this

When WooCommerce sends order emails to your customers, by default it only includes the product name in the order items table within the email.

However, it’s possible to add some additional product details here, such as the product SKU or product featured image.

We’d previously written about adding information to WooCommerce order emails so that you could show product SKUs or product images within the WooCommerce order emails for customers. However, the process to do this was changed in a backwards-incompatible way in WooCommerce 2.5.

In previous versions of WooCommerce you were able to filter the entire email output, which made it possible to change whether images or SKUs were included.

However, with WooCommerce 2.5, the filter to change the order items table is still there, but it does not give you all of the data you need to make changes to the order items table in the email in the same way. You don’t have access to the $args that are used in the template to determine what information to show or hide, so this filter pretty much doesn’t allow you to do anything directly.

If you’re already using WooCommerce 2.5, it’s possible to change the information shown in WooCommerce emails, we just have to be a bit more creative in how we use this filter. If you follow this tutorial, be sure you know how to add custom code to your website and that you’re using WooCommerce 2.5 or newer.

Add Product Images to WooCommerce Order Emails

You can add product images to to your order emails with this filter, but we can’t modify the arguments used to get the template directly. Instead, we’ll have to call the $order->email_order_items_table() function again, but with new arguments to use. The reason this gets tricky is because if we call this function, it will call the filter we’re using, which will again call the function, which will again call our filter…you get the idea. We’ll get an infinite loop.

To modify the email output this way, we’ll need to use a static variable as a flag. This will let us only run our code once so that the email output is modified, then our code will bail out after it’s run the first time.

That’s a wrap! This will change the way the email order items table is output to include product images when emails are sent to customers.

Add SKUs to WooCommerce Order Emails

We can use pretty much the exact same code to enable product SKUs in WooCommerce order emails instead of product images.

We’ll use the same snippet as above, but replace:

This will add the SKU after the product name in this format: Product Name (#productSKU) Here’s an example of what this would look like (the images wouldn’t be there of course):

WooCommerce Order Emails: Show Both Images & SKUs

You can also add both SKUs and images to the order emails by adjusting the arguments to include both of them. The image size can be deleted if you want to use the default 32px by 32px size, or you can add your own size by adjusting the values below.

Replace your WooCommerce emails

If you want to have more control over your order email design, you can also consider using a plugin or service to replace your transactional emails. For example, you could consider using Jilt to send emails after orders are completed instead. This would allow you to use an email builder to create emails, including product images and names instead:

You can learn more about Jilt and other ways to improve your emails in our guide to customizing WooCommerce order emails.

Add Product Information to WooCommerce Order Emails

Adding product SKUs or product images to WooCommerce order emails is possible, and you can add both if desired, along with changing the size of your image as needed. Remember, the code outlined above is only for WooCommerce 2.5 or newer. If you’re still using an older version of WooCommerce, check out our previous tutorial for code compatible with your WooCommerce version.

Related content

  • Posted in: How-To, J
  • Tagged in: email, WooCommerce

Posted by Beka Rice

Beka Rice manages the direction of Sell with WP content and writes or edits most of our articles to share her interests in eCommerce. Or she just writes as an excuse to spend more time jamming out to anything from The Clash to Lady Gaga. Who knows.

26 Comments

Very interesting read, thank you! Will be looking to implement this.
Would you know a way to change the email so you have the PPP, number of products and total price?

For example:
Product Quantity PPP Total
Ninja hoodie 2 $10 $20

Afraid you’d need to override the order items and order details templates to add new columns, no easy hooks in place for this.

I have just tried this, and it works perfect on the email send to the shop-owner, but the mail send to the customer is still without images. Do you have any idea what could be wrong here?

I added the code to functions.php in my child theme.

Afraid not, I’d used this exact code in my test for customer emails so something else may be altering the email templates after this code runs.

Thanks for this! I added the snippet for SKU and Image…both are displaying in my back end confirmation email, but not the customer email. Meaning, when I receive an order, I see the image and SKU, but the customer isn’t seeing either in their confirmation. Any insight? Thanks again.

Is there a way to have the SKU on its own line?

There’s a snippet at the bottom of this section that should do the trick.

Great, worked perfectly. Thanks!!

Hey there. How can I use your code to only add the sku? Most of the code involves calling in imagery…which we didn’t want.

Also, how would we output the order number into the body of the email like it used to? Now it only displays in the email subject line. Much appreciated!

The instructions here cover adding SKUs. As for order numbers, this should still be included in every email unless you’re overriding whether it’s sent to an admin or not.

Thanks for this useful guide. It worked great on the admin email, however just like the 2 people above in the comments, this did not apply to the customer confirmation email. Any help would be much appreciated.

I tested this with customer emails and it worked as expected for me on a vanilla, so I’m not sure what else is going on with emails that would cause this for some people. Regardless, WC 2.6 adds a much-needed filter to make this simple again, so I’ll be publishing an updated post once WC 2.6 is out — keep an eye out ��

I need to display the category of the purchached product in my email-order-details.php

Please can you help me?

Hello, like many others I experience the same, where product photos show in admin email, but not for customers. I have tried to find info about this in 2.6, as you mentioned it has a new filter to make this easy. Any chance you could shed a bit more light on this`?

Leave a Reply

Your email address will not be published. Required fields are marked *