This tutorial is all about how to add a photo to WooCommerce in your WordPress website. We anticipate that you have at least one exisiting product in your WooCommerce online shop.
The most complex part of adding an image to your WooCommerce shop can be getting the size (dimensions of the photo) correct in a photo editing programme like Adobe PhotoShop.
To add a product photo to WooCommerce the first thing we need to do is to log into your WordPress website, so pop your log-in URL in the Google search bar, then, when the log-in screen appears enter your User name and and password.
Once you’re logged in, navigate to the media library. This is so we can find out what size the images that are already being used in your website are.
Assuming that you already have product images in this library, select one if them by clicking on it. If you navigate to the top of the page after clicking on an existing product image you’ll see the dimensions that we need. We like them to be 1000 x 1000px, but if your existing images are not that size, make the new ones that size to keep them all consistent.
Next we will create a Photoshop master file. To create a new file make sure you’re working in pixels and dimensions we need are 1000 wide by 1000 height. The resolution for needs to be 72dpi and make sure that you select RGB colour. Don’t forget to save your file (this will be your master file that you can use for sizing any images in the future) and give it an appropriate name. We’ve called our file ProductPhotoMaster.psd and save it as a Photoshop file (.psd).
While you are still in Photoshop, open the image that you want to use in the website, select all, copy, then close this file. Return to your ProductPhotoMaster.psd file and paste the image into the template. Now, if you hit your tab key (on a Macintosh), this will hide the palettes and you’ll be able to see the edges of the transform selection, then you can scale it down and maneuver it around to however you like.
Once again hit the ‘Tab’ key so you can see your palettes then hit the Move tool apply the transformation.
Next you need to name the new layer. This is just good housekeeping. Each of the layers that we create in this template will be saved as a JPG file. This is the file that we will actually put into the media library and your WordPress website so give it an appropriate name.
As a part of the saving process, just save it as a high-quality resolution JPG, as I said we will be compressing the files that we create.
Next, to compress the file we will use a free web tool that is called Tiny jpg. Open up a new tab in your web browser and type in tinyjpg.com
Drag-and-drop your newly created JPG to the top of the page on the little window, this will compress it down and will create a really good quality image.
Download the file to your download folder on your computer and replace the JPG that you dragged into Tiny JPG.
Once that process is complete head over to the dashboard of the website and drag the new compressed image into the media library of the website.
While you are still in the website Dashboard, navigate down to the ‘Products tab’ under ‘WooCommerce tab’. Click ‘Products tab’ and you will see the actual product that we want to add the image too. Click ‘Edit’ and once that opens just navigate over to the right and you’ll see ‘Set feature imaged’. Click this and that will open up the Media library window. Now, to add a product photo to WooCommerce navigate to the image that you want to place and make sure it’s the correct one.
Scrolling up to the top of the page and hit ‘Update’, once that’s saved we’ll see how it looks.
Just make your way to the website Shop page, find the product you added the image to and see how it looks. Run your cursor over the image so you can see how it enlarges without pixelating.
This feature can be turned on or off in WooCommerce. We have it on but if it’s not working for you, you can change the settings as you prefer. Try clicking on the image, see how it opens as a Modal which is also very handy for viewing the product image without scrolling.
Well that’s all there is to it! Now you know how to add a product photo to WooCommerce in WordPress, hope you enjoyed this tutorial and make sure you join us for another how-to video from Icon Web Design, Adelaide.
As we are professional designers we are able to offer branding solutions regardless of the industry you work in.