In this post I’ll show you how to handle WooCommerce checkout page fields customization. The Checkout page is an eCommerce term that refers to pages shown to a customer during the step-by-step checkout process.
WooCommerce Checkout Customization – Shipping or Billing Form Fields
The shipping address is where you want products to be shipped, while the billing address is where you live or Where your bills are to be delivered.
The eCommerce shipping is a service through which seller ships their products to buyers. A shipping form collects the shipping details of a customer. It must contain all required shipping fields.
Add WooCommerce Custom Shipping Field
WooCommerce is a very flexible eCommerce system. We can easily customize the checkout page, it provides all the necessary hooks. Below are the three steps to add a custom field to WooCommerce checkout shipping form.
- Add the required field array() data and hook it to woocommerce_checkout_fields
- Field validation to check it must contain value
- Store the Field value in database
- Display field value on the admin order edit page
To add a custom field to WooCommerce billing form, just replace shipping word with the billing in all places within the below code.
Add the following code to functions.php file
Remove WooCommerce Checkout Shipping or Billing Fields
Removing any checkout field is too easy. You just need to pass that field within unset() function. The unset() function is a PHP function that is used to delete a specified variable. In WooCommerce it is used to remove array elements e.g unset( $fields[“billing_country”] );
Add the following code to functions.php file to remove billing for fields.
Add the following code to functions.php file to remove Order Notes from checkout field in WooCommerce.
Add the following code to functions.php file to remove billing, shipping, accounts and Order Notes from checkout page in WooCommerce.
Re-Order WooCommerce Checkout Billing or Shipping Fields
Sometime you want to reorder any WooCommerce checkout page fields. In order to do this you have to use the priority array value with relevant form array value e.g $fields[‘billing’][‘billing_first_name’][‘priority’] = 10;
To reorder of fields, the priority value must be changed. Higher priority fields are shown in the end. e.g priority value of 30 will be displayed after 20.
Add the following code to functions.php file.
To reorder field to WooCommerce shipping form fields, just replace billing word with the shipping in all places within the above code.
Best WooCommerce Customization Practices
Flatsome Theme Customization
Custom WooCommerce Plugin Development
WooCommerce Checkout Manager
Hi,
I build a form at Custom Product Options. At “Label” I put some text “PoE Switch:”
Enable Price is marked and Price Options are “Different Price for each options” and Pricing Type is “Fixed”.
Use price as fee is also marked and Allow Multiple Selections isn`t marked.
At “Options” i put three options. At first row I put the same text into “Label” and “Value” and the Price field
is empty.
At second row the text is different to the first row, but also the same at “Label” and “Value. Price field shows 100.
The third row also with another price. (You can see i tat the attached images).
If a purchaser choose one of the options only the Label text (between Element ID and Help text) is shown on the bill.
What can i do, to show the choosed label text of one of the three options?
Thanks for helping
Sorry, didn’t pick what you want to do. Also I can’t see any attached image. Thanks.
Hello,
I also have a flatsome theme and I want to unchecked the button ship to a different address…
How to do this. Do I have to put some code to my child theme or there is an other way?
Best Regards,
Stathis
Hello, Add code to child theme functions.php file
Hi, I am using a multi-step checkout (3 steps). Could you please tell me if there is a possibility to move the billing to the place order step of checkout (review order) after removing it from the first step and how to do it?
Thanks
Hello, If you understand WooCommerce template file structure you can edit it, here is a tutorial on WooCommerce checkout section moving https://www.ibenic.com/customize-woocommerce-checkout-pages/
hi i have a flatsome theme and i want to checkout option in product page. i want another button with button of Add to cart. there will be to buttons on product page one for Add to cart and other is checkout. how can i add checkout option in product page. check the link of product page there is just ine button with name of Add to Card i want second button of checkout. please help me Stay Bless and Stay Safe. Thanks a lot
please check this link https://therichpost.com/add-checkout-button-product-page-woocommerce/