heckout fields are those fields that appear to the customer on the checkout page when he completes the process of ordering his products in the online store.
There are a set of default fields that appear to the customer on this page, such as name, address, and phone number.
If the store owner needs to modify it, WooCommerce does not provide a direct way to modify it directly, as modification is through the use of a set of code or through custom additions.
In today’s article, we will explain how to modify payment fields in an easy and simple way without the need to add any codes through the free plugins dedicated to WooCommerce, and we will learn how we can use these plugins to improve your payment process and make it suitable for your needs.
We will also explain how to customize these fields through the code officially available on the WooCommerce platform.
What are Checkout fields?
Checkout fields, as we mentioned in the introduction to the article, are those fields that appear on the payment page, which is usually the last page that appears while purchasing products from the WooCommerce store, and which includes within it all the buyer’s data and the data of the product that he wants to buy.
On this page, the buyer usually adds his name, phone number, and the detailed address to which he wants the product delivered. He can also write notes about the product he ordered and choose the method of delivering the product to him. The payment methods available on the site, the product price, shipping price, and tax also appear on this page. For the product, the final price that the customer will pay is determined, whether paying online via prepaid cards or paying upon receipt.
Online store owners may need to control these fields and customize them upon request, such as specifying which of these fields are mandatory and which are optional, or arranging the priority of appearance among them, or adding new fields for the information they want to collect from customers, which is determined according to the type of each store, which is what We will use it in the following paragraphs.
The best free plugins for editing payment fields
1- (Checkout Manager)
The Checkout Field Editor add-on is considered one of the most widely used add-ons for modifying payment fields in WooCommerce, as it works on 400,000 sites that use WooCommerce around the world and helps control payment fields (Checkout Field) with great flexibility and ease. Since its launch, it has received more than 2 million transactions. Install on different WordPress sites.
Add-on features
- The lightest WordPress plugin.
- It contains more than 7 different types of fields, such as text fields, fields designated for passwords, email, check boxes, phone numbers, etc.
- Fast technical support with a detailed explanation page of how the Documents add-on works
- The ability to cancel the appearance of fields from the payment page without deleting them if you want to activate them again.
- If you make any wrong modification or delete any field, you can reformat the plugin to restore the default state of the fields.
2- Checkout Fields Manager
The Checkout Fields Manager add-on is one of the most distinctive additions in controlling the appearance of payment fields and the payment page in general. It is distinguished from the previous addition by the ability to control the field width and page design to be better with an easier and faster control interface.
Add-on features
- The ability to add a new field that allows the customer to upload files to the payment page.
- Determine whether the buyer must forcefully create an account during checkout or not.
- Add a fixed message that appears at the top of the payment page containing any text you want.
- There are a variety of different fields such as (Text, Textarea, Password, Radio, Checkbox, Select, Country, State, Multiselect, Multi Checkbox, Heading, Colorpicker, File uploader)
- Control showing and hiding fields with the click of a button without having to enter the settings of each field separately.
3. Flexible Checkout Fields
The Flexible Checkout Fields addition , which helps you control the payment page more easily, comes with the feature of controlling the arrangement of the fields on the page by dragging and dropping where you want.
You can also add a wide range of various fields, such as the date field, color field, file upload, and also a field for adding custom html code.
This add-on does not differ much from the previous add-on except in form and some simple features, but it is faster and better in terms of the method of modification, and it is also much more organized and easier to control, with the ability to show fields on other pages such as the account page and within the email that reaches The buyer, in addition to the redirection page that appears to the buyer after completing the order.
Add and edit payment fields
In the following paragraphs, today we will explain to you how to control the fields of the website’s payment page through the most famous free add-on for modifying payment fields, which is the Checkout Field Editor add-on . This method is the best and easiest option for beginners. We will also show you how to deal with these fields through the programming codes and filters that WooCommerce makes available to modify payment fields, whether by adding, deleting, or modifying fields that already exist.
First: Edit the payment fields through the Checkout Field Editor
WooCommerce has provided the Checkout Field Editor add-on for modifying payment fields. This add-on is available in a paid version at a price of $49 so that you can deal with 17 different types of fields on the payment page and you can control where they are displayed on the site and customize them as you wish.
It also provides it with another free version with fewer features, so we will explain to you in the following steps how to modify your store’s payment fields through the free version of the add-on.
1. First, you must install the add-on by going to Add-ons > Add New , then search for the name of the add-on in the Checkout Field Editor search box.
2. After installing and activating the add-on , go to the WooCommerce control panel and choose Add-ons > Checkout form as shown in the following image.
3. A page containing all your payment fields will appear in front of you. You can press the edit button in front of the field you want to modify.
4. When you click on the edit button , all field options for modification will appear in front of you, as shown in the following image:
1- Label: This is the name at the top of the field.
2- Placeholder: It is the explanatory writing that is inside the field, and when you start writing in the field, this writing disappears automatically.
3- Default Value: The default value of the field, and you must delete it if you want to change it with a different value at the top of the field.
4- Required: If you activate this option, it means that this field is required and essential, and the page cannot be completed unless you fill it out. If you deactivate it, it will become an optional field.
5- Enabled: If you activate this option, this means that the field is activated, meaning that it will appear on the payment page. If you do not do this, this means that the field will disappear from it.
Then, after selecting all the options you want for the field, click the Save & Close button to save your modifications to the field, and repeat this with the rest of the fields.
As for adding a new field, all you have to do is click on the +Add field button as shown in the following image:
The following page will appear in front of you. On this page you must specify the type of field you want to add (Type – Text – Number – Email – Date..) and the name of the field name. The name must be representative of the field and unique, meaning that it is not duplicated for each of the fields, and the rest The options for the field are set up as we explained to you in the previous paragraph.
Second: Modifying the payment fields by adding programming code to your site
This method is not recommended except for those who have basic knowledge about modifying code. Of course, he does not have to be a professional programmer, but you must be familiar with how to deal with codes, and before trying the method, take a backup copy of your site. Then follow the following steps with us.
1. You must add PHP codes to the functions.php file of your website’s template. To access this file, go to Appearance, then Template Editor.
2. Now choose template properties (functions.php)
3. Add the codes at the bottom of this page. Here are the codes to add.
1- Code to add a new field
For example, we will write code to add a custom checkbox at the end of the checkout page to enable users to activate the newsletter subscription option as follows:
// Add checkbox field
add_action( 'woocommerce_after_order_notes', 'quadlayers_subscribe_checkout');
function quadlayers_subscribe_checkout($checkout) {
woocommerce_form_field ( 'subscriber' , array ( /** Subscriber is changed with the name of the field and does not appear in the interface and must be in English */
'type' = > 'checkbox' , /** This code is modified with the type of field you want, which is text, select, radio, textarea, phone, email, or password*/
//'required' => false, /** This code is modified to true if the field is mandatory*/
'label' = > 'Subscribe to our newsletter.' /** The Subscribe to our newsletter text is changed with the name that appears above the field */
) , $checkout- > get_value ( 'subscriber' ) ; /** Subscriber is changed to the same name you chose above*/
If the field type is chosen so that it displays a set of options to choose from, i.e. (select or radio), additional code must be written that includes all the options before calling the field value through the get_value function, as follows:
Note: This code is added only if the field type is selected or radio, so that the choices will appear to the user in both cases.
2- Code to delete an existing field
To delete an existing field, you must know the name and data of the field you want to delete, as there are many fields in WooCommerce. In this part of the article, we will explain the names of all the fields with codes so that you can delete them. The deletion code is also added in the same file (function.php), and the following is the deletion code for the previous field:
The text “Type the field name here” in the previous code is replaced with one of the following codes depending on the name of the field you are going to delete.
Note:
The add_filter method is a woocommerce_checkout_fields hook that we have named quadlayers_remove_checkout_fields and returns the fields that were removed from the checkout page.
To show payment fields that you removed from the checkout page again, simply remove the unset line of code from the functions.php file that hides the specific field you want to show again. For example delete the following line
This will re-display the order feedback field on the buyer’s checkout page again.
Conclusion
With this, we have finished explaining all the methods available for modifying the payment fields, as these fields are the most important step in the steps of purchasing from the store, as they provide you with all the necessary customer data in order for you to deliver the order to him.
In this article, we explained to you the method of manual modification using code, using one of the add-ons available in a free version. This method is much easier and faster, and you will not encounter any difficulty in it. It also does not require any prior experience, so we recommend it when you want to modify fields, add or delete Checkout Fields.
