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!
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.
I checked behavior with Childthemes “Stationary” and “Bistro”.
Hey @adrianwackernah ,
Here you can see a screenshot from my page:
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!
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.
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!
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!
