Blog: WordPress
Female ninja holding sword in dark

Change Proceed To Checkout Text In WooCommerce

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 largest e-commerce platform used in WordPress today. It is relatively customizable through the use of plugins and premium extensions. But let’s say you want to make some small changes without using extra plugins. There are many seemingly small changes that are more complex than they initially appear.

With WooCommerce, you can override any template file by adding your own modified version of that file to your WordPress theme directory. Just create the same folder structure you find in the WooCommerce plugin and add your new template file there, and it overrides the plugin file. But what about cases where that won’t touch the part of the page you want to change?

Just today, a web professional reached out to me to inquire how to change the Proceed To Checkout button text that is found on the Cart page. This section of the WooCommerce cart is called in the cart-totals.php file found in the Cart folder inside the Templates folder of WooCommerce.

But what’s this? The Proceed To Checkout code is called through a function in WooCommerce core, near the bottom of cart-totals.php file.


/* Found near the bottom of cart-totals.php */
<?php do_action( 'woocommerce_proceed_to_checkout' ); ?>

How then shall we change this button text?

Hooks: Actions and Filters

WordPress lets us modify data through web hooks called actions and filters. Actions let you add or remove code, while filters let you replace data. The Proceed to Checkout code block is an added action. While it’s probably possible to filter the text in this button (and surely more elegant), the quick solution I was able to come up with is to remove the default action and replace it with a duplicate action that has different button text.

For reference, you can check out the original woocommerce_button_proceed_to_checkout function on the WooThemes documentation page.

The Code Snippet You Came Here For

This is the new method, for version 2.3.8 of WooCommerce and forward.


<?php
/**
* Change Proceed To Checkout Text in WooCommerce
* Place this in your Functions.php file
**/

function woocommerce_button_proceed_to_checkout() {
       $checkout_url = WC()->cart->get_checkout_url();
       ?>
       <a href="<?php echo $checkout_url; ?>" class="checkout-button button alt wc-forward"><?php _e( 'Check On Out', 'woocommerce' ); ?></a>
       <?php
     }

Let’s analyze what’s going on here. We remove the original function with an action hook, by referencing the containing code tag, then the function we want to remove, and lastly the original priority argument. (That’s the number at the end, and it has to match the original priority number).

This is expressed on the WordPress Codex as

<?php remove_action( $tag, $function_to_remove, $priority ); ?>

Next, we add back a duplicate of the original function using add_action. We reference the containing tag and the function we are adding. You’ll notice we add a custom prefix to our new function, in this case, ld_. This is always a good idea, because it virtually eliminates the possibility that another plugin or function will have the same name later on and cause a code conflict.

Then we define the function we are calling in our add_action. This is the same function that appears in WooCommerce core, except in this function, we’ve changed the button text to Check On Out. This seems to work as a pluggable function in WooCommerce version 2.3.8 and going forward, simply by adding the function from WC core into your functions file and changing the button text there.


Pretty much any default value in WooCommerce can be changed, either in the admin, by creating modified template files, or by using hooks. Let me know what you’re struggling with, and I’ll cover it in a future post.

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.

40 comments on “Change Proceed To Checkout Text In WooCommerce

  1. Hi and thanks for this code which is good!

    I have a problem now when trying to upload a media file in my website with the WP dashboard.

    Add media > select > upload and then :
    Warning: Cannot modify header information - headers already sent by (output started at /htdocs/public/nas/content/live/install/wordpress/wp-content/themes/kallyas-child/functions.php:90) in /htdocs/public/nas/content/live/install/wordpress/wp-admin/async-upload.php on line 35

    Line #90, in the child theme, is exactly where I added this code.
    Any ideas?

    Regards, Laurent.

  2. Hi Laurent:

    The first thing I would make sure of is that you didn’t add the opening PHP tag at the top of this snippet. That’s my fault for not making this more clear. That can cause an error, with the code seeing another start tag before seeing a closing tag.

    Try adding this at the very end of your functions.phpfile, if it is not already there.

    To troubleshoot beyond that, I would need more info, and actually need to look at your code.

    Update: I actually changed the code to make it less prone to cut-paste errors. Feel free to implement it and see if it works better.

    Thank you for pointing out that I could have written this in a clearer manner. I’ll fix that promptly.

  3. Hello, thank you for this useful snippet, I have a question, when I added that code into my functions.php file, a button is not taking me to the next page (checkout), do you know why could that be happening?

    I am using Mystile theme / WooCommerce plugin.

    Thank you a lot for answering.

  4. Hi John,

    Sorry, the web is : http://www.kikibike.cz/cart/ , and the button is only button in English there, Proceed to checkout, I successfully modified CSS, but the text itself is my headache ๐Ÿ™‚

    Thanks a lot, Best Regards, Marek

    1. Hi Marek:

      I was able to add items to the cart and the Proceed to Checkout button took me to the Checkout page. Did you change your functions.php file back to its original state?

  5. Hi John,

    yes for me it works how it should work now, when I click on the button Proceed to checkout, it takes me to checkout page, and then i can confirm the order. That file functions.php is in the default setup.

    Thanks, Best Regards, Marek

    1. Hi Marek:
      What happened when you added this snippet? Did the text change? Was there still a link in place? Did the button look the same, but simply not link? I could not tell you what is happening without seeing it.

    1. Hi Marek:

      Normally, this function finds your checkout URL, but for some reason, it’s not picking it up, and not writing the URL to link to. I’m giving you this custom code, with your Checkout URL put in there manually. Try this and let me know if this works.

      remove_action( 'woocommerce_proceed_to_checkout', 'woocommerce_button_proceed_to_checkout', 10 ); 
      add_action('woocommerce_proceed_to_checkout', 'ld_woo_custom_checkout_button_text');
      
      function ld_woo_custom_checkout_button_text() {
          $checkout_url = WC()->cart->get_checkout_url();
        
             echo '<a href="http://www.kikibike.cz/checkout/" class="checkout-button button alt wc-forward" rel="nofollow">';  _e( 'Check On Out', 'woocommerce' ); echo '</a>'; 
          }
  6. Hi John,

    I really appreciate your help, this option is the working one ๐Ÿ™‚

    Thank you a lot, you’re so kind.

    BR, Marek

  7. Hi John, Hi Marek,

    Would like to let you know that I have the same problem with the first snippet — checkout URL is not written, button link shows to the page itself. For the moment I solved it the hard coded way as well.

    Thank you for the work, John!

    Best
    Annette

    1. Hi Annette:

      I double-checked this on a couple of test sites. You and Marek are right. I changed this back to the snippet I had originally put up here, and everything worked once again.

      Test this current snippet and let me know if it works for you, Annette.

      Thanks,
      John

  8. Hi John,

    Using your code I managed to add a radius class to the checkout button, however following the recent update I am now seeing two checkout buttons, one with radius and one without! I think that the remove_action line is no longer working, but not sure why. Any ideas?

    Thanks,
    Tim

    1. Hi Tim:

      WooCommerce changed the functionality of this particular hook in the last update. I added a new code snippet which should work in the newest version of WooCommerce.

      Thanks for pointing this out!
      John

  9. Damn…
    This was so perfect!
    Searched like 3 days to change this button….

    I wanted to ask another favour…
    Maybe you also know how to change the Dollar (or in my case Euro) Sign in the cart!?

    VERZEND- EN VERWERKINGSKOSTEN Gratis verzending
    BESTELTOTAAL โ‚ฌ219.95 (Inclusief โ‚ฌ38.17 BTW)

    I want to change this is Eur 219.95

    It is the last price indicator before the (proceed to checkout) button…!

    Maybe you can help… I searched already 2 days for this one!

    Big thank you and if you can help me with the other question it would be so perfect…

  10. Hellou John, thank you for this code. The remove_action( ‘woocommerce_proceed_to_checkout’, ‘woocommerce_button_proceed_to_checkout’, 10 );
    doesn’t work for me. I am using wc 2.3.13.
    Any suggestions why ?
    Thx for reply.

  11. Hi Jan:

    The code you are using looks like it is legacy code that worked prior to 2.3.8. Look directly under that for the heading that says: The Code Snippet You Came Here For.

    That should work to change the Checkout text in your current version of WooCommerce.

  12. Thanks for the tip! Worked great for me (after removing the opening php tag which was allready there in my functions.php ๐Ÿ˜‰

  13. Hello John ….. how do I change the text, “Proceed to checkout”? Not remove it.
    Can you tell me which file must be edited?

    Thanks in advance.

  14. Hello Jie:

    You can add the following code snippet to your theme’s functions.php file.

    The text inside of _e() on Line 5 can be changed from “Proceed to Checkout” to whatever you need it to be.

    
    <?php
    function woocommerce_button_proceed_to_checkout() {
           $checkout_url = WC()->cart->get_checkout_url();
           ?>
           <a href="<?php echo $checkout_url; ? rel="nofollow">" class="checkout-button button alt wc-forward"><?php _e( 'Proceed to Checkout', 'woocommerce' ); ?></a>
           <?php
         }
    
  15. Hi Mitchell:

    Here’s a quick question: are you using the first code snippet (up to 2.3.7) or the second code snippet (up to date)?

    The second snippet is working for me on live sites.

  16. Hi John:

    It looks like this line of CSS is being output in your inline styles:

    
    
    html body a.checkout-button.button.alt.wc-forward {
        display: none !important;
    }
    
    

    This is what is causing your Proceed To Checkout button to not display. If you can find what is outputting this line of CSS, you can remove it and solve the problem.

    Thanks,
    John

  17. Hey! Awesome site & codes work great. One question… upon adding this code to my child theme’s functions.php file, I was able to change the text for the button, but after saving it I noticed it changed the color of my button to a pinkish/purple color. This didn’t happen when I used your “Place Order” replacement text code.. Any idea what’s causing this?

    Thanks for the help,
    Dan

  18. Hi Dan:

    The purplish color is the default button color for WooCommerce. If you updated WooCommerce recently, or if WooCommerce is bundled in your theme and you updated the theme recently, this could be the culprit.

    I would double check the CSS in your child theme, and make sure that your CSS rules for the button color is actually overriding the default styles.

    Thanks,
    John

  19. I want to change the URL of Proceed to Checkout button and click on it, then show my account page, then go to the checkout page? Please help me quickly.

  20. Hi Deepak:

    In WooCommerce, there is a specific template for the Proceed to Checkout button. It uses a function to pull in whatever page is set as your Checkout URL.

    https://github.com/woocommerce/woocommerce/blob/master/templates/cart/proceed-to-checkout-button.php

    If you are trying to set the Checkout URL to the My Account page, you could do that, but then none of your Proceed to Checkout buttons will actually go to the Checkout page.

    A better solution might be to use the WooCommerce template overrides to add a link to the My Account page, so customers can go there if they wish before checking out.

    I would not advise sending the customer to a different page than they expect to go to, even if that is what your client may be asking you to build.

  21. Hi John,

    Somehow it doesn’t work for me. I have a Dutch site, but whatever I try, I can’t get the text “Proceed to Checkout” changed to something else. The translation file also contains the correct translation, however I keep getting (some) English texts.

    Any ideas what to check?

    Thanks in advance

  22. Hi Hans:

    First, make sure you are using the updated version of the code snippet shown. I originally had both the older version (2.3.7 and before) and the new version (2.3.8 and above) listed. I removed the old one, and now only the current snippet is shown.

    If you are still having problems, you may try a plugin like Say What? to replace that string. Use woocommerce as the Text Domain.

    If you are still having issues after that point, consult the WooCommerce docs on localization and string translation.

    Let me know if you are able to resolve this issue.

    Thanks,
    JOhn

Join the Conversation

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