.st0{fill:#FFFFFF;}

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

 December 29, 2020

By  NickLitten

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

WooCommerce Variable Products

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*

WooCommerce Variable Products

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

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

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

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

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

It’s really as simple as that:

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

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.

NickLitten


IBM i Software Developer, Digital Dad, AS400 Anarchist, RPG Modernizer, Shameless Trekkie, Belligerent Nerd, Englishman Abroad and Passionate Eater of Cheese and Biscuits. Nick Litten Dot Com is a mixture of blog posts that can be sometimes serious, frequently playful and probably down-right pointless all in the space of a day. Enjoy your stay, feel free to comment and remember: If at first you don't succeed then skydiving probably isn't a hobby you should look into.

Nick Litten

related posts:

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
__CONFIG_colors_palette__{"active_palette":0,"config":{"colors":{"cff50":{"name":"Main Accent","parent":-1},"a344d":{"name":"Accent Transparent","parent":"cff50"}},"gradients":[]},"palettes":[{"name":"Default","value":{"colors":{"cff50":{"val":"var(--tcb-skin-color-0)"},"a344d":{"val":"rgba(46, 138, 229, 0.85)","hsl_parent_dependency":{"h":210,"l":0.54,"s":0.78}}},"gradients":[]},"original":{"colors":{"cff50":{"val":"rgb(0, 178, 255)","hsl":{"h":198,"s":1,"l":0.5}},"a344d":{"val":"rgba(0, 178, 255, 0.85)","hsl_parent_dependency":{"h":198,"s":1,"l":0.5}}},"gradients":[]}}]}__CONFIG_colors_palette__

Get In Touch

I’m always looking for awesome input, feedback and critique!

>