Badge Style

  • Resolved Brian

    (@rgystudio)


    4 years, 1 month ago

    I have successfully changed the text of the “out of stock” badge for Woolentor product elements (used with Elementor Pro). However, I can’t seem to target it with CSS to style it a little. I just want to add a background so that it is always legible. Using Chrome’s inspector toolkit, I can add a white box with 5px padding around the text so that it’s bigger than the text, but this doesn’t work when adding it to additional CSS. Is there any way to add a background or something to the badge?
    Thanks!

    EDIT: I was able to fix this, but I can’t really understand why. In any case, the trick was to add a blank edit for the following selector, followed by the edit I had in there originally for what I thought was the right selector. Here is the full CSS I’m using that works:

    .ht-stockout ht-product-label ht-product-label-right {
}

.ht-products .ht-product .ht-product-inner .ht-product-image-wrap .ht-product-label.ht-stockout {
    padding: 5px;
    background-size: cover;
    background: white;
}
    • This topic was modified 4 years, 1 month ago by Brian.
    • This topic was modified 4 years, 1 month ago by Brian.
    • This topic was modified 4 years, 1 month ago by Brian.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Contributor Tarek Aziz

    (@tarekht)

    Hello Brian,

    Thanks a lot for reaching out to us.

    Unfortunately, this option is not available.

    Glad to know that you have been able to fix the issue.

    You didn’t see the change due to the caching issue of your browser.

    Please clear all your browser cache and it will be alright.

    No need to use the line with blank CSS.

    Best of luck!

    Hi Brian!

    I was wondering how you did to successfully change the text of the “out of stock” badge for Woolentor product elements? I used the CSS to customize it BUT didn’t succeed in changing the text OUT OF STOCK!!!

    Any help will be welcome ??

    Thread Starter Brian

    (@rgystudio)

    Hi Tufi!
    I appreciate the ask ?? I actually couldn’t remember at first, but I found it again. I used a PHP snippet (I add these using the code snippet plugin). I have two in there, one to change one of the badges/icons to “Coming Soon” (for the WooCommerce product pages) and the badge to “Roasting Soon” (the second one here, which is what targets the Woolentor product image badges). Here are both of them just in case you needed the one on the single product page like I did too:

    //change out of stock to coming soon
add_filter('woocommerce_get_availability', 'availability_filter_func');
function availability_filter_func($availability)
{
$availability['availability'] = str_ireplace('Out of stock', 'Coming Soon', $availability['availability']);
return $availability;
}
//change it on image badges
add_filter( 'woolentor_shop_out_of_stock_text','change_out_of_stock_text');
function change_out_of_stock_text($out_of_stock_text)
{
	$out_of_stock_text = str_ireplace('Out of stock', 'Roasting Soon', $out_of_stock_text);
return $out_of_stock_text;
}

    I hope this helps! Let me know if you need anything else ??

    Hi Brian! You are the guy!!!!!
    Thank you so much, i was loosing my hairs ??

    It works perfect, have a nice day!
    Tufi

    Thread Starter Brian

    (@rgystudio)

    So glad I could finally help someone else on here!! Glad it’s working for you. Have a great day yourself ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Badge Style’ is closed to new replies.