Question 3502 in Woocommerce Question posted in
The official Woocommerce documentation can be found here.

WooCommerce Blocks: Change Read More Button on Out of Stock Products

I’m trying to change the "Read More" button on the Homepage of my WooCommerce shop and I don’t figure out how to do that. The homepage is using Gutenberg Blocks to show most popular products and when I have an out of stock product in there, instead of the "Shop now" button it is one that says "Read More". I want to change that "Read More" to "Out of stock".

What I did by now:

  1. Changed the "Read More" to "Out of Stock" on the shop page, using this code:
function change_loop_add_to_cart_button( $button, $product, $args = array() ) {
    if( !$product->is_in_stock() ){
        $button = '<a class="button disabled" style="color:#000;background-color:#fff;border: 1px solid #ddd;">'.__('Out of stock', 'woocommerce').'</a>';
    }
   return $button;
}
add_filter( 'woocommerce_loop_add_to_cart_link', 'change_loop_add_to_cart_button', 20, 3 );
  1. I’ve found that the Gutenberg Block can be filtered in functions.php using this code:
    add_filter( 'woocommerce_blocks_product_grid_item_html', 'bbloomer_remove_product_grid_block_badge', 9999, 3 );
 
function bbloomer_remove_product_grid_block_badge( $html, $data, $product ) {
   return "<li class="wc-block-grid__product">
            <a href="{$data->permalink}" class="wc-block-grid__product-link">
               {$data->image}
               {$data->title}
            </a>
            {$data->price}
            {$data->rating}
            {$data->button}
         </li>";
}

What I don’t know how to do is to include an If function in the 2nd code snippet to change {$data->button} with "Out of stock" text if the product is out of stock.

Thank you!

Tags:

2

Answers


  1. 0

    the correct filter you should use is "woocommerce_product_add_to_cart_text".

    This should do the trick:

    add_filter( 'woocommerce_product_add_to_cart_text', 'bbloomer_archive_custom_cart_button_text' );
 
function bbloomer_archive_custom_cart_button_text( $text ) {
   global $product;       
   if ( ! $product->is_in_stock() ) {           
      return 'Out of stock';
   } 
   return $text;
}

    I got some inspiration from this post, which changes button text by product category, but code should be very similar

    Login or Signup to reply.
  2. 0

    So it’s been over a year and WooCommerce hasn’t released this as a configurable option that can easily be changed. So so far this is my work around (NOTE: You have to do this each time WooCommerce gets updated)

    find the following files in you WooCommerce directory; {wordpress-parent-directory}/wp-content/plugins/woocommerce/includes

    1. class-wc-product-variable.php
    2. class-wc-product-simple.php

    The under {wordpress-parent-directory}/wp-content/plugins/woocommerce/inlcudes/abstract, get

    1. abstract-wc-product.php

    In each of these find the function (function content varies but very slightly. Just look for "Read More").

    /**
 * Get the add to cart button text.
 *
 * @return string
 */
public function add_to_cart_text() {
    return apply_filters( 'woocommerce_product_add_to_cart_text', __( 'Read More', 'woocommerce' ), $this );
}

    Just change the "Read More" to "Out of Stock" or your preferred text and that should work. Again, this has to be repeated every time the WooCommerce plugin gets an update.

    I suspect the various suggestions around the web about adding a function to the themes functions.php aren’t working because it’s not really the theme that decides this but rather the plugin itself. Still trying to learn how to override that.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search