CODEWITHSUNDEEP
phpwordpresswoocommerce
jimaroonie
jimaroonie

Reputation: 41

Changing WooCommerce out of stock badge text

We are using the Neighborhood theme on Wordpress and Woo Commerce in order to sell one-off, unique items. Stock management works well in terms of ensuring that products sold cannot be purchased again displaying the item as out of stock instead. This in principle is fine and indeed, the display of "In stock" turning to "Out of stock" under the price on the item description works no problem and we have even found code to change that display if necessary here. This works fine - adding the following code to the functions.php in the theme:

add_filter('woocommerce_stock_html', 'change_stock_message', 10, 2);
function change_stock_message($message, $stock_status) {
    if ($stock_status == "Out of stock") {
        $message = '<p class="stock out-of-stock">Sold</p>';    
    } else {
        $message = '<p class="stock in-stock">Available</p>';           
    }
    return $message;
}

However, what we really want to do is change the text in the out of stock badge that appears across the image e.g. http://neighborhood.swiftideas.net/product/common-projects-achilles/.

enter image description here

Changing the CSS is no problem so the text font, background, size etc. is easily altered adding something like this to the custom-css:

.out-of-stock-badge {
    background: red;
    font-size: 12px;
}

How to change the out-of-stock-badge text from "Out of stock" to "SOLD"?

Upvotes: 4

Views: 18485

Answers (4)

rocketmandlgc
rocketmandlgc

Reputation: 11

March 2019 The snippet you need is in a file called wc-product-loop-outofstock-flash.php in (in my case wp-content/Themes/Avada/woocommerce )

<?php if ( ! $product->is_in_stock() ) : ?>
    <div class="fusion-out-of-stock">
        <div class="fusion-position-text">
        <?php esc_attr_e( 'Fully Booked', 'Avada' ); ?>
        </div>
     </div>
<?php
endif;

Check out the results here but I cannot guarantee they will be around after May 2019 Fully booked items are at the bottom of the page

Upvotes: 1

Prajwal
Prajwal

Reputation: 1

You can use the code in your child themes header.php file

To create child theme - https://codex.wordpress.org/Child_Themes

jQuery( document ).ready(function() {
    jQuery(".onsale.oos").text(function () {
        return jQuery(this).text().replace("Out of stock", "SOLD"); 
    });
});

Upvotes: 0

jimaroonie
jimaroonie

Reputation: 41

Following @maksbd19 suggestion I found twofiles that required editing within the woocommerce folder inside the themes folder (in this case neighborhood). These are content-product.php and single-product\product-image.php. In both cases, I change the following line from 'Out of Stock' to 'Sold' as follows:

...} else if (is_out_of_stock()) {
    echo '<span class="out-of-stock-badge">' . __( 'Sold', 'swiftframework' ) . '</span>';
} else if (!$product->get_price()) {...

Hope that helps someone.

Upvotes: 0

maksbd19
maksbd19

Reputation: 3830

I don't know about the theme your are using. But I think that the following code might solve your problem-

add_filter('woocommerce_sale_flash', 'woocommerce_sale_flashmessage', 10, 2);
function woocommerce_sale_flashmessage($flash){
    global $product;
    $availability = $product->get_availability();

    if ($availability['availability'] == 'Out of stock') :
        $flash = '<span class="out-of-stock-badge">'.__( 'SOLD', 'woocommerce' ).'</span>';

    endif;
    return $flash;
}

Add this in your theme's functions.php file.

Upvotes: 0

Related Questions