My Courses > CustomizeWoo > Module 5 > Lesson 06: Edit Checkout Fields
Edit Checkout Fields
Editing the checkout fields is one of the most common customization. Here’s why you get a dedicated video lesson on it.
Video
Please note: English captions are enabled by default (click on “CC” in the video player to disable). Also, you can click on the “gear” icon to manage quality and playback speed. Enjoy!
If you joined already, please log in.
Otherwise, here is why you should join the Club.
Related Snippets
WooCommerce: edit or translate “Shipping and Handling” on the Cart & Checkout page
WooCommerce: Edit “Returning Customer?” Message @ Checkout
WooCommerce: Edit “Have a Coupon?” Message @ Cart & Checkout
WooCommerce: How to Remove “What is PayPal?” @ Checkout
WooCommerce: How to Add a Custom Checkout Field (PHP)
WooCommerce: Change Input Field to Textarea @ Checkout
27 thoughts on “Edit Checkout Fields”
_____
If you are writing code, please wrap it between: [php]code_here[/php]
The WooCommerce document mentioned in the video has a new URL. https://developer.woocommerce.com/docs/customizing-checkout-fields-using-actions-and-filters/
Much appreciated!
I am trying to disable the UPS option for just the “Next Day Air” because UPS is not offering this and it confuses clients who select it. Is there a clean way to do this without recoding the UPS shipping plugin? I am noticing that the site I am working on has a custom plugin to extend UPS plugin to get live rates. Any insight would be very helpful on how to achieve disabling one of the several UPS shipping options.
Hi Sam! Your UPS plugin should have a setting where you can enable/disable rates. If that’s not the case, switch to the official UPS plugin for WooCommerce and you’ll get that. Hope this helps
This shop I am working with has been around for some time now and there is a custom plugin written to extend the UPS shipping options. I am proud to share that I handled the challenge using a function in the child-theme functions.php and a hook for the checkout to echo in some jQuery and hide just the ‘Next Day Air’ option. Here’s my code:
// Add a jQuery function through a hook on the check out page add_action( 'woocommerce_after_cart', 'hide_UPS_Option'); function hide_UPS_Option() { echo ' $(document).ready(function(){ $("li:contains(Next Day Air)").hide(); }); '; }Ah ok cool
Of course today I got an email that it is still showing up on certain pages for products. It has me scratching my head.
Will adding a priority of “,1);” at the end of the ADD_ACTION fix that?
No, it won’t, jQuery is called correctly. I guess that happens because your JS script is not dynamic e.g. it does not reload once the Checkout page updates shipping rates. That’s why I much prefer the option-way
Hi Rodolfo, I managed to add a custom billing field. Yay! Definitely no more need for the Checkout Field Editor after this tutorial.
add_filter( 'woocommerce_checkout_fields' , 'add_billing_email_field_checkout' ); function add_billing_email_field_checkout( $fields ) { $fields['billing']['billing_email'] = array( 'label' => __('Email', 'woocommerce'), 'placeholder' => _x('e.g. name@domain.com', 'placeholder', 'woocommerce'), 'required' => true, 'class' => array('form-row-wide'), 'clear' => true, 'priority' => 25 ); return $fields; }Excellent!
it worked great,
add_filter( 'woocommerce_default_address_fields' , 'custom_override_default_address_fields' ); // Our hooked in function - $address_fields is passed via the filter! function custom_override_default_address_fields( $address_fields ) { $address_fields['address_1']['required'] = true; $address_fields['address_1']['placeholder'] = 'Put your Address here the whole thing buddy!'; return $address_fields; }Ahah lol, well done!
I need to change the text type to dropdown but woocommerce default is given as text how can i do it?
Hello Kriahanthan, this should help: https://businessbloomer.com/woocommerce-change-input-type-checkout-fields/
Thank you, Rodolfo! Step by step I learn how to modify my checkout fields. Now: I know how to change conditionally labels and placeholders in the checkout page if the “music” category is in the cart. But how to assign OTHER labels and placeholders IF ANOTHER CATEGORY is in the cart (let’s say “clothing”), but “music” or “any other categories” are NOT IN CART?
Well done Marcel 🙂 All you need is to implement an “IF – ELSEIF – ELSE” statement (https://www.php.net/manual/en/control-structures.elseif.php). Basically you first check on something, then if that’s false you check on something else, then if all the previous ones are false you find yourself in the last “ELSE” statement. Do some tests, share your snippets, and let me know 🙂
Hello again, Rodolfo!
We learned from you how to remove or add a checkout field. My question is if is possible to apply the Conditional Logic rules on the checkout area, also. As usual, I hope the answer will be positive, but I just need your confirmation, especially if the custom fields on the checkout could be shown based on the product category. Thank you!
Marcel, thanks for your comment! And it’s a good one. The answer is – always – “yes that’s possible”.
Inside the filter trigger function, you could use the “foreach” section contained in this snippet: https://businessbloomer.com/woocommerce-check-product-category-cart/. If the category is in the Cart, you would keep going and return the new field. If not, you would return the old fields.
Give it a go and let me know 🙂
Thank you, Rodolfo, for the guidance. I followed your advice and I was able to make my function to work on the checkout area just for a product category (“music” in my case), but not for all product categories. If the “music” product category OR “music” and another product category are in the cart, all work as expected. If “music” is NO MORE in the cart but another product category is there, I receive this warning on the checkout page: Invalid argument supplied for foreach() in E:\xampp\htdocs\site2\wp-content\plugins\woocommerce\includes\class-wc-checkout.php on line 267.
Also, the checkout fields are not there anymore. Please guide me!
Here is the snippet I wrote:
/** * @snippet Check if "music" Product Category is in the Cart - WooCommerce */ add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' ); function custom_override_checkout_fields( $fields ) { // Set $cat_in_cart to false $cat_in_cart = false; // Loop through all products in the Cart foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) { // If Cart has category "music", set $cat_in_cart to true if ( has_term( 'music', 'product_cat', $cart_item['product_id']) ) { $cat_in_cart = true; break; } } // Unset Order Comments if category "music" is in the Cart if ( $cat_in_cart ) { unset($fields['order']['order_comments']); return $fields; } }Hello Marcel 🙂
So, take a look at this:
If your category is in the Cart, you give $fields back to the server – but if NOT, you give nothing back. That line must be outside the conditional, and you unset fields only inside:
if ( $cat_in_cart ) { unset($fields['order']['order_comments']); } return $fields; }Makes sense? The goal of a filter function is to always give back (“return”) the variable.
Hello Rodolfo. Done! But now, I would like to change “Billing details” text if a certain product category is in the cart.
First, I tried just to change the “Billing details” text, and it works. Here is the snippet:
function wc_billing_field_strings( $translated_text, $text, $domain ) { switch ( $translated_text ) { case 'Billing details' : $translated_text = __( 'MY OWN TEXT', 'woocommerce' ); break; } return $translated_text; } add_filter( 'gettext', 'wc_billing_field_strings', 20, 3 );The problem is if I try to change the text only if the “music” product category is in the cart. It seems I have a problem. Here is the snippet I used:
/** * @snippet Change "Billing details" text if "music" Product Category is in the Cart - WooCommerce */ add_filter( 'gettext', 'wc_billing_field_strings', 20, 3 ); function wc_billing_field_strings( $translated_text, $text, $domain ) { // Set $cat_in_cart to false $cat_in_cart = false; // Loop through all products in the Cart foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) { // If Cart has category "music", set $cat_in_cart to true if ( has_term( 'music', 'product_cat', $cart_item['product_id']) ) { $cat_in_cart = true; break; } } // Change "Billing details" text if "music" product category is in the cart if ( $cat_in_cart ) { switch ( $translated_text ) { case 'Billing details' : $translated_text = __( 'Billing Info', 'woocommerce' ); break; } return $translated_text; }I made the exact same steps I used to unset order comments, I changed the filter, the function, and instead “return $fields” I used “return $translated_text”. Where I am wrong? Thank you!
You’re missing another “}” before the return call maybe?
Nope. This is the third day I sweat, looking for a solution. Maybe translating a text is not compatible with the conditional product category in the cart?
Just to remember what I try: I want to translate “Billing details” text if the “music” product category is in the cart.
Here is the snippet, with all brackets in place:
add_filter( 'gettext', 'wc_billing_field_strings', 20, 3 ); function wc_billing_field_strings( $translated_text, $text, $domain ) { // Set $cat_in_cart to false $cat_in_cart = false; // Loop through all products in the Cart foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) { // If Cart has category "music", set $cat_in_cart to true if ( has_term( 'music', 'product_cat', $cart_item['product_id']) ) { $cat_in_cart = true; break; } } // Change "Billing details" text if "music" product category is in the cart if ( $cat_in_cart ) { switch ( $translated_text ) { case 'Billing details' : $translated_text = __( 'Billing Info', 'woocommerce' ); break; } return $translated_text; } }Look what errors I have with this code:
Fatal error: Uncaught Error: Call to a member function get_cart() on null in E:\xampp\htdocs\site2\wp-content\themes\generatepress_child\functions.php:19 Stack trace: #0 E:\xampp\htdocs\site2\wp-includes\class-wp-hook.php(286): wc_billing_field_strings(‘Primary Menu’, ‘Primary Menu’, ‘generatepress’) #1 E:\xampp\htdocs\site2\wp-includes\plugin.php(208): WP_Hook->apply_filters(‘Primary Menu’, Array) #2 E:\xampp\htdocs\site2\wp-includes\l10n.php(182): apply_filters(‘gettext’, ‘Primary Menu’, ‘Primary Menu’, ‘generatepress’) #3 E:\xampp\htdocs\site2\wp-includes\l10n.php(250): translate(‘Primary Menu’, ‘generatepress’) #4 E:\xampp\htdocs\site2\wp-content\themes\generatepress\functions.php(49): __(‘Primary Menu’, ‘generatepress’) #5 E:\xampp\htdocs\site2\wp-includes\class-wp-hook.php(286): generate_setup(”) #6 E:\xampp\htdocs\site2\wp-includes\class-wp-hook.php(310): WP_Hook->apply_filters(NULL, Array) #7 E:\xampp\htdocs\site2\wp-includes\plugin.php(465): WP_Hook->do_action(Array) #8 E:\xampp\htdocs\site2\wp-settings.php(509) in E:\xampp\htdocs\site2\wp-content\themes\generatepress_child\functions.php on line 19
Fatal error: Uncaught Error: Call to a member function get_cart() on null in E:\xampp\htdocs\site2\wp-content\themes\generatepress_child\functions.php:19 Stack trace: #0 E:\xampp\htdocs\site2\wp-includes\class-wp-hook.php(286): wc_billing_field_strings(‘Error occurred …’, ‘Error occurred …’, ‘default’) #1 E:\xampp\htdocs\site2\wp-includes\plugin.php(208): WP_Hook->apply_filters(‘Error occurred …’, Array) #2 E:\xampp\htdocs\site2\wp-includes\l10n.php(182): apply_filters(‘gettext’, ‘Error occurred …’, ‘Error occurred …’, ‘default’) #3 E:\xampp\htdocs\site2\wp-includes\l10n.php(250): translate(‘Error occurred …’, ‘default’) #4 E:\xampp\htdocs\site2\wp-includes\class-wp-recovery-mode.php(177): __(‘Error occurred …’) #5 E:\xampp\htdocs\site2\wp-includes\class-wp-fatal-error-handler.php(45): WP_Recovery_Mode->handle_error(Array) #6 [internal function]: WP_Fatal_Error_Handler->handle() #7 {main} thrown in E:\xampp\htdocs\site2\wp-content\themes\generatepress_child\functions.php on line 19
Please guide me where I am wrong? Thank you!
Ok Marcel, you have 3 errors.
First of all, “gettext” runs on every page. Even on the admin ones. Therefore, your code looks for a WooCommerce Cart which does not exist on every page… the object only exist on the frontend and given that you want to translate something on the Checkout Page only, you should wrap the whole function into a conditional “if ( is_checkout() ) { }”
Second, there is a missing “}” to close the switch
Third, “return $translated_text” should be the very last thing, outside the “{ }”.
Here’s the correct code:
add_filter( 'gettext', 'wc_billing_field_strings', 20, 3 ); function wc_billing_field_strings( $translated_text, $text, $domain ) { if ( is_checkout() ) { // Set $cat_in_cart to false $cat_in_cart = false; // Loop through all products in the Cart foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) { // If Cart has category "music", set $cat_in_cart to true if ( has_term( 'music', 'product_cat', $cart_item['product_id']) ) { $cat_in_cart = true; break; } } // Change "Billing details" text if "music" product category is in the cart if ( $cat_in_cart ) { switch ( $translated_text ) { case 'Billing details' : $translated_text = __( 'Billing Info', 'woocommerce' ); break; } } } return $translated_text; }Thank you, Rodolfo. It works exactly how you said. Please tell me if I could use “gettext” bassed on the hreflang tags. I am sure yes, but just need a little hint from your side.
Cool! In regard to hreflang, it depends on your multilanguage plugin – you’d need to find their conditional tags and see if they work with gettext. Do some tests and let me know