Change Proceed To Checkout Text In WooCommerce
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.
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.
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.php
file, 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.
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.
Hi Marek:
It’s difficult to know what is going on without looking at what’s going on directly. Do you have a link to the page in question?
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
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?
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
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.
Hi John,
now I made a modification in functions.php – I added your code
BR, Marek
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.
Hi John,
I really appreciate your help, this option is the working one ๐
Thank you a lot, you’re so kind.
BR, Marek
No problem, Marek! Have a great day.
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
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
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
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
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…
Hi Robbert:
Just published: Here’s how to change the currency symbol to text.
http://www.lockedownseo.com/change-currency-display-in-woocommerce/
Thanks for reading and commenting. m/
Many thanks…it work exactly without any error….i prefer this methods to some plugins
Thanks
NUBARI
Nigeria
Glad it worked for you. Peace.
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.
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.
Thanks for the tip! Worked great for me (after removing the opening php tag which was allready there in my functions.php ๐
Great to hear, Robin! Glad I could help. ๐
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.
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.How do I change it if a WooCommerce site requires several languages? I need to change that, it only has one language right now.
Excellent question, Inlman. If your WooCommerce site needs to be translated into several languages, you would normally build a multilingual site using a plugin like Weglot or WPML.
Thanks,
John
This code is outdated, could you fix it?
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.
Thanks ! Great. Works flawlessly. Was looking for it like crazy ๐
Cheers from Holland
Glad to help, Tom! ๐
Hi John:
The proceed to checkout button has gone missing on my cart page.
http://galibardy.com/cart/
Can you tell me how to add it back?
Many Thanks,
John
Hi John:
It looks like this line of CSS is being output in your inline styles:
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
Thanks a lot John! It works sweet!!
Excellent! Thanks for stopping by, Nelson! ๐
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
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
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.
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.
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
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
Totally awesome! All that worked – you are a Star! Thank you for sharing these code snippets.
Thank you Rebecca. Glad I could help with your WooCommerce situation.
Thank you!
How can I add an image next to the proceed to checkout button.
I would like to add the credit card logo images.
Thank you very much!
Hi Julien:
You would have to create a template override file to add images to the Checkout page. WooCommerce has come documentation on how to do that here: https://docs.woocommerce.com/document/template-structure/
– John