[Resolved] Woocommerce single product block – styling niggles

Home Forums Support Woocommerce single product block – styling niggles

  • This topic has 5 replies, 2 voices, and was last updated 3 months ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1338400
    Matt

    I’ve recently moved to Woocommerce blocks and have a few styling issues I’d like some help with. The Customise > Layout options don’t seem to work on blocks. note: I’m using several different product category blocks on the custom shop page.

    1. The vertical spacing of text under each product is off – there’s a Sale badge that’s way too tall and throws out formatting if the display row also contains non-sale items. Can the badge be moved above the image like the /prints/seascapes/ page?

    2. The horizontal alignment of the last row is off if the last row contains only 1 or 2 products

    There is a 3rd issue where vertical spacing is wildly inconsistent when different height product images are used – but I think it’s best I correct that with regenerating my images with consistent whitespace added.

    #1338544
    David
    Staff
    Customer Support

    Hi there,

    the Theme doesn’t control the Woocommerce Blocks styles – for some reason the Woo developers decided to abandon the templates/HTML/CSS classes that they use in their theme templates and their shortcodes.

    On your other product archives you’re using Elementor – would it not make sense to also use that here to achieve the same style ?

    #1338602
    Matt

    Oh, bummer! Does that mean the GP themes use the classic Woo implementation?

    I recently recreated my elementor shop page in blocks because:
    a) it did just as good a job for what I needed
    b) significantly improved performance now elementor is disabled on that page

    I could try the official Woo forum as they were v helpful with a recent blocks Q.

    #1338930
    David
    Staff
    Customer Support

    OK
    Then try this;

    1. Try this – adjust the top and right accordingly:

    .wc-block-grid.has-3-columns .wc-block-grid__product {
        position: relative;
    }
    .wc-block-grid__product-onsale {
        position: absolute;
        top: 10px;
        right: 10px;
    }

    You have this CSS which is making the sale badge taller:

    .wc-block-grid__product-onsale {
        font-family:Karla;
        font-size:15px;
        height:40px;
    }

    Remove the height property – instead use line-height: 1;

    2. In this CSS you have added to your child theme – include the max-width property below:

    .wc-block-grid.has-3-columns .wc-block-grid__product {
        flex: 1 0 31.33333%;
        padding: 20px 20px 10px;
        margin: 10px;
        max-width: 31.33333%;
    }
    #1339001
    Matt

    Glorious! Thanks so much David – that set me on the right path and it now looks great.

    #1339862
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.