简体   繁体   中英

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 eg http://neighborhood.swiftideas.net/product/common-projects-achilles/ .

在此输入图像描述

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"?

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

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.

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.

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"); 
    });
});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM