24
Jul
2018
Setting the categories, tags, and images for your product
After studying Setting up product categories and Creating Your First Product we will study Setting the categories, tags, and images for your product. Under the product data section, there’s a possibility to use custom fields that we also know from regular WordPress posts. We do not need that now. Always first try if you can solve your need using the standard available Attributes and Tags.
Product Categories
So far we’ve just used the main part of the product creation page. On the right, there are the well-known fields to publish the item. But before we do, we first need to take care of some other data, starting with the Product Categories. Just as with any regular WordPress post, just click the categories your product belongs to. Note that it’s possible to select more than one category.
Next, set the Product Tags by entering them in the field and just press Enter. Don’t use too many tags per product, stick to using a few. Having too many tags might lead to duplicate content because of the chance of having multiple pages with the same content increases in that case.
In the next screenshot, you see an example of as well the selected categories as some tags that were entered for this product.
Below the Product Tags, there are two areas that allow you to add two of images to your product: the Product Gallery and the Featured Image. Before we start adding images, let’s go back to the first chapter. Remember that we crossed a couple of settings that influence our image sizes?
If you want to go back there now, first save your product as a draft and then go to WooCommerce | Settings | Products | Display using the menu. The image settings are on the bottom of that tab:
There are three image sizes that will be used by WooCommerce:
- Catalog images are the image that is used in your category and tag pages when visitors are browsing through your product catalog
- Single Product Image is shown on the product page, showing a single item
- Product Thumbnails are only shown in your cart and checkout
It is important to use the same ratio for all three sizes. It’s not mandatory to keep the width and height the same, the portrait format (where the value for width is smaller than the value for height) is often used as well, especially on fashion websites.
Image and Ratio
The checkbox at the field hard crop means that if you upload an image with a different ratio, they will automatically be cropped to the correct ratio as set here. This might mean losing a part of your image. Therefore it’s always good to just prepare your images before uploading them to your website. Use the correct image ratio and use an image size that is at least as large as the dimensions of the Single Product Image.
We’re heading back to our product to start adding our images. The first and most important image is the Featured Image. Just add that by clicking on the link Set Featured Image. This will open your media library, just like you are used to from creating WordPress posts or pages.
Click Select files and open a single image from your local machine. Don’t forget to set an Alt Text and Description. Those are important for search engines! Then click the Set featured image button on the right. You’ll return to the product maintenance page. If you have multiple photos available, don’t hesitate to add those as well. Lack of good product photos is for sure a conversion killer. Click Add product gallery images and add the images you have available. Again, also for these images fill the Alt Text and Description fields. The result looks something like this:
We finished the most important steps for our product and can publish it on the top right by clicking the button Publish. Of course, we also want to have a look at the result in the front-end of our store. You may open the product page directly by clicking the button View Product on the top of the product screen
Since we are using the default Twenty Fifteen theme here, the layout of the page is okay but not more than that. Things could be better if we’d used an optimized WooCommerce theme. More on that topic will follow further, Working with WooCommerce Themes.
Product visibility options
When publishing our product there are some more options that we can use to influence the behavior of WooCommerce for this product. First navigate back to your product and edit it. On the top right we see several default WordPress fields, that we already know from regular posts like Status, Visibility, and Published on. The behavior of these fields is exactly the same as for a regular WordPress post and gives you the possibility to control if and when a product becomes visible.
Next, click on the Edit link near Catalog visibility, as shown in the following screenshot:
The default value, Catalog/search will have as a result that:
- Your product is shown on the shop and category pages
- Your product will be shown in the search result if a visitor is searching for it
The other possibilities are:
- Catalog: In this case, the product appears on the shop and category pages, but it will not be shown in search results.
- Search: In this case, the product is not shown on shop and category pages. It can only be found by a visitor by searching for it.
- Hidden: A product with the value hidden will never be shown to your visitors and is only accessible if you know the exact URL. This can be handy if you would like to offer a product to for instance your e-mail subscribers, but do not want to make the product publicly available.
Just above the Ok button, there’s a checkbox to make your product a Featured Product. Featured Product allows you to showcase specific products in different parts of your online store. You can for example show featured products in a slider on your homepage or in a widget. We’ll show those possibilities later on in this book:
Remember to click the Update button if you make any changes to your product.
Building E-Commerce Solutions with WooCommerce
This book has been written for everyone who wants to learn how to expand an existing WordPress website with e-commerce functions using the WooCommerce plugin.
