WooCommerce adding text before your add to cart with PHP

This tutorial takes a look at how to add text before the add to cart button in WordPress with WooCommerce using PHP.

In this post we’re going to take a look at a quick code snippet that helps you to add text before the WooCommerce add to cart button in WordPress.

You may want to do this to add a notice with additional product information, customer information or just a general store notice. By doing it this way you’re able to apply the text to all / or most products globally meaning you don’t have to go through each product adding the text that you would like to display one by one. With a particularly large E-commerce store this would be a relatively time consuming process / task especially if the text needs to be updated regularly.

Adding PHP to your WordPress Site:

The code snippet that we’re going to add is PHP which the majority of the WordPress platform is based on. If you’re unfamiliar with adding PHP to your website we’ll quickly cover it here but our more detailed post on how to add PHP code snippets to WordPress which you can take a look at here may provide a better general view.

So to add the snippet you will want to enter the code at the bottom of your functions.php file. You can access this within your Theme’s main folder generally. It’s important that if your theme is updated via external code e.g. a bought theme that this is added to the functions.php file within a child theme. Otherwise as soon as the theme is updated your code will be overwritten.

Using a Functions Plugin:

Another alternative is to use a functions plugin, although we’d generally suggest adding smaller snippets to your functions.php if you’re familiar with editing / managing your site a functions plugin can provide an extra level of access and reassurance for those who are just getting started with PHP and WordPress.

By using a plugin you can simply remove the plugin or the plugin will prevent the code from running if it’s incorrect depending on the one that you use. Another useful benefit to using a plugin is that they generally come with the ability to toggle the functions on / off so for example if you want to add a store wide notice for a week you can toggle it then you may need that code again for a similar event / occasion so the snippet is still there to be toggled when you’re ready for it.

One that we would recommend would be: https://en-gb.wordpress.org/plugins/my-custom-functions/

However any good PHP functions / code plugin should work with this PHP code snippet.

The Code:

add_action( 'woocommerce_before_add_to_cart_button', 'tech_typed_before_cart', 10 );
 
function tech_typed_before_cart() {
    echo '<p class="before-add-to-cart-button">Enter the text that you would like to add before the add to cart button here</p>';
}


What’s Included in the function:

So let’s take a look at what’s included in the function. Initially we add the action, this features the ‘woocommerce_before_add_to_cart_button hook which basically targets the space before the add to cart button within the WooCommerce product page.

Next up we have the function name that we’re using later which in this case is ‘tech_typed_before_cart’ you can change this to match the name of the function so that it’s relevant to your website for example the_text_before_the_cart.

In the next section we set the function (which is the same as the first time we’ve included it so tech_typed_before_cart) and we echo a HTML p class which is a set of paragraph tags that contain our text that we’d like to display.

The class is also set which here is ‘before-add-to-cart-button’ so that we can apply CSS styles.

As this HTML output just uses ‘echo’ we can change the tags to anything HTML based for for example it could be <h3 class =”before-add-to-cart-button”> </h3> or any other standard tag.

Further Reading:

CSS Button Hover

Adding CSS to WordPress

Summary:

We hope this has helped when it comes to adding text before the Add to Cart Button in WooCommerce if you did find it helpful we’d really appreciate a comment or a share, thanks!

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply

Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124