Join Patrick Rauland for an in-depth discussion in this video Add images to a product, part of WordPress Ecommerce: WooCommerce.
- [Instructor] Earlier, we added the absolute bare bones that we need for a product page, which is the title and the price. Next up are the most visual elements on the product page and that is the photo. The photo is one of the most important parts of your product page. Unfortunately, the data around what types of photos are best is still a little bit up in the air. With certain industries, you want to have a large photo and with some you want to have an image with a bit more white space around it.
If we look at this research by ConversionXL, we can see that for functional products like cameras, hard drives, and computers, a large image tends to work best. For design-heavy products like fashion, jewelry and illustrations, an image with more white space tends to work better. So for H+ Sports, since we're selling protein bars and mineral water, which are more functional, we'll want to use images that don't have too much white space. So I have an image on my desktop. Before I upload it, I'm going to do one thing. I'm going to make sure that the file names are helpful to search engine optimization or SEO.
It's hard to rename file names once they've been uploaded. So I always spend a few seconds doing this before I upload any image to my site. Here's the image I want to upload. I'm going to press Enter on my Mac just to pull this up and I'm going to get rid of this and then I'm going to make sure that all the spaces are turned into dashes. Wordpress will do that automatically for us, but I just like to make sure it's consistent and then make sure that the words in the file name are accurate. For mineral water, this is fine. Let's go ahead and upload these images.
I'll also change this image quickly, which we'll use later. We'll add some dashes. And actually, we can change this last word to something more helpful. I'll name this H+ Sports mineral water this is something that a user would actually search for so the image might actually come up this way. Product line is not something that a user would search for so we're not going to call it that. Let's go to the admin. We can click here to edit the product and if we scroll down a bit on the right side, we'll see the product image right here.
Now before I upload this, I want to show you a little trick. You can rearrange the admin panels at any point and it'll be saved that way for your account. So I'm going to click and drag this up above Tags and up above Categories and then release. The product image is important and I want to be able to see it easily on any admin page. It's much more important to me than the Categories and Tags. So I'll move it above those. Now let's go ahead and add that image. Click Set product image. We'll upload some files.
And on the desktop, I see mineral-water-blueberry. Now, we could click Set product image and it would work perfectly. But again, with a few extra seconds per image, we can add extra information to help those search robots with our SEO. For users, they don't want to see dashes. So let's change this back to regular spaces and use title case. This will show up when a user hovers over the image. So I'll copy this. The caption doesn't show up on the product page. It'll only show up if you include this exact image somewhere else on your site.
So we can skip this for now. The Alt Text is pretty helpful. Try to describe the image through text. This is what search bots as well as screen readers use. So for this, we could go a little bit more descriptive if we wanted. We could say a bottle of blueberry mineral water. The description field shows up on some Wordpress pages like image attachment pages, but most sites don't show these so you can leave this blank if you want. I usually copy and paste the alt description just in case we ever need it down the line.
Copy and paste. Now let's click Set product image. If you notice, you'll see the white and gray checkered background behind my image. That denotes transparency. I've used a .PNG file, which includes a transparent background. You don't have to use a .PNG file, but I'm choosing to. You can also use a JPG or a GIF or any image file that Wordpress allows. Let's go ahead and click Update and see what this looks like on the front end.
The product page looks so much better. If we hover over the image, we'll see the title text that we added earlier and if you click the image, it'll open into a light box and above the light box you'll see the alt description. We're almost done here. We've successfully added one very nice image, but we can do more. We can add a gallery of images so that users can scroll through them and see the different angles or different variations. Let's go back to the Edit Product page and scroll down and you'll see Product Gallery down here.
I'll click and drag that up and I'll add an image to the gallery. We'll add that other image that's on the desktop. Click Open. I'll quickly change these. And I will copy, copy and paste these. And I'll add this to the gallery. There it is. If we have multiple, we can click and drag them around, but for right now I'm happy with just one.
Let's click Update and view the product. Now I can click on this image or this image and it'll open into a light box and then we can use our arrow keys to scroll between them or click. And with that, we're done.
- Why WooCommerce?
- Installing WooCommerce
- Setting up your store
- Adding products, including images and data
- Creating a subscription product
- Setting up shipping
- Configuring payment options
- Setting up taxes
- Customizing your theme
- Connecting Google Analytics and MailChimp
- Managing orders and reports