How to Insert Read More on Product Page in Woo Commerce
If you're edifice a WooCommerce store, yous'll know that out-of-the-box, the WooCommerce look and feel is okay but non astonishing. In a previous Divi tutorial, we gave y'all a snippet that would prove you how to add an 'Add to Cart' button below your product listings. Today, nosotros'll evidence you how, with a piddling scrap of PHP, you can take this even further to alter the WooCommerce Read More push button text to brandish as something custom.
When products are out of stock, the Add to Cart push below the product showcase automatically displays with the text of 'Read More.' If you lot want to update this and see the WooCommerce Read More than button display as something else, all you lot'll demand is a few lines of code.
In the following Divi tutorial, yous'll become a short PHP snippet that will let you change the 'Read More' text to any text you lot like.
Do y'all want to skip the step-past-step tutorial? Jump straight to the lawmaking 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 Store module displays the text "Read More than" when a product is out of stock. This isn't the virtually useful explanation for your store 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 before long
- Add to wishlist
- Add together to waitlist
The concluding few options suggested higher up tin besides nowadays great email list edifice opportunities. Indicating that a product volition be restocked presently can create urgency for your customers. Offering them an electronic mail sign upwards for an alert is keen for not only collecting emails but also edifice a potent relationship with your client.
Unfortunately, the default Read More text can't be customized hands, so you lot'll need to be a little crafty with code.
In this Divi tutorial, you'll get a quick snippet that'll help you lot sort out your online shop with a quick hack for WooCommerce of changing the Read More button text to something custom.
In this tutorial, y'all will:
- Add a line of PHP to the functions.php file in your child theme.
If you haven't already fix a kid theme, we recommend installing and activating one to protect your work. If yous're not sure what a child theme is, read our guide on the topic. Yous tin also download a costless Divi child theme from Divi Space.
Step i: Add a Divi Store Module to a Layout
To begin, add a Divi Shop module to a page or post using the Divi Builder. Note, this tutorial but works if you've followed our previous snippet, of making the Add to Cart button display below product listings.
Past default, out of stock products display with a Read More button
Past default, whatever production that is in stock volition display as Add together to Cart, only whatsoever products that are out of stock will show a Read More than button.
Pace 2: Edit the functions.php File
Next, head over to the Advent > Theme Editor console and locate the functions.php file in your kid theme.
Copy and paste in the following lawmaking before the closing PHP ?> bracket:
add_filter( 'gettext', 'ds_change_readmore_text', twenty, 3 ); office ds_change_readmore_text( $translated_text, $text, $domain ) { if ( ! is_admin() && $domain === 'woocommerce' && $translated_text === 'Read more than') { $translated_text = 'Your custom text'; } return $translated_text; } 
Add together 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 brandish. In the above case., the text Your custom text is set to display.
This produces the following issue:
View the updated button text
Do you see how the new out of stock production listing is reflecting as the text entered into the PHP lawmaking?
Like shooting fish in a barrel peasy!
Alternating Text Options
You can play around an experiment with the button text by changing the declaration of $translated_text. In the following instance, I've changed the text to reverberate as 'Add to Wishlist'.
add_filter( 'gettext', 'ds_change_readmore_text', twenty, 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; } 
Get crafty with the button text, change it to anything you like!
Now, your customers will know that they tin can still show their interest in a product, even if information technology is out of stock.
An alternate version of the Read More than button updated
With but 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 lot want more code snippets, delight mail service your snippet requests in the comment section below!
Source: https://divi.space/wordpress-and-divi-code-snippets/woocommerce-change-read-more-button-text/
0 Response to "How to Insert Read More on Product Page in Woo Commerce"
Post a Comment