How To Change Add To Cart, View Products, Select Options Button Text In WooCommerce

WooCommerce provides default text for their buttons. Here are the default text for all types of products in WooCommerce:

  1. Simple product – add to cart
  2. Variable product – select options
  3. Grouped product – View products

While those default text make sense, you often want to change it to something more attractive to boost your sales.

If you know PHP, you can easily change the text as you like. You can stop reading the post now. However, if you don’t know how to edit the WooCommerce functions, this post is for you.

Good news is, we are not going to mess with WooCommerce code today. That’s too risky. We are going to use a plugin that I created specifically for this purpose.

Let’s download the ultimate add to cart button customizer for WooCommerce plugin here

Now, we are going to change the WooCommerce button text for each case:

How to change add to cart text for simple product

Now, I assume that you have installed the plugin and activated it. If you click on Ultimate ATC Button->Configure buttons link on the left, you’ll see this interface:

ultimate add to cart configure buttons
ultimate add to cart configure buttons

Now you can see that at the top left section, there are three text boxes. If you want to change the add to cart text on simple products, simply add your desired text in the first box. For example, I’ll use the text “buy now”.

Make sure you scroll down and click on save changes.

Now, if I view the shop page or the product page of a simple product, I’ll see “Buy Now” instead of the default Add To Cart.

It’s simple, isn’t it?

Well, now you can guess how we can change the text for variable and grouped products.

How to change “select options”, “view products” on variable and grouped products

At this point, you will not need more hand-holding. I’ll change the text for variable and grouped products as below:

After clicking on save changes, I see the following results:

Conclusion

As you can see, changing the button text for your WooCommerce product can be very easy using the plugin. I hope you enjoy it. The plugin has a tons more options for you to fully customize your buttons.

 

 

WooCommerce Developer Cheat Sheet

This post is for WordPress/WooCommerce developer only. If you have problem implementing what I’m going to show you, please drop me a message.

How to get WooCommerce attribute label

There is a function for this purpose:

wc_attribute_label($attribute_name)

For example, the attribute name is pa_color, your name for this attribute is Color. The code above outputs “Color”

 

How to get WooCommerce Add to cart form

So currently, I’m developing a product table plugin for woocommerce. Initially, I used custom HTML code for the add to cart button. However, since I have another plugin that add styles to the add to cart button, I would love to just get the add to cart form from WooCommerce and use the styling from the custom add to cart plugin.

So, the question is how to get the Add to cart form output by WooCommerce?

It turned out, you can use this code to get the content of the form and store it in a variable:

ob_start();
                if ($this->productType == 'variable')
                {
                    wc_get_template( 'single-product/add-to-cart/variable.php', array(
                        'available_variations' => $this->product->get_available_variations(),
                        'attributes'           => $this->product->get_variation_attributes(),
                        'selected_attributes'  => $this->product->get_default_attributes()
                    ) );

                } else
                {
                    wc_get_template( 'single-product/add-to-cart/simple.php', array(

                    ) );

                }


                $data = ob_get_contents();

                ob_get_clean();

 

How to send add to cart request via ajax call and update the cart

In shop page, you will see that WooCommerce support ajax add to cart. When the customers click on add to cart button, the product is added to cart and the cart (normally at the top of the page/navigation) get updated. How can you do that?

First, you need to send an ajax request to the current url and add this:

?wc-ajax=add_to_cart

Then the parameters are:

{
product_id: id,
product_sku: "",
quantity: x
}

If it is a variable product, you need to include attribute data:

{
product_id: id,
product_sku: "",
quantity: x,
attribute_1: attribute_1_value,
attribute_2: attribute_2_value
}

Make sure you replace attribute_1/attribute_2 with actual attribute name.

Then, send the ajax request. If your request pass WooCommerce validation, the product will be added to cart and you will get this response:

wc-ajax-response

As you can see, it passes all the HTML needed and also the selectors for us to update the cart. At this point, you need to update the cart by replacing the HTML content for each elements returned in fragments.

Here is the sample code I have on my plugin:

$.post(window.location.href + "?wc-ajax=add_to_cart" , {data object here}, function(response){

    
    //update the cart
    try {
        let data = (response);
        _.each(data.fragments, function(content, index){
           $(index).html(content);
        });

    } catch (e) {
        console.log(e);

    }
});

If you now jQuery, the code above should be familiar. I use underscore to loop through all items in fragments and update HTML content for each element returned by WooCommerce.