In this post from the WooCommerce Checkout Page, we will illustrate the ultimate guide on How to Add Custom Fields to WooCommerce Checkout Page? One aspect that we have learned about the WooCommerce Ecosystem is that – It is an enormous pool of innovative functionality, that is used in an effective way, can prove beneficial for your E-commerce business in a variety of ways.
WooCommerce is a very popular e-commerce solution across all the websites with powering around 42% and more of all the online stores. This lets you create an e-commerce business (store), manage inventory, accept payments, and much more. It comes with almost all the functionalities that you require to open an online store.
It also means that there is always something new to explore and learn in the WooCommerce domain.
Today we are going to talk about some steps that you have to go through to add custom fields to a WooCommerce Checkout page. As WordPress custom fields have metadata that includes some additional information regarding the page or post such as title, description, date and time, author name, etc.
Where, the articles posted by the admin of a WordPress site are called posts and pages are like posts. Pages can be managed in a hierarchical structure in WordPress. As the articles posted by the admin of a WordPress site are called posts and pages are like posts. Pages can be managed in a hierarchical structure in WordPress.
The admin or administrator has a total access over the site and provide everything with the administration of the site. Administrators have complete control over posts, pages, uploaded files, comments, settings, themes, imports, exports, other users, of any site. Where, theme is a group of templates and stylesheets used to describe the appearance and display of a WordPress site.
As here, templates are the files which are present to control the display to the site visitors in the website. These files uses the WordPress MySQL database and generate the HTML code which is sent to the web browser. And also, stylesheet refers to the CSS file in a theme or a template.
The CSS also termed as cascading style sheets are the documents containing the styling rules ti be applied to HTML and XML files with structural formats. The CSS is read by web browsers to create a structure of the web page.
As WordPress interface helps to create content like posts and pages, or custom post types. Generally, every content type contains the actual content and its metadata. Metadata is information related to the content such as date and time, author name, title, and more.
The WooCommerce checkout page provides users with predefined areas, that are placed in a particular order on the checkout page.
By default, the WooCommerce checkout page provides users with predefined areas, that are placed in a particular order on the checkout page.
Let’s get cracking!
Add Custom Fields to WooCommerce Checkout Page
Step 1: Define an Array of Fields on Checkout Page
- However, the most important step is to add custom fields to a checkout page is to define an array of fields that you want to show.
- Therefore, the field’s order that is shown on the checkout page will be the same as that defined in an array.
- The Pre-existing field’s array will also be different from the array of custom fields.
- In our example, we will remove the ‘Company’ field from the checkout page and add ‘Title’ field before the ‘First Name’ field on the checkout page. Thus, the following block of code can be used to define the array.
- Block of code is the style of code box which displays code snippet in a WordPress post or page.
| //global array to reposition the elements to display as you want (e.g. kept ‘title’ before ‘first_name’ ) $wdm_address_fields = array(‘country’, ‘title’, //new field ‘first_name’, ‘last_name’, //’company’, ‘address_2’, ‘address_1’, ‘city’, ‘state’, ‘postcode’);//global array only for extra fields $wdm_ext_fields = array(‘title’, ‘address_3’, ‘address_4’); |
Step 2: Add Custom Fields to a WooCommerce Checkout Page
- The function will then have to written to add a custom field to the checkout page. However, this function should be written on the ‘woocommerce_default_address_fields’ hook offered by WooCommerce.
- As WooCommerce is a open source e-commerce plugin which creates a medium of interaction between the user/software and clients for to gain attraction with the clients to the website and provide increment to the sales in e-commerce platform.
- Also, plugin contains a group of functions that can be an addition to a WordPress site where this plugin which is a type of software provides additional functionality to the application.
| add_filter( ‘woocommerce_default_address_fields’ , ‘wdm_override_default_address_fields’ );
function wdm_override_default_address_fields( $address_fields ){ $address_fields[‘title’] = array( $address_fields[‘address_1’][‘placeholder’] = ”; $address_fields[‘address_2’][‘placeholder’] = ”; $address_fields[‘address_3’] = array( $address_fields[‘address_4’] = array( global $wdm_address_fields; foreach($wdm_address_fields as $fky){ $address_fields = $temp_fields; return $address_fields; |
- Once it has been done, additional fields will now appear on the checkout page. Apart from this, the updated fields will also be displayed on the user’s account page.
- After the custom field is added to the page, the checkout page is represented.
Step 3: Concatenate Fields as per Requirement
- Some people want to add two or more strings to display on the ‘Order Page’. For example, you might want to display the title, first name, and last name simultaneously on a single line.
- To do this, the contents of three fields will have to be added as below.
| add_filter(‘woocommerce_formatted_address_replacements’, ‘wdm_formatted_address_replacements’, 99, 2);
function wdm_formatted_address_replacements( $address, $args ){ $address[‘{name}’] = $args[‘title’].” “.$args[‘first_name’].” “.$args[‘last_name’]; //show title along with name return $address; |
Step 4: Show Custom Fields on Order Page
- By default, checkout page fields are shown on the order page.
- However, when the fields are added or removed from the checkout page, these changes should also appear on the order page. To do this, the following block of code should be used.
- With this code, the billing address and shipping address will be displayed along with the updated list of fields on the order page in the back end as well as on the single order page in the WooCommerce Dashboard.
| <?php add_filter( ‘woocommerce_order_formatted_billing_address’, ‘wdm_update_formatted_billing_address’, 99, 2);function wdm_update_formatted_billing_address( $address, $obj ){global $wdm_address_fields;if(is_array($wdm_address_fields)){foreach($wdm_address_fields as $waf){ $address[$waf] = $obj->{‘billing_’.$waf}; } }return $address; }add_filter( ‘woocommerce_order_formatted_shipping_address’, ‘wdm_update_formatted_shipping_address’, 99, 2);function wdm_update_formatted_shipping_address( $address, $obj ){global $wdm_address_fields; if(is_array($wdm_address_fields)){ foreach($wdm_address_fields as $waf){ return $address; |
Step 5: Display Fields on Account Page
- As we display an updated list of fields on the order page, custom fields must also be displayed on the user’s account page. It can be done with the following block of code.
| <?php add_filter(‘woocommerce_my_account_my_address_formatted_address’, ‘wdm_my_account_address_formatted_address’, 99, 3);function wdm_my_account_address_formatted_address( $address, $customer_id, $name ){global $wdm_address_fields;if(is_array($wdm_address_fields)){foreach($wdm_address_fields as $waf){ $address[$waf] = get_user_meta( $customer_id, $name.’_’.$waf, true ); } }return $address; } ?> |
Step 6: Edit Option on Single Order Page
- Second, tweak that will have to be made is to add the custom fields in the edit option on the single order page in the dashboard.
| <?php add_filter(‘woocommerce_admin_billing_fields’, ‘wdm_add_extra_customer_field’); add_filter(‘woocommerce_admin_shipping_fields’, ‘wdm_add_extra_customer_field’);function wdm_add_extra_customer_field( $fields ){//take backup of email and phone number fields as they will be lost after repositioning $email = $fields[’email’]; $phone = $fields[‘phone’];$fields = wdm_override_default_address_fields( $fields );//reassign email and phone fields $fields[’email’] = $email; $fields[‘phone’] = $phone;global $wdm_ext_fields;if(is_array($wdm_ext_fields)){foreach($wdm_ext_fields as $wef){ $fields[$wef][‘show’] = false; //hide the way they are display by default as we have now merged them within the address field } }return $fields; } ?> |
- Once the above code is applied, the changes in the single order page of the Dashboard will appear below.
Summing Up
If you follow all of the above steps correctly, you should be able to add custom fields to a WooCommerce checkout page.
However, if you are still having problems then you can return to me with your questions. Also, let me know your thoughts on the post in the comments section.
We hope our blog is helpful to you.
If you are facing problem related to WooCommerce Setup talk to our WordPress Experts dial + 1 844 275 0975(Toll-Free).