[Resolved] Woocommerce Sale flash

Home Forums Support Woocommerce Sale flash

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1407659
    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

    #1407721
    David
    Staff
    Customer Support

    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

    #1408023
    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?

    #1408325
    Tom
    Lead Developer
    Lead Developer

    Hi there,

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

    #1408335
    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.

    #1408539
    David
    Staff
    Customer Support

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

    #1408556
    Martin

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

    #1409098
    David
    Staff
    Customer Support

    I edited the code above – give that a shot

    #1409125
    Martin

    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.

    #1409198
    David
    Staff
    Customer Support

    In this CSS:

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

    include this property:

    line-height: 21px;

    #1409261
    Martin

    Fantastic! Many thanks again.

    #1409305
    David
    Staff
    Customer Support

    Glad we could be of help

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.