How to add a category image before the WooCommerce product grid.
Learn how to add a category image before the WooCommerce product grid.
2020-12-28
1. Get an image URL
The first thing we need is to find an image on the Internet. In my case, I generated this image using Vampixel. The chosen image will be used as the image of our WooCommerce product category. So, copy the image address now.
2. Create a category
I suppose you already have the WooCommerce plugin installed, right? Then in the side menu of WordPress you should access Products. And then Categories. Enter the name of the category. You can still define Slug and Parent Category, but it will not be necessary in this example.
3. Set the category image
Locate the "Featured image" box and paste the image address in the "Image URL" field. If this field is not available, it will be necessary to install the Featured Image from URL (FIFU) plugin. Finally, to finish the creation, click on the "Add new category" button. It is not necessary to change other fields.
4. List categories
"My Category" is ready. Configuring the theme properly, products and categories will be displayed on the same grid with their respective images. This is the standard behavior of WooCommerce. What is not standard is the display of the category image immediately before the product grid of that category. We will see how this can be done below. But first, let's create some products for our new category.
5. Create a product
Here we are creating our first product. To open the editor, access "Products" and click on "Add New" button. You are free to define the title, price and featured image. But the product category must be exactly the same category that was created in the previous step.
6. Create another product
We are now creating a second product. Again, you are free to set the title, price and featured image. And also several other fields according to your needs. But for the category field, we will choose "My category", which was the category created earlier.
7. Check the category page
Access the category page now. As you can see, the category title and also the products in that category are displayed. However, the category image is not displayed by default. This can be done, as shown below.
8. Enable category image on grid
Access the Featured Image from URL plugin settings. Then access the "WooCommerce" tab and go to the "Category Image on Grid" functionality. Activate the toggle and you're done. The category image should now be displayed before its product grid.
9. Check the result
And it's done! We then accessed the category page and this time we found the image of the category immediately before the product grid, as we wanted. We achieved our goal. And to undo the change, we just need to access the Featured Image from URL plugin settings and disable the functionality.
