For online stores, an intuitive and tailored approach to designing WooCommerce checkout forms is very much the need of the hour. With the right tools, that process becomes easier, and more relaxed, and offers you greater freedom. However, even the best plugins can sometimes offer so much reassurance.
When all else fails, experimenting with the coding that forms the backbone of your checkout page can be a truly innovative solution. However, because coding might seem a bit of an overwhelming task, many users fail to see the benefits. So, this piece will explore the fine details of checkout customization through programming.
How Customization Helps You
Checkout is a singularly crucial step for online shoppers, and a tailored checkout flow helps online stores in a number of ways. On top of giving the benefit of uniqueness, you can decide the type of flow and the information you wish to gather from your buyers.
More importantly, however, customization enables you to revamp a checkout page that is not user-friendly or lacks transparency. So, if you hope to stave off cart abandonments in a more effective manner, this is the route you’ll need to take.
Elevating The Default WooCommerce Checkout Page
To its credit, the default WooCommerce checkout page contains all the basic information you need. It provides fields for personal and local details, as well as billing info and specifications for shipping and payment.
But what if you want to overhaul this design? To revamp your online register, you need to make your fields more strategic and your overall flow a bit more streamlined.
How To Customize Your WooCommerce Checkout
Normally, a quality checkout field editor for WooCommerce can be your go-to for modifying your forms. These plugins are easy to use, affordable, and highly flexible and versatile. However, these aren’t the only resource that online stores should be aware of.
Crucially, WooCommerce itself provides the perfect set of tools for editing and customizing various touchpoints and landing pages.
For instance, this WooCommerce guide lets you override existing settings to create a more unique layout for checkout. All you need to do is copy the template to the theme, using the form-checkout.php folder in WooCommerce.
Furthermore, you can utilize hooks and filters, with the relevant details for editing hooks underlined in the WooCommerce hook library. A one-click checkout page is a product of multiple checkout step categories, each with its own selection of fields. To manage these fields, you need do deal with the relevant filters and hooks. These include
- woocommerce_checkout_fields
- Woocommerce_billing_fields
- woocommerce_shipping_fields
Let’s dive into how you can utilize these features in customizing your checkout page.
Step 1: Activating Custom Fields In Checkout
We’ve already discussed the default checkout overview for WooCommerece. But what if you need to add or modify a bespoke field to your form?
1. Access the default outlook for the checkout page by activating the theme via the functions.php.
2.From there, use the following code snippet to add your custom field:
| <?php /** * Add the field to the checkout page */ add_action(‘woocommerce_after_order_notes’, ‘customise_checkout_field’); function customise_checkout_field($checkout) { echo ‘<div id=”customise_checkout_field”><h2>’ . __(‘Heading’) . ‘</h2>’; woocommerce_form_field(‘customised_field_name’, array( ‘type’ => ‘text’, ‘class’ => array( ‘my-field-class form-row-wide’ ) , ‘label’ => __(‘Customise Additional Field’) , ‘placeholder’ => __(‘Guidence’) , ‘required’ => true, ) , $checkout->get_value(‘customised_field_name’)); echo ‘</div>’; } |
- After implementing your function, visit your checkout page. You’ll find the new field and title added to the default form.
- Next, you’ll need to validate your field to ensure smooth and accurate data entry. For that, use the following snippet:
| <?php /** * Checkout Process */ add_action(‘woocommerce_checkout_process’, ‘customise_checkout_field_process’); function customise_checkout_field_process() { // if the field is set, if not then show an error message. if (!$_POST[‘customised_field_name’]) wc_add_notice(__(‘Please enter value.’) , ‘error’); } |
- With your new field set and validated, you need to ensure saving the information entered into each field. This is where you’ll need this next bit of code:
| <?php /** * Update value of field */ add_action(‘woocommerce_checkout_update_order_meta’, ‘customise_checkout_field_update_order_meta’); function customise_checkout_field_update_order_meta($order_id) { if (!empty($_POST[‘customised_field_name’])) { update_post_meta($order_id, ‘Some Field’, sanitize_text_field($_POST[‘customised_field_name’])); } } |
- Save the code.
With these steps, you can add new fields to your checkout forms.
Step 2: Adding Custom Fields To Checkout
When adding new custom fields, you need to set labels and placeholder texts and decide on electing mandatory fields. To accomplish all that, you just need the following PHP snippet:
| add_filter( ‘woocommerce_checkout_fields’ , ‘woocommerce_checkout_field_editor’ ); // Our hooked in function – $fields is passed via the filter! function woocommerce_checkout_field_editor( $fields ) { $fields[‘shipping’][‘shipping_field_value’] = array( ‘label’ => __(‘Field Value’, ‘woocommerce’), ‘placeholder’ => _x(‘Field Value’, ‘placeholder’, ‘woocommerce’), ‘required’ => true ); return $fields; } |
Step 3: Deleting Fields
The simplest way to make your checkout page less compacted and much easier on the eye is to get rid of unnecessary or unwanted fields. To forego plugins, simply consult the following snippet:
| add_filter( ‘woocommerce_checkout_fields’ , ‘custom_fields_woocommerce’ ); function custom_fields_woocommerce( $fields ) { unset($fields[‘shipping’][‘shipping_first_name’]); unset($fields[‘shipping’][‘shipping_last_name’]); return $fields; } |
Here, the key function is $fields that deals with the removal of fields. Alternatively, however, you can consider removing fields other than the first and last names, like shipping address or phone fields.
Step 4: Showcase Fields Values On The Order Details Page
To highlight the value of the relevant custom field on the order page, use this snippet:
| add_action( ‘woocommerce_admin_order_data_after_shipping_address’, ‘edit_woocommerce_checkout_page’, 10, 1 ); function edit_woocommerce_checkout_page($order){ global $post_id; $order = new WC_Order( $post_id ); echo ‘<p><strong>’.__(‘Field Value’).‘:</strong> ‘ . get_post_meta($order->get_id(), ‘_shipping_field_value’, true ) . ‘</p>’; } |
Customizing WooCommerce Checkout Fields
Modifying new fields on WooCommerce is a fairly simple and straightforward affair. All you need is the custom CSS that’s active in your WooCommerce field or a WordPress tool that specializes in CSS-related edits.
As we’ve learned, developers and store owners can utilize code snippets to realize all manner of customizations beyond what WooCommerce typically offers or permits. For most checkout forms, CSS classes and IDs determine how the following main HTML tags can help you customize your checkout fields and form elements:
| <body class=“woocommerce-checkout”> <div class=“woocommerce”> <form class=“woocommerce-checkout”> <div id=“customer_details” class=“col2-set”> <div class=“woocommerce-billing-fields”> <p class=“form-row”> <div class=“woocommerce-shipping-fields”> <p class=“form-row”> <div class=“woocommerce-additional-fields”> <div id=“order_review” class=“woocommerce-checkout-review-order”> <table class=“woocommerce-checkout-review-order-table”> <div id=“payment”> <ul class=“wc_payment_methods payment_methods methods”> <div class=“form-row place-order”> |
Step 1: Remove The Default Fields
To start customizing WooCommerce checkout, we need to get rid of the preexisting fields. This is where the woocommerce_checkout_fields filter hook will prove helpful. Just use the following snippet to functions.php.
| /** Remove all possible fields **/ function wc_remove_checkout_fields( $fields ) { // Billing fields unset( $fields[‘billing’][‘billing_company’] ); unset( $fields[‘billing’][‘billing_email’] ); unset( $fields[‘billing’][‘billing_phone’] ); unset( $fields[‘billing’][‘billing_state’] ); unset( $fields[‘billing’][‘billing_first_name’] ); unset( $fields[‘billing’][‘billing_last_name’] ); unset( $fields[‘billing’][‘billing_address_1’] ); unset( $fields[‘billing’][‘billing_address_2’] ); unset( $fields[‘billing’][‘billing_city’] ); unset( $fields[‘billing’][‘billing_postcode’] ); // Shipping fields unset( $fields[‘shipping’][‘shipping_company’] ); unset( $fields[‘shipping’][‘shipping_phone’] ); unset( $fields[‘shipping’][‘shipping_state’] ); unset( $fields[‘shipping’][‘shipping_first_name’] ); unset( $fields[‘shipping’][‘shipping_last_name’] ); unset( $fields[‘shipping’][‘shipping_address_1’] ); unset( $fields[‘shipping’][‘shipping_address_2’] ); unset( $fields[‘shipping’][‘shipping_city’] ); unset( $fields[‘shipping’][‘shipping_postcode’] ); // Order fields unset( $fields[‘order’][‘order_comments’] ); return $fields; } add_filter( ‘woocommerce_checkout_fields’, ‘wc_remove_checkout_fields’ ); |
Step 2: Stripping Fields Of “Required” Status
- Add the following snippet to functions.php.
| add_filter( ‘woocommerce_billing_fields’, ‘wc_unrequire_wc_phone_field’); function wc_unrequire_wc_phone_field( $fields ) { $fields[‘billing_phone’][‘required’] = false; return $fields; } |
- The $fields[‘billing_phone’][‘required’] = false indicates that a typically “required” field is no longer so. To restore the original status, simple substitute false with true.
Step 3: Modify Labels And Placeholders
For editing labels and placeholders for input fields, simply add the following snippet to functions.php.
| add_filter(‘woocommerce_checkout_fields’, ‘custom_override_checkout_fields’); function custom_override_checkout_fields($fields) { unset($fields[‘billing’][‘billing_address_2’]); $fields[‘billing’][‘billing_company’][‘placeholder’] = ‘Your Business Name’; $fields[‘billing’][‘billing_company’][‘label’] = ‘Your Business Name’; $fields[‘billing’][‘billing_first_name’][‘placeholder’] = ‘First Name’; $fields[‘shipping’][‘shipping_first_name’][‘placeholder’] = ‘First Name’; $fields[‘shipping’][‘shipping_last_name’][‘placeholder’] = ‘Last Name’; $fields[‘shipping’][‘shipping_company’][‘placeholder’] = ‘Company Name’; $fields[‘billing’][‘billing_last_name’][‘placeholder’] = ‘Last Name’; $fields[‘billing’][‘billing_email’][‘placeholder’] = ‘Email Address ‘; $fields[‘billing’][‘billing_phone’][‘placeholder’] = ‘Phone ‘; return $fields; } |
Utilizing Checkout Manager Plugins
When using WooCommerce plugins for modifying checkout, it’s important to stick the the essential tools. Luckily, tools like the checkout field editor for WooCommerce offer flexible checkout management, complete with premium-grade features and 24/7 support courtesy of seasoned developers.
If you want, you can even consider a range of other popular checkout editing tools, like Checkout X, Direct Checkout, PeachPay, and more. WooCommerce plugins offer some serious advantages, and specialize in designing forms and templates that help you keep sales soaring and cart abandonment minimal.
Plus, if you’re new to PHP hooks and programming, plugins offer much less of a learning curve. Besides, they might seem like they offer less options, but that isn’t always a deal-breaker. Sometimes, an appropriate amount of flexibility means less decision fatigue when it comes to customizing your checkout page.
In Summary
To build a standout WooCommerce checkout page, it helps to be able to think outside the box a little. For most developers, checkout field editors tend to serve as the best one-stop solution for managing their online stores.
However, if you’re interested in a less one-size-fits-all approach, this guide can help you curate a fully personalized page through coding. Ultimately, whichever path you take, customizing your checkout fields is guaranteed to help your store stand out.