Sold Out Badge for WooCommerce

常見問題

Is this plugin completely free?

Yes.

Can I use this plugin for commercial purposes?

Sure, go ahead! It is completely open source.

Can I change the badge text?

Yes. Go to Settings > Sold Out Badge for WooCommerce, you’ll find the setting you want.

What if this plugin isn’t compatible with my theme or doesn’t work?

You could uninstall this plugin and try to get the badge manually. There are two ways you could do it:

1. Pure CSS

If you’re lucky enough, you’ll have a specific CSS class for out-of-stock products.
You could add a SOLD OUT badge like this:

.product.outofstock:before {
     content: 'SOLD OUT';
     color: #ffffff;
     background: #FE2121;
     font-size: 16px;
     padding: 4px;
     font-weight: bold;
     width: auto;
     height: auto;
     border-radius: 0;
     z-index: 9999;
     text-align: center;
     position: absolute;
     top: 6px;
     right: auto;
     bottom: auto;
     left: 6px;
}

2. PHP + CSS

Otherwise, you could use WP hooks to add a badge. Put this code in your child theme’s functions.php:

add_action( 'woocommerce_before_shop_loop_item_title', 'my_custom_soldout_badge_display', 10 );
add_action( 'woocommerce_before_single_product_summary', 'my_custom_soldout_badge_display', 30 );

function my_custom_soldout_badge_display() {
    global $post, $product;

    if ( ! $product->is_in_stock() ) {
        echo '<span class="wcsob_soldout">SOLD OUT</span>';
    }
}

Use the following CSS code to style the badge:

.wcsob_soldout {
     content: 'SOLD OUT';
     color: #ffffff;
     background: #FE2121;
     font-size: 16px;
     padding: 4px;
     font-weight: bold;
     width: auto;
     height: auto;
     border-radius: 0;
     z-index: 9999;
     text-align: center;
     position: absolute;
     top: 6px;
     right: auto;
     bottom: auto;
     left: 6px;
}