• Resolved adrianwackernah

    (@adrianwackernah)


    I bought a child theme for Storefront at woo and created a static homepage with it. But I wondered at using a block for displaying products which are for sale and their look was digferent from what I expected from child theme. For example child theme put a flag ?Sale“ on product images, blocks do not. So I gave the shortcodes for displaying products on sale on page and than design is shown.

    What I like to have is that blocks need to use theme css in case of design.

    Link to page with trouble uses now shortcode instead block for products on sale.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Support Dani F. a11n

    (@danielinhou)

    Hi @adrianwackernah ????

    So I have created a page where I display a product using blocks and then again using shortcodes and, as you can see here, the display is very similar, including the sale notice.

    Could you please share the Storefront child theme that you are using, I would like to test this and then pass the feedback to the theme developers.

    Cheers!

    Thread Starter adrianwackernah

    (@adrianwackernah)

    Hi @danielinhou

    on your page I can not see a sale badge.

    Well, I created a page where I show a on sale product side by side as block and shortcode. They look different.

    Thread Starter adrianwackernah

    (@adrianwackernah)

    I checked behavior with Childthemes “Stationary” and “Bistro”.

    Plugin Support Dani F. a11n

    (@danielinhou)

    Hey @adrianwackernah ,

    Here you can see a screenshot from my page:

    Products on sale
    Link to image: https://d.pr/i/fKAi0R

    I can’t see the products on the page that you listed:
    https://bremerhaven-shopping.de/sale/

    Could you please share the link again? I would be happy to review it and then try this on my test site too.

    Cheers!

    Thread Starter adrianwackernah

    (@adrianwackernah)

    Sorry @danielinhou

    in the meantime the product on sale had reached the date to which the sale ends.

    The link is still correct and I have set another product for sale. Please take a look at given link again.

    Plugin Support Dani F. a11n

    (@danielinhou)

    Hi there @adrianwackernah

    Thanks for the time you devoted to explaining this to me, I really appreciate it.

    So the Gutenberg Product Blocks are still under active development and not all the child themes have been completely updated to reproduce the same functionality that was implemented for the shortcodes.

    If you let me know which is the active child theme I will let this know to the theme developers so that it is doesn’t fall under their radar.

    In the meantime, I have gone ahead and created this snippet of CSS that would add the ‘sale’ notice for the Block in the same way it was added for the shortcode. You can use this code under Appearance > Customize > Additional CSS, you can add the following code:

    
    .wc-block-grid__product-onsale:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 100%;
        border: 25px solid transparent;
        border-left-width: 0;
    }
    .wc-block-grid__product-onsale {
       position: absolute;
        top: 1em;
        left: -1em;
        border: 0;
        padding: 0 1.387em;
        border-radius: 0;
        height: 50px;
        line-height: 50px;
        display: inline-block;
        z-index: 9;
        background-color: #EAC355;
        color: #421A17;
    
    }
    .wc-block-grid__product-onsale:before {
        border-top-color: #EAC355;
        border-bottom-color: #EAC355;
    }

    I hope this helps!

    Plugin Support Dani F. a11n

    (@danielinhou)

    Hi again ????,

    We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

    Cheers!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Theme styles should be used in case of blocks’ is closed to new replies.