Changing the 'Read More' button text in WooCommerce: A guide

Are you looking to change the 'Read More' button in WooCommerce to something custom? With a few simple tweaks, you can change this button text to match the context of your products. Read on to learn how.

In WooCommerce, a 'Read More' button appears in place of the usual 'Add to Cart' button for products that can't be bought directly from the shop page. This happens when a product has variations, or when it is out of stock. Clicking the WooCommerce Read More button takes customers to the single product page to find out more.

The 'Read More' text doesn't tell customers much about why they can't directly add the product to their cart. This poor user experience could result in lost sales.

In this tutorial, I'll show you:

• How to easily change the Read More or Select Options button text in WooCommerce.
• And more importantly, I'll show you an even better solution 🚀. Instead of displaying a Read More button for variable products, you'll learn how to let customers select variations directly on the shop page. That way you don't need to display Read More buttons at all!

Let's get started.

Why customize the Read More button text in WooCommerce?

A Select Options or Read More button appears instead of the usual Add to Cart button when a product is either out of stock or has variations.

The button text simply says 'Read More' or 'Select Options'. It doesn't tell why customers need to click for more information before they can add the product to their cart.

Customizing this button to align with the next step customers need to take is important for a smooth buying journey.

For example, you may want to change the WooCommerce Read More button text to:

• Currently Unavailable - Informs that the product is out-of-stock and can't be purchased.
• Contact for Pricing - Indicates a product requires a custom quote.
• Learn More - Makes it clear to the customer that while they can't add the product straight to their cart, there is a way to find out more.

Use tailored Read More button text to inform customers of the next step. This helps in correctly setting customer expectations upfront, minimizes confusion, and can lead to higher conversions as a result.

But there's another way! Maybe you don't need to customize the WooCommerce Read More button

Simply changing the WooCommerce Read More button text is not the best solution when you have variable products. There is a much better approach that can significantly improve the buying experience and conversions.

The WooCommerce Express Shop Page plugin replaces the 'Read More' button on product listings with actual variation dropdowns and quantity pickers. As we saw earlier, the reason that WooCommerce displays a Read More button for variable products is because you can't buy them from the shop page. WooCommerce Express Shop Page solves this problem by making this possible after all!

With this plugin, customers can view and select variable products directly from the shop and category pages. There is no need to click through to the product page before adding products to the cart.

This comes with huge conversion benefits such as:

But I still need to change the Read More button text for out of stock products

That's right.

The WooCommerce Express Shop Page plugin fixes the problem for variable products by making them purchasable from the shop and category pages. However, a Read More button will still appear for out of stock buttons because they are genuinely not purchasable.

Before we dive into the steps to set up Express Shop Page, let's first look at how to change the WooCommerce Read More text specifically for out-of-stock products.

How do I change the Read More button text for out of stock products in WooCommerce?

There are two ways to change the text of the Read More button on your product archive pages. Whether you prefer a simple solution using a plugin or want to modify the code directly, both methods are available. In this section, I’ll walk you through both methods, so you can choose the one that works best for you.

Method 1. Using the Loco Translate plugin

Loco Translate is a WordPress translation plugin that lets you edit and translate texts on your website. This means you can use it to change a specific text on the website to use different words. In our case, we can use it to output the 'Read more' text as 'Currently unavailable.

Here are the steps to do it:

1. Install and activate the Loco Translate plugin in your WordPress dashboard.
   

   

2. In the WordPress admin menu, go to Loco Translate → Plugins and click on WooCommerce.
3. Next, click the 'New language' button and select the language that is currently installed on your WordPress site. For location, choose Custom. Once selected, click 'Start translating' to save your settings.
   

   

4. In the Filter translation search bar, type 'Read More' to find the text string and click on it.
5. In the edit window, change the text to your preferred wording, for example, "Out of Stock" or "Currently unavailable".
   

   

6. Click Save to update the words.

Now, when you visit your store on the frontend, the updated "Currently available" button text will appear in place of the "Read more" text.

Method 2. Using PHP snippets

There's another method that doesn't require the installation of any plugins but is a bit complicated as it involves tinkering with the code. But don't worry, we'll provide you the code, which you simply have to paste at a specific location.

We recommend that you add this code to a child theme. Doing this ensure that your code snippets are not overwritten when the theme is updated.

Here are the steps to do it:

1. Open your child theme's functions.php file by navigating to Appearance → Theme File Editor. If this is the first time you are visiting this page, a notice will pop up. Click 'I understand' to close it.
2. Scroll down and add the following lines of code to the end of the file:

   add_filter( 'woocommerce_product_add_to_cart_text', 'custom_oos_text', 10, 2 );
   function custom_oos_text( $text, $product ) {
   if ( ! $product->is_in_stock() ) {
   $text = __( 'Your new text here', 'woocommerce' );
   }
   return $text;
   }

3. In the custom code, change "Your new text here" to your desired read more button text such as "Currently unavailable."
4. Save the functions.php file and visit the shop page to view the changes.

The above methods are good if you simply want to change the Read More button text for out-of-stock products. You don't need to make any custom CSS, HTML or template changes - you're simply customizing the text of the button.

However, as we saw before, this isn't a good solution for variable products. They are genuinely purchasable, so it's not fair to force customers to visit a separate page to choose their options. It's better to allow customers to select variations and click the Add to Cart button directly on the shop homepage. And this is where the WooCommerce Express Shop Page plugin comes in.

To truly optimize the buying experience for variable products, the next section will cover how to use it to replace the Read More button with variation selectors.

Show variations on the shop page instead of a WooCommerce Read More button

The WooCommerce Express Shop Page plugin replaces the standard Read More button with dropdowns to select variations, plus a quantity selector and an Add to Cart button.

With this WooCommerce plugin:

Setting up the plugin is straightforward:

1. Start off by purchasing the plugin.
2. Once you've got the plugin file, navigate to Plugins → Add New to upload it to your WordPress dashboard.
3. Once activated, the setup wizard will start.

The plugin gives you total control over where you want to change the Read More text on the WooCommerce shop page. Tick the Shop Page option to add variation dropdowns to the shop page, and the Category Pages option to change it on the taxonomy pages.

The same options are also available in the WooCommerce settings, which you can find by navigating to WooCommerce → Settings → Products → Express shop page.

That's it! Now, head to the frontend of your WooCommerce store to view the 'Read More' text changed to a quantity picker and dropdown field.

Customers can visit the shop page and add variable products directly to the cart. They can then proceed straight to the checkout page to complete their order.

Transform the WooCommerce Read More button today!

The Read More button in WooCommerce appears when the product is out-of-stock or has variable options. This may be confusing to customers and harm your conversions, especially for variable products.

You can easily customize this text by either using a translation plugin or tweaking the code. While this is okay for out-of-stock products, it doesn’t provide the ideal user experience for variable products.

A better solution is to use the WooCommerce Express Shop Page plugin, which shows variations directly on shop and category pages. This allows customers to view options, select them, and add items to their cart without changing pages. It results in a smoother and faster buying experience that increases sales.

Get the WooCommerce Express Shop Page plugin today for the best product buying experience!