Return to previous page

Frontpage Category layout - by masseyn - on WordPress WooCommerce support

This topic has 4 replies, 2 voices, and was last updated 5 years, 10 months ago ago by Rose Tyler

masseyn

Participant

June 19, 2018 at 11:17

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?

#195148 Copied

3 Answers
Rose Tyler

Support staff

June 19, 2018 at 14:41
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
#195164 Copied
masseyn

Participant

June 19, 2018 at 15:47

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.

Please, contact administrator
for this information.

#195185 Copied Theme version: 4.3 WooCommerce version: 3.4.2
Rose Tyler

Support staff

June 20, 2018 at 08:56
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://xstore.helpscoutdocs.com/article/89-product-images (it is for xstore but for woopress the same).
Customize > Woocommerce > Product Catalog > Products per row (this for products and categories).

Regards
#195217 Copied
Viewing 4 results - 1 through 4 (of 4 total)