My proposed WooCommerce fix puts the sale badge on product images in the same place on the shop page as in the Site Editor. Theme designers and store owners can place the badge in the editor and trust what they see. PR #69315 is open for review; the screenshots below show the patch applied.
The problem
On a block theme, the Product Catalog template puts an On-Sale Badge inside each Product Image. In the Site Editor, the badge sits 12px from the image’s top-right corner. On the shop page, it sits 4px from it. A theme could only change that by overriding WooCommerce’s CSS. Issue #69279 ↗
The cause is a CSS rule older than the badge’s current home. Product Image used to draw its own badge, placed 4px from the corner. When Product Image gained inner blocks, the shop page put the inner blocks container inside the image element, so the old rule caught the new badge too. In the editor, the container sits beside the image element. The rule never matched there, and the badge followed the container’s 12px padding.
The fix
The patch adds one rule: a badge inside the inner blocks container goes back to the container’s layout.
.wc-block-components-product-image__inner-container
.wc-block-components-product-sale-badge {
position: static;
transform: none;
}The old badge, which renders outside the container, keeps its 4px position. I matched the shop page to the editor rather than the other way round. The editor is where the badge gets designed, and the container’s padding and alignment rules were built for this layout. On existing stores, the badge moves 8px in from the corner. PR #69315 ↗
I reproduced the before and after in WordPress Playground on WooCommerce 11.1.2 and WordPress 7.1.2, adding the compiled rule to the plugin’s built CSS for the after capture. Left, center and right alignment all land 12px in. The PR adds an end-to-end test that compares the badge’s position in the editor and on the front end; I couldn’t run it locally. As of 2 October 2026, the PR is open and awaiting review.
Before and after
