Change The “Read More” Text of the WooCommerce Button

Last modified Nov 18, 2020
Difficulty Beginner
Language PHP
Category
Change the WooCommerce Read More button text Divi Space

If you’re building a WooCommerce store, you’ll know that out-of-the-box, the WooCommerce look and feel is okay but not amazing. In a previous Divi tutorial, we gave you a snippet that would show you how to add an ‘Add to Cart’ button below your product listings. Today, we’ll show you how, with a little bit of PHP, you can take this even further to change the WooCommerce Read More button text to display as something custom.

When products are out of stock, the Add to Cart button below the product showcase automatically displays with the text of ‘Read More.’ If you want to update this and see the WooCommerce Read More button display as something else, all you’ll need is a few lines of code.

In the following Divi tutorial, you’ll get a short PHP snippet that will let you change the ‘Read More’ text to any text you like.

Do you want to skip the step-by-step tutorial? Jump straight to the code library and add this PHP snippet to your functions.php file.

Customize WooCommerce: Change the Read More Button Text to Custom Text

By default, the WooCommerce Divi Shop module displays the text “Read More” when a product is out of stock. This isn’t the most useful explanation for your shop visitors who intend to purchase goods or services.

It would be far more helpful to display text that read something along the lines of :

  • Out of stock
  • Restocking soon
  • Add to wishlist
  • Add to waitlist

The last few options suggested above can also present great email list building opportunities. Indicating that a product will be restocked soon can create urgency for your customers. Offering them an email sign up for an alert is great for not only collecting emails but also building a strong relationship with your customer.

Unfortunately, the default Read More text can’t be customized easily, so you’ll need to be a little crafty with code.

In this Divi tutorial, you’ll get a quick snippet that’ll help you sort out your online store with a quick hack for WooCommerce of changing the Read More button text to something custom.

In this tutorial, you will:

  • Add a line of PHP to the functions.php file in your child theme.

If you haven’t already set up a child theme, we recommend installing and activating one to protect your work. If you’re not sure what a child theme is, read our guide on the topic. You can also download a free Divi child theme from Divi Space.

Step 1: Add a Divi Shop Module to a Layout

To begin, add a Divi Shop module to a page or post using the Divi Builder. Note, this tutorial only works if you’ve followed our previous snippet, of making the Add to Cart button display below product listings.

Divi Snippet WooCommerce Divi Shop module default

By default, out of stock products display with a Read More button

By default, any product that is in stock will display as Add to Cart, but any products that are out of stock will show a Read More button.

Step 2: Edit the functions.php File

Next, head over to the Appearance > Theme Editor console and locate the functions.php file in your child theme.

Copy and paste in the following code before the closing PHP ?> bracket:

add_filter( 'gettext', 'ds_change_readmore_text', 20, 3 );

function ds_change_readmore_text( $translated_text, $text, $domain ) {
if ( ! is_admin() && $domain === 'woocommerce' && $translated_text === 'Read more') {
$translated_text = 'Your custom text';
}
return $translated_text;
}
Divi Snippet Change WooCommerce Divi Shop module default Read More button

Add a few lines of PHP code to change the Read More button to custom text

Any code added in between the brackets declared at $translated_text will begin to display. In the above example., the text Your custom text is set to display.

This produces the following result:

Divi Snippet WooCommerce Divi Shop module updated

View the updated button text

Do you see how the new out of stock product listing is reflecting as the text entered into the PHP code?

Easy peasy!

Alternate Text Options

You can play around an experiment with the button text by changing the declaration of $translated_text. In the following example, I’ve changed the text to reflect as ‘Add to Wishlist’.

add_filter( 'gettext', 'ds_change_readmore_text', 20, 3 );

function ds_change_readmore_text( $translated_text, $text, $domain ) {
if ( ! is_admin() && $domain === 'woocommerce' && $translated_text === 'Read more') {
$translated_text = 'Add to Wishlist';
}
return $translated_text;
}
Divi Snippet Change WooCommerce Divi Shop module default Read More button 2

Get crafty with the button text, change it to anything you like!

Now, your customers will know that they can still show their interest in a product, even if it is out of stock.

Divi Snippet WooCommerce Divi Shop module updated 2

An alternate version of the Read More button updated

With just a bit of PHP and CSS, you can improve the user experience of your WooCommerce store and create a really engaging, lasting and memorable shopping experience for your customers.

If you want more code snippets, please post your snippet requests in the comment section below!

PHP

add_filter( 'gettext', 'ds_change_readmore_text', 20, 3 );

function ds_change_readmore_text( $translated_text, $text, $domain ) {
if ( ! is_admin() && $domain === 'woocommerce' && $translated_text === 'Read more') {
$translated_text = 'Your custom text';
}
return $translated_text;
}

 

Does this snippet (still) work?

Please let us know in the comments if everything worked as expected. We have tested this code with the Version: 4.7.1 of the Divi Theme.
If you think this code saved you time, we will be happy to receive a comment!

___

License: This snippet contains code from the Divi Theme, copyright https://elegantthemes.com,  and Woocommerce Plugin by Automatic modified by Divi Space, October 29, 2020. Licensed under the GNU General Public License, no warranty; click here for details.

Your Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Receive notifications about our new blog posts.

Download Divi Layouts

FOR FREE!

Fill the form below. We will send you a link to download layouts.  You will also get notified about the future giveaways! 

Great, you've entered our giveaway! Please check your email!