Blog: WordPress
NInja in Fog

How To Change Place Order Text In WooCommerce Checkout

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

WooCommerce is the most popular e-commerce platform on WordPress, and one of the most used e-commerce platforms overall. But part of staying on top is continually improving little things.

One thing the development team at WooCommerce might consider is the ability to easily change the default text of the payment button on the Checkout page. This button text defaults to read Place order. While this is a good default, this is not always optimal. Here’s why.

A client recently asked me to diagnose why customers were getting confused at the checkout screen when using the Pay with credit card option. The other clue is no one was hesitating to order when using PayPal to order. What I discovered was fascinating.

WooCommerce has PayPal enabled as a payment option by default. When customers select PayPal to checkout, the checkout button reads, Proceed to PayPal. But customers who tried to pay with their credit card saw the standard checkout button, which reads Place order — but no place to enter credit card information.

It turns out that WooCommerce websites that use the Authorize.net DPM for credit card payments take the credit card information on a subsequent page, after the customer enters their billing and shipping address. But the text Place order can lead people to believe that they should be on the final step, not that they should be expecting another page.

What I did to solve this problem was change the default “Place order” text with something that indicated to customers that they would be directed to a page right after this to enter their credit card details. This resulted in less cart abandonment and increased conversions on the checkout page.

You might encounter a situation where changing the text on the checkout page button would be beneficial for your particular website. The following code snippet works in WooCommerce versions 2.1 and higher. Place this in your functions.php file and change the button text to fit your needs. The filter we’re adding — woocommerce_order_button_text — changes the output of the button text to whatever is included in our accompanying function, woo_custom_order_button_text().


/* Add to the functions.php file of your theme */

add_filter( 'woocommerce_order_button_text', 'woo_custom_order_button_text' ); 

function woo_custom_order_button_text() {
    return __( 'Your new button text here', 'woocommerce' ); 
}

What If This Doesn’t Work?

Some themes override this function, because they have their own version of this function in place. When this happens, you can use a plugin called Say What? to replace this translatable text strings in your theme.

Many popular plugins allow labels and buttons to be translated into different languages. For the non-technical readers out there, it’s enough to know that certain buttons can be changed through this method.

After you install and activate Say What?, you can find it under Tools > Text Changes.

Click Add New on the Text Changes screen.

If you wanted to change the Proceed to Checkout text to Complete Order, here’s how you would fill out the text change form:

  • Under Original string, put Proceed to Checkout (or whatever the default text is).
  • Under Text domain, put woocommerce. (This is the plugin text domain).
  • Under Replacement String, put Complete Order (or whatever you want the button text to say).

Text Changes -> Add New

This should work in many cases where the code snippet is being overridden by your WordPress theme.

Still Can’t Get the Button Text To Change?

Your particular theme and plugin configuration may be overriding these two methods above. One thing you can do is add a custom function that looks for translatable text, and swaps out the default instance for your replacement text.

This snippet goes in your functions.php file.



/**
 * Change Proceed to Checkout text in WooCommerce via text replacement
 *
 */

add_filter( 'gettext', 'ld_custom_checkout_button_text', 20, 3 );
function ld_custom_checkout_button_text( $translated_text, $text, $domain ) {
    switch ( $translated_text ) {
    case 'Proceed to Checkout' :
    $translated_text = __( 'Complete Checkout', 'woocommerce' );
    break;
}
return $translated_text;
}

We used this method to change the PayPal button text in WooCommerce, so if looks familiar, that’s why.

A More Extreme Method: Overriding the Template File

You can always override the default template for the Checkout button directly, by adding your own modified template.

In many commercial themes sold on places like ThemeForest, this is exactly what happens. (Now, theme authors shouldn’t bundle plugins into their themes for numerous reasons, but that’s another post).

If you have a premium theme, and you suspect WooCommerce is already included in there (and you want to keep this theme — though I advise you don’t} — check in the theme files (or have your developer check) for a folder structure like this:

/wp-content/themes/mytheme/woocommerce/cart/proceed-to-checkout-button.php

If you see something like that, this could be the root of your problems.

If you don’t see this, you can create a directory structure like this and add it to your theme. You can grab the current version of the proceed-to-checkout-button.php from the WooCommerce GitHub repo.

A few things to remember if you go this route:

  • Always use a child theme. Don’t modify your parent theme directly, or all your changes will be wiped out when you update it. Here’s an article, if you need help setting up a child theme in WordPress.
  • Test on a developmental site first before taking changes to the live site. When you make changes on the live server without testing it somewhere else first, we call that “cowboy coding”. Too many things can go wrong if you drop code snippets into a live site, so make sure you are testing on a local or staging server first.
  • You will have to update the override template if it gets updated in WooCommerce. Though you can override WooCommerce files by adding your own templates to your woocommerce folder in your theme, you’ll have to keep an eye on these to make sure they are always up to date. You can see what template files are being overridden in your theme, and if they are up to date, by going to WooCommerce > System Status in the admin area of your WordPress site. Scroll to the bottom of this page to see your current WooCommerce overrides.
Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

31 comments on “How To Change Place Order Text In WooCommerce Checkout

  1. Hi there! That was helpful!

    I was wondering if there’s a way to change the text based on the product category to which the coupon added in the cart is assigned to.
    So if it’s assigned to Category #1 the text should be “Text 1”, but if it’s in Category #2 the text should be “Text 2”, etc.

    Would that be possible?

  2. Hi Kat:

    Thanks for reading! To answer your question, it may be possible, but I don’t think it would be easy, not the way WooCommerce is currently set up.

    If it were possible, there would also have to be some rules to govern what message appeared on the Place Order button. What if you added both Item #1 and #2 and with coupons applied, but both items had one shared category and one unique category?

    There may be a way to do what you are asking, but I am not currently aware of anyone who has documented it.

  3. Hi John,
    I put the code in and it works when the page starts loading but then it gets overridden by “Proceed to PayPal” once it’s finished loading. Is there an updated code that prevents this?
    Thank you so much,
    Sam

    1. Is there a way for me to send it to you privately? I’m working on the Test version of the website and there’s a password to view it.

  4. Hi Sam:

    So, what I found out is for the built-in payment gateways, there’s not a simple copy-paste way to override the button text for your PayPal button in WooCommerce.

    For a short-term fix, you can change the button text in this template, if you’re cool with editing via FTP or version control:

    /plugins/woocommerce/includes/gateways/paypal/class-wc-gateway-paypal.php

    Of course, that’s going to get wiped out every time you update WooCommerce, and we don’t want to have you avoid doing that.

    From what I found out, we’ll have to create a new payment gateway class for your custom PayPal gateway, and add this to our payment options.

    You’ll also need to keep an eye on when the regular PayPal payment gateway is updated in WooCommerce, and update the custom Paypal gateway accordingly.

    Since this is a bit of a more complex answer, it will likely come out as a separate blog post, once I have time to code it out and test it.

    For now, you can get by with just changing the button text in the plugin file (though again, that’s not ideal).

    I’ll email you when the new solution is published.

  5. Hi Sam,

    Normally you can override WooCommerce template files by putting those in the child theme, like a single product template, or even a piece of a template in some cases.

    In this instance, it’s a payment gateway, and for the PayPal one, we have to take different approach.

    Most of the things we can override easily are in the templates folder in the WooCommerce plugin, but this particular thing isn’t.

  6. Hi,

    I’m trying to use your code in my child theme’s functions.php but its not working. I have the latest WooCommerce. I would love to change that “place order” button. Thanks!

  7. Hi Mike:

    Some themes have their own functions which may override this code snippet. I’ve added a method which I’ve found to work in cases where the snippet does not. Check it out at the bottom of the updated article and let me know if this works for you.

    Thanks,
    John

  8. Hi Mika:

    Cheer up, Mika. I’ve added two additional methods for changing this button text. It’s very intriguing, but some theme/plugin configurations seem to override the first two methods for changing the button text, while other sites have no problem changing it with those methods. I suppose that’s the thing with web development — there are things that flat out don’t work, and many things that don’t work in a particular configuration.

    Best of luck.

  9. Hi John,

    Very useful information! Thanks a lot for sharing it!
    My questions is, how can we do that for different languages? If I add this code in the functions.php it changes the text in all languages, and I need different text for each language (Spanish, Catalan and English).

    Thanks a lot for your help!

    Best regards,
    Sandra

  10. Hi,

    It’s very important to change this string:

    case 'Proceed to Checkout' :

    In my case (Italian Language) 'Proceed to Checkout' is 'Continua su PayPal'

    If this sting doesn’t match exactly (it’s case sensitive) the snippet doesn’t work.

    This is my own case:

    
    
    add_filter( 'gettext', 'ld_custom_checkout_button_text', 20, 3 );
    function ld_custom_checkout_button_text( $translated_text, $text, $domain ) {
        switch ( $translated_text ) {
        case 'Continua su PayPal' :
        $translated_text = __( 'ACQUISTA ORA', 'woocommerce' );
        break;
    }
    return $translated_text;
    }
    
    
    

    Thank You!

  11. You bring up a great point, Alessandro. If you are using this code snippet (or a similar one) to replace text strings, it has to match exactly.

    If you are translating into another language (besides English), you would need to use the appropriate text string to properly replace it.

    Thanks for adding this very useful tip!

    – John

  12. Hi John,

    Great post!

    I have a small question. How to change the button text “Pay via …” (page checkout/order-pay/) ?

    I use 2checkout Inline payment and the customer is confused, when they see “Pay via 2checkout” (It should be “Pay via Credit Card”)

    Thanks a lot for your help!

    Best regards,
    Przemek

  13. Hi Przemek:

    That’s a great question. If you are using 2Checkout as a plugin with WooCommerce, it should have what we call translatable strings.

    These are escaped strings for widget headers, buttons, admin labels, and various other things.

    If you need to change only the button string for 2Checkout, I would try a plugin called Say what?. When you activate this, it will show up under Tools > Text changes.

    Find the text string that you are looking to replace, and enter that under Original string. For Text domain, use the value twocheckout. For the replacement string, use Pay by credit card.

    If this does not work, try changing the Text domain. It may be woocommerce_twocheckout.

    Let me know if this works for you.

    Thanks,
    John

  14. I want to add mobile OTP functionality on the place order button. If user placing a COD order, then he should verify his mobile phone before placing an order. Please sir, help me.

    Like if he clicks on the place order button a popup appears and asks for the OTP sent on the billing phone number, and after verifying, the order should be placed.

  15. THANKS! This worked like a breeze. My client could not legally “Add to cart” because no monetary transactions would occur so we needed to change the text to “Request”.

  16. Thank you so much!!! That WooCommerce / Authorize.net / Place order issue was exactly what our customers were having trouble with. After the function.php change was denied, the Say What? plugin did change the button text and will help our customers avoid more frustration. Again, thank you!

    1. Hi Ashley:

      Glad the Say What? plugin was able to help you out. For most cases, where plugins have what we call “translatable strings” (aka words in specific places, like buttons, that can be replaced in other languages for ease of use) — this works.

      – John

Join the Conversation

Your email address will be kept private. Required fields marked *.