Frontpage Category layout - by masseyn - on WordPress WooCommerce support

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

  • Avatar: masseyn
    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?

    3 Answers
    Avatar: Rose Tyler
    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

    Avatar: masseyn
    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.
    Avatar: Rose Tyler
    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://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

  • Viewing 4 results - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.Log in/Sign up

8theme customization service
We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.