How to Change WooCommerce Variable Products “Select Options” to “Add to cart”

UPDATED – Since I wrote this original blog with the (slightly complex) PHP instructions on how to set ADD TO CART, a new WordPress Plugin was released to do this at the click of a button. Check out the bottom of this page in the section titled “The Easy Way – WordPress Plugin WooCommerce Customizer” 🙂

WooCommerce Variable Products

Working on the Snug CBD website this morning, I found that the when you add a SIMPLE PRODUCT to WooCommerce it shows the BUY NOW text as ADD TO CART by default. But when you use a WooCommerce VARIABLE PRODUCT the default text says SELECT OPTIONS

This looks ugly, but I need to use variable products to handle various packaging sizes, flavours, strengths etc.

I want these variable product types to say ADD TO CART the same as the simple products and product bundles — How can I do this?

We have two ways of doing this:

1. The Hard Way – writing some PHP script to over-ride the text defaults ourselves and
2. The Easy Way – installing a plugin to change the text for us automatically

The Hard Way – Manually Add PHP

Let’s add a little PHP code to over-ride the value of the text in the button to change SELECT OPTIONS to ADD TO CART for VARIABLE PRODUCTS

Changing it as “Add to Cart” is done using a PHP code snippet that you can (a) add to your function.php in your child theme or (b) use a code snippet plugin like My Custom Functions to add the PHP script – this is my preferred technique

The code looks like this:

add_filter('woocommerce_product_add_to_cart_text', function ($text) {
     global $product;
     if ($product instanceof WC_Product && $product->is_type('variable')) {
         $text = $product->is_purchasable() ? ('Add to cart', 'woocommerce')             : ('Read more', 'woocommerce');
     }
     return $text;
 }, 10);

Activate this code snippet and *boom*

NOTE: Double, treble, and quadruple check the PHP code will work on your site! Warning, if you make a typo when entering the PHP into My Custom Functions it could break your website. If you add incorrect PHO you will break yourwebsite. BUT DONT PANIC!

This plugin has a built-in functions for checking the custom PHP code for syntax errors, duplicate functions names, and etc. But plugin is not perfect, so there are times when the entered custom PHP code causes an error and white screen. This is due to the fact that your custom PHP code has a syntax error that this plugin could not detect. When this happens with you just do the following and all will be fine.

1. Via FTP, go to the plugin folder (in ‘wp-content/plugins/my-custom-functions/‘).
2. Rename the START file to STOP. This will stop the execution of your custom code.
3. Return to the plugin settings page and edit/fix your custom PHP code that you entered before the crash.
4. Rename the STOP file to START and you’re done!

The Easy Way – WordPress Plugin WooCommerce Customizer

WooCommerce Customizer is a neat little plugin that adds extra customization options to WooCommerce. You never would have guessed that from it name right??

Step 1 – Download WooCommerce Customizer

Either download it manually and upload or select it from the ADD PLUGINS screen in WordPress

Step 2 – Install Plugin

Step 3 – Add new button text for buttons in Plugin Settings

Step 4 – Sit back and sip your cup of tea while admiring your new website

It’s really as simple as that:

So which technique is best?

Watch me Add this PHP code snippet to WordPress in Realtime and then install the Customizer plugin to do the same thing:

FINAL Recommendation

Install WooCommerce Customizer and let it do the heavy lifting for you.