Archived topic

Woocommerce Sale flash

11 replies · Started by Martin on August 18, 2020

Viewing posts 1–12 of 12

August 18, 2020 at 6:32 am #1407659

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

August 18, 2020 at 7:13 am #1407721

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

August 18, 2020 at 9:03 am #1408023

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?

August 18, 2020 at 12:55 pm #1408325

Hi there,

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

August 18, 2020 at 1:00 pm #1408335

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.

August 18, 2020 at 4:16 pm #1408539

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

August 18, 2020 at 4:36 pm #1408556

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

August 19, 2020 at 2:45 am #1409098

I edited the code above - give that a shot

August 19, 2020 at 3:06 am #1409125

Hi David,

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

sold-sale flashes

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!

sold-sale-flashes2

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.

August 19, 2020 at 4:12 am #1409198

In this CSS:

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

include this property:

line-height: 21px;

August 19, 2020 at 5:09 am #1409261

Fantastic! Many thanks again.

August 19, 2020 at 5:42 am #1409305

Glad we could be of help

This archived topic is closed to new replies.

Start building better websites today.