How to Customize the “Add to Cart” Button in WooCommerce with PHP

The “add to cart” button is probably the most important one in any E-commerce store. By default, WooCommerce allows little customization to the button. Often users end up in a situation where they need to change the text on the button, change colors, add text below or above it. Depending on the WordPress theme you are using, the method for customizing the “add to cart” button may vary. However, for most themes, the following methods will work.

Why you need it

The ultimate goal of any E-commerce store is to convert visitors into paying customers. It is important to have a clear call to action and ensure your visitors are aware of the action they need to take. The “add to cart” button should stand out on the product page. It should have a clear text describing what the visitors should do. Below is an example of a well-customized “add to cart button” on the product page.

The “add to cart” button is clearly visible on the product page, it is above the product details, the bright green color makes it stand out, it occupies a significant amount of space and the text on the button says “Buy it now” instead of “Add to cart” which is more persuasive.

1. Changing the “add to cart” button’s text

To do this you will need to add the following code to the functions.php file of your theme:

add_filter( 'woocommerce_product_single_add_to_cart_text', 'wpfactory_wc_custom_single_product_add_to_cart_text', 10, 2 );
if ( ! function_exists( 'wpfactory_wc_custom_single_product_add_to_cart_text' ) ) {
    /**
     * Changes "add to cart" button text on single product page.
     */
    function wpfactory_wc_custom_single_product_add_to_cart_text( $text, $product ) {
        return 'Add item';
    }
}

You can change “Add item” with whatever you want the text to read. For example: “Buy now”, “Book now”, “Buy me” etc.

And to change button text on archives (e.g. shop, category page):

add_filter( 'woocommerce_product_add_to_cart_text', 'wpfactory_wc_custom_loop_add_to_cart_text', 10, 2 );
if ( ! function_exists( 'wpfactory_wc_custom_loop_add_to_cart_text' ) ) {
    /**
     * Changes "add to cart" button text on archives (e.g. shop, category page).
     */
    function wpfactory_wc_custom_loop_add_to_cart_text( $text, $product ) {
        return 'Buy it now';
    }
}

2. Adding text above the button

Sometimes you may want to add text above the “add to cart” button. Most themes will display the “Product Short Description” field above the “add to cart” button. In case you want to display some text throughout the website on all product pages, above the “add to cart”, you can easily do this. This will come in handy if you want to display a notice, for example, if you are offering free shipping for a limited time, you can use this to notify visitors.

This will also involve adding the following code to the functions.php file:

add_action( 'woocommerce_single_product_summary', 'wpfactory_wc_add_text_above_add_to_cart_button', 20 );
if( ! function_exists( 'wpfactory_wc_add_text_above_add_to_cart_button' ) ) {
    /**
     * Adds text above the "add to cart" button on single product page.
     */
    function wpfactory_wc_add_text_above_add_to_cart_button() {
        echo 'Free shipping!';
    }
}

Remember to change the “Free shipping!” text to whatever text you want to display above the button.

3. Changing the color of the button

Ideally, the color of your “add to cart” button should match the overall design of your website and be consistent with your branding. Most WordPress themes will use a primary color, and this is the same color that will be used on buttons throughout your website. Sometimes though, you will want to change the color to make the button stand out. To change the style of the add to cart button, you will need to add the following CSS code to your theme’s stylesheet, usually the style.css file for most themes. Or you could add it to “Customize > Additional CSS”.

/* "Add to cart" button on single product page */
.single-product .product .single_add_to_cart_button.button {
    background-color: #333333;
    color: #FFFFFF;
}
/* "Add to cart" button on archives (e.g. shop, category page) */
.woocommerce .product .add_to_cart_button.button {
    background-color: #333333;
    color: #FFFFFF;
}

Often you will be overriding existing styles. This will mean you will have to choose highly specific selectors. The above code works for the default WordPress 2019 theme. To find out which selectors you may have to use you can use the inspect function of most modern browsers. Simply right-click on the product page of your website and click on “Inspect”.

This will open the inspect tool. Using the selection option click on the “add to cart” button. You will now be able to see the selector that you will have to refer to in the custom CSS to change the styling of the button. An example is shown below.

Conclusion

Customizing the “add to cart” button involves adding code to your theme’s file. One disadvantage of this is your customizations can be lost with a theme update. It is therefore recommended to always use a WordPress child theme when making such customizations. Or alternatively, you could use a plugin for that. The plugin has more additional options as well, for example, setting text on per product basis or displaying different text if the product was already added to the cart.