Support » Plugin: WooCommerce » Sold Out badge/label/ribbon/tag

  • Resolved nmssxty

    (@nmssxty)


    Hello,

    I am quite new to wordpress and woocommerce. My products on my woocommerce shop appear as in stock until you actually go into the product page, select the age you want and then it displays the message that the product is out of stock.

    Thats quite a bad customer journey, I just wanted my badge/label/sticker to say out of stock on the product thumbnail when in the main page just like it can say “sale”. I get the sale badge no problems.

    So I thought this was something that woocommerce simply didnt do, so I have been searching around looking for a plugin to do this, but it just came to me that woocommerce should be showing a sold out badge and it might be something wrong with my site.

    Could anyone help me out and let me know if woocommerce is meant to show an out of stock badge/label please?

    Thank you in advance

    Nicola

    https://wordpress.org/plugins/woocommerce/

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Support D Smith a11n

    (@dsmithweb)

    Automattic Happiness Engineer

    Hi Nicola!

    I know this isn’t exactly what you asked, but I just wanted to note you can use Inventory Options to conceal out-of-stock items from the catalog.

    As it currently stands, to change how out-of-stock items are displayed in the catalog you’d need either a theme that has that option built-in, or you’ll need to wrangle a little code– this gentleman here offers a working example of what you’re looking for. Please bear in mind that WooCommerce support can’t help you troubleshoot or address issues with customizations.

    All Best,
    Damien

    Thread Starter nmssxty

    (@nmssxty)

    Hello,

    Thank you for your reply!

    So woocommerce does not show a sold out badge for anyone then?

    I know about that option in the inventory thank you, i have it set to show sold out items already. My issue is just that I want to show all my sold out items on my catalogue pages but I want them to have a badge saying sold out on the catalogue page with the badge/label across the image.

    Thank you for linking to that page with the code, I tried it out but it now just says sold out under the product photo thumbnail, not in a label/badge across the image.

    I am using the popular Customizer theme so I can’t see that they wouldn’t include functionality for sold out badges 🤔

    I have now been at this literally all day amd pulling my hair out.

    Thank you again

    Nicola

    Caleb Burks

    (@icaleb)

    Automattic Happiness Engineer

    Products that are out of stock do have their buttons change to “read more”, and a html class is added: http://cld.wthms.co/6EYL/ztiXl07e

    So with css you could add in a label, or you can do so with a PHP snippet like:

    add_action( 'woocommerce_after_shop_loop_item_title', 'wc_ninja_outofstock_notify_on_archives', 10 );
    function wc_ninja_outofstock_notify_on_archives() {
    	global $product;
    	if ( ! $product->managing_stock() && ! $product->is_in_stock() ) {
    		 echo '<p class="stock out-of-stock">Out of Stock</p>';
    	}
    }
    Thread Starter nmssxty

    (@nmssxty)

    Wow thank you 😊

    I managed to find a plugin thay does the job although it gives a sticker that doesn’t match the woocommerce sale ones and it’s not at the same position either, it doesn’t look the best so I will give this code a go when I get home, thank you 😊😊😊

    Nicola

    Which plugin are you using?

    If it’s just a cosmetic thing you want and you’re comfortable with using CSS you can do something like this:

    li.outofstock .price:after {
        content: "Sold out";
        font-size: 2em;
        background: rgba(0, 0, 0, 0);
        text-transform: uppercase;
        text-shadow: 0px -1px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000, 0px 1px 0 #000;
        position: absolute;
        width: 100%;
        text-align: center;
        display: block;
        color: #fff;
        opacity: 0.7;
        line-height: normal;
        top: 30%;
        -webkit-transform: rotate(15deg);
        -moz-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
        -o-transform: rotate(15deg);
    }

    It’ll probably need a bit of tweaking to make it work nicely in responsive themes.

    Thanks Emily @empom, it worked!

    • This reply was modified 4 years, 3 months ago by S1awek.

    Thank you, Emily @empom. Tried it and it works!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Sold Out badge/label/ribbon/tag’ is closed to new replies.