SALE text over Swatch in Single Product page

Hi,

I’d like to know how to / if possible, to add a “SALE” text over the swatch variation image on the single product page.

Example: https://shop.scanimals.net/index.php/product/fortune-dragon/
Price shows as $38 with strike through and $31.50 as current price.
This discount / sale price only exists on one variation as we have a lot of stock of it.
User has to click through every swatch to find which one is on sale.
We’d like to have some “SALE” text over the swatch so user can find the item on sale quicker.
It’s possible multiple variations may have SALE

I tried using ChatGPT to build something and it suggested the following which didnt work.

## CODE SNIPPET ##
add_action('woocommerce_before_single_product_summary', 'add_sale_overlay_to_variation_images', 5);
function add_sale_overlay_to_variation_images() {
    // Check if the current user is an administrator
    if ( current_user_can('administrator') ) {
        global $product;
        if ( $product->is_on_sale() ) {
            echo '<div class="sale-overlay">SALE</div>';
        }
    }
}

## CSS ##
/* Sale overlay styling */
.sale-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: red;
    color: white;
    font-weight: bold;
    padding: 5px 10px;
    z-index: 10;
    font-size: 12px;
    text-transform: uppercase;
    border-radius: 3px;
}

.wd-swatch .sale-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 0, 0, 0.8);
    color: #fff;
    text-align: center;
    font-size: 14px;
    padding: 5px;
    font-weight: bold;
}

Any help would be greatly appreciated.

Hello,

You can disable the “Sale” label in percentage option in Shop -> Product labels and in such a way the “SALE” label will appear – https://prnt.sc/yekNoMaaupDx

Kind Regards

I dont want to disable the label.
I want to show it on the product variant image.
So when user is on single product page, the variant image shows an icon its for sale

Hello,

In Theme Settings, you can either show the label in percentage or just with the “SALE” text. Unfortunately, right now there is no option in Theme Settings available for showing the “SALE” label and at the same time showing the discount in percentage. It requires Customization and this is beyond our limitations and support policy scope. Hope you can understand our limitations.

So when you disable the “Sale” label in percentage as I mentioned here https://xtemos.com/forums/topic/sale-text-over-swatch-in-single-product-page/#post-611812 the “SALE” label will be shown.

As a workaround, you can create a custom attribute with the “SALE” name, activate this option – https://prnt.sc/tEPWNwrSAKY0 in the settings of the attribute and assign that label to some product, in such a way you can show your custom label on the product you want.

Kind Regards

[Author]

Posts