The naming of the Add to cart button on the WooCommerce(aka Woo) shop page, category pages, and product loops is unfortunately misleading. When a product is out of stock, the label on the “Add to cart” button (or “Select options” for variable product types) changes to “Read more.”
Honestly, this doesn’t provide clear information to the customer, causing confusion.
In this guide, we’ll explore a simple trick to replace the “Read more” label with something more understandable: “Out of stock.” It’s an easy solution, so let’s get started and enhance the user experience!
PHP Snippet: Rename “Read more” Button Label
Note: take a look at the “Test” product in the screenshot above. That still shows “Read more”, so why’s that? Well, in that case the product is not out of stock, actually – it’s just not purchasable (I entered no regular price for it).
The snippet below will only act on the out of stock products. In case you wish to also include non purchasable items, you also need to run the ! $product->is_purchasable() check inside the function.
/**
* @snippet Read more > Out of stock @ WooCommerce Shop
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @testedwith WooCommerce 5
* @community https://businessbloomer.com/club/
*/
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 && ! $product->is_in_stock() ) {
return 'Out of stock';
}
return $text;
}
Where to add custom code?
You should place custom PHP in functions.php and custom CSS in style.css of your child theme.
This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again.