This topic has 4 replies, 2 voices, and was last updated 6 years, 4 months ago ago by Rose Tyler
On our site https://www.blccs.co.uk we want the product categories on the front page to look similar to this image https://www.blccs.co.uk/wp-content/uploads/2014/12/FallProtection-Cat-full.jpg
We would like 4 categories per row and for it to show 12 or 16 categories.
How do we amend the code for the front images to display like this? If we have to use an image rather than adjusting the code, what size should each image be?
Hello,
You can edit your category images using an image editor and hide the default block with information using this custom css code:
.categories-mask {
display: none;
}
Please check settings in Customize > Woocommerce > Product Catalog and Product images
https://docs.woocommerce.com/document/fixing-blurry-product-images/
Regards
ok that kinda works. The only issue is now I will need to create an image for every single category… Is there a way to have the title at the top with a coloured background and remove Read More like my first image on the home page…..
Also what are the best sizes for these images so they fit best on both desktop and mobile.
Also how do I make this 4 categories per row?
Thanks for the help so far.
Hello,
You can change the previous custom css code to https://prnt.sc/jx1nl0 :
.categories-mask {
background-color: #e26f00;
text-align: left;
padding-bottom: 3px;
padding-top: 8px;
width: 96%;
margin-right: 2%;
top: 0;
bottom: auto;
}
.categories-mask span.more {
display: none;
}
.categories-mask span, .categories-mask h4 {
color: white !important;
text-transform: none;
margin-bottom: 3px;
}
.product-category:hover .categories-mask {
background-color: #e26f00;
}
The size depends on your needs, but on our demo, we use 450×600. Please read this article https://www.8theme.com/documentation/xstore/woocommerce/product-images/ (it is for xstore but for woopress the same).
Customize > Woocommerce > Product Catalog > Products per row (this for products and categories).
Regards
You must be logged in to reply to this topic.Log in/Sign up