[Resolved] Woocommerce Sale flash

[Martin]

Hi,

I am having difficulty styling the Woocommerce Sale flash. Originally I styled it in Elementor but it seems they have recently deprecated much of their Woocommerce styling.

Now I’m stuck with what might be a Woocommerce flash, or it could be the theme, or some relic of Elementor. Separately I found code for a ‘Sold’ flash which I altered a bit thus (to match the Sale flash that I had originally:

php

add_action( ‘woocommerce_before_shop_loop_item_title’, function() {
global $product;
if ( !$product->is_in_stock() ) {
echo ‘<span class=”sold-out-overlay”>Sold</span>’;
}
});

css

.sold-out-overlay {
background: #CC3300;
color: #fff;
font-size: 14px;
font-weight: 600;
padding: 5px 10px;
position: absolute;
right: -25px;
top: -15px;
}

Is there a way I could add something similar for the Sale flash? I have tried various snippets that have not affected the Sale flash at all.

Thanks

[David]

Hi there,

Try replacing your current CSS with this:

..woocommerce .product ul.products li.product.sales-flash-overlay .onsale,
.sold-out-overlay {
    font-size: 14px;
    font-weight: 600;
    padding: 5px 10px;
    position: absolute;
    right: -25px;
    top: -15px;
}

/* sold out specific styles */

.sold-out-overlay {
    background: #cc3300;
    color: #fff;
}

/* Sale specific styles */
.woocommerce .product ul.products li.product.sales-flash-overlay .onsale{
    background: #1abc9c;
    color: #fff;
}

I never thought Woo could get any more complicated to style until Elementor came along lol

[Martin]

Thank you David, and especially for getting back so quickly.

Unfortunately, the Sale flash stays obstinately stuck in the top right-hand corner of the image and doesn’t behave like the Sold flash.

Any other ideas?

[Tom]

Hi there,

Do you have any examples of what it’s supposed to look like?

[Martin]

It was exactly like the red ‘Sold’ flash, but green. It disappeared when Elementor deprecated their styling.

I’m not wedded to it, it just seemed like a more effective way of drawing attention to a painting on sale than the flash being inside the image.

[David]

Where did you add the CSS i provided as it should position it and size it the same as the Sold flash – ?

[Martin]

In my child theme. Same place I have the Sold CSS.

[David]

I edited the code above – give that a shot

[Martin]

Hi David,

As you wrote it, it didn’t work. It gave me this:

But if I removed the first section and changed as follows:

/* sold out specific styles */
.sold-out-overlay {
background: #CC3300;
color: #fff;
font-size: 14px;
font-weight: 600;
padding: 5px 10px;
position: absolute;
right: -25px;
top: -15px;
}

/* Sale specific styles */
.woocommerce .product ul.products li.product.sales-flash-overlay .onsale{
background: #1abc9c;
color: #fff;
font-size: 14px;
font-weight: 600;
padding: 5px 10px;
position: absolute;
right: -25px;
top: -15px;
}

… then it works!

The only thing left is to make the flashes the same size, but if that is going to be too difficult then I will live with it as it is.

Many thanks to you and Tom for such amazing support.

[David]

In this CSS:

.woocommerce .product ul.products li.product.sales-flash-overlay .onsale

include this property:

line-height: 21px;

[Martin]

Fantastic! Many thanks again.

[David]

Glad we could be of help

[Author]

Posts