Custom checkout fields without plugin in Woocommerce

Checkout process is the final stage of every shopping action. This means that we must have an excellent and complete checkout page for our e-shop in any case. WooCommerce, the popular e-commerce platform for WordPress, provides a robust default checkout experience that caters to a wide range of businesses.

However, there are situations where you might need to collect additional information from customers during the checkout process. This could include specific order notes, delivery instructions, or other custom data. While there are many plugins available for adding custom checkout fields, you can achieve this without the need for additional plugins through simple custom code. In this comprehensive guide, we will explore how to add custom checkout fields to your WooCommerce store without relying on third-party plugins.

WooCommerce default checkout fields

WooCommerce’s default checkout fields are designed to be versatile and accommodate various types of products and services. These fields typically include:

1. Billing and Shipping Details: Customers are required to provide their billing and shipping information, including name, address, and contact details.
2. Payment Information: This section allows customers to choose their preferred payment method, such as credit card or PayPal.
3. Order Summary: This part displays the products in the cart, their quantities, and the total order amount.
4. Terms and Conditions: Customers may need to agree to terms and conditions before placing an order.

While these default fields are adequate for many businesses, you might find scenarios where you need to collect additional information to tailor the checkout process to your specific needs.

Scenarios where extra fields are needed

There are several scenarios where you might want to add custom checkout fields to your WooCommerce store:

1. Product Customization: If you offer customizable products, you may need fields for customers to specify product preferences, such as size, color, or personalization.
2. Delivery Instructions: For businesses with physical products, you may require additional fields for delivery instructions, like specific drop-off locations, delivery date preferences, or any other relevant details.
3. Membership or Subscription Data: If you offer membership or subscription-based services, you might need custom fields to collect membership numbers, subscription preferences, or additional user data.
4. Feedback or Comments: You may want to provide a dedicated section for customers to leave feedback, special requests, or any comments related to their order.
5. Tax or VAT Numbers: In cases where tax compliance is essential, you may need custom fields to collect tax or VAT numbers from customers.
6. Gift Wrapping or Greetings: If your store offers gift wrapping or personalized greetings, you can add fields for customers to specify gift wrapping preferences or leave special messages.

Benefits of custom code vs plugins

While there are plugins available that make it easy to add custom checkout fields, there are several benefits to implementing custom fields with simple code:

1. Lightweight Solution: Avoiding additional plugins keeps your website lightweight and reduces the risk of compatibility issues or plugin conflicts.
2. Full Control: Custom code gives you full control over the functionality and appearance of the custom fields, allowing you to tailor them precisely to your requirements.
3. Performance: Minimizing the use of plugins can contribute to better website performance and faster loading times.
4. Security: By writing custom code, you can ensure the security and integrity of your website without relying on third-party developers.

Instructions to Add Fields

To add custom checkout fields to your WooCommerce store without a plugin, follow these steps:

Create Your Custom Checkout Fields

Start by creating the custom fields you need. You can do this by adding code to functions.php file of your child theme. For example, to add an input field for a “Delivery Date” during checkout, you can use the following code:

add_action('woocommerce_before_order_notes', 'custom_checkout_field');

function custom_checkout_field($checkout)
{
    echo '<div id="custom_checkout_field"><h2>' . __('Delivery Date') . '</h2>';
    woocommerce_form_field('delivery_date', array(
        'type' => 'date',
        'class' => array('delivery-date-field form-row-wide'),
        'label' => __('Select a delivery date'),
        'required' => true,
    ), $checkout->get_value('delivery_date'));
    echo '</div>';
}

This code creates a new section for the “Delivery Date” field, which is a date input field. You can adapt this code to your specific requirements by changing field names, types, and labels.

Save Custom Checkout Field Data

To ensure that the data entered by customers is saved, add the following code to your functions.php file:

add_action('woocommerce_checkout_update_order_meta', 'save_custom_checkout_field');

function save_custom_checkout_field($order_id)
{
    if (!empty($_POST['delivery_date'])) {
        update_post_meta($order_id, 'Delivery Date', sanitize_text_field($_POST['delivery_date']));
    }
}

This code saves the “Delivery Date” field data to the order.

Display Custom Checkout Field Data in the Order

To display the custom field data in the order details, add the following code:

add_action('woocommerce_admin_order_data_after_billing_address', 'custom_checkout_field_display_admin_order_meta', 10, 1);

function custom_checkout_field_display_admin_order_meta($order)
{
    echo '<p><strong>' . __('Delivery Date') . ':</strong> ' . get_post_meta($order->id, 'Delivery Date', true) . '</p>';
}

This code displays the “Delivery Date” in the order details for both the customer and the store administrator.

Display Custom Checkout Field Data in the Email

We need to field to be able in the order email also. To display the custom field data in the order email, add the following code:

add_filter('woocommerce_email_order_meta_keys', 'my_custom_order_meta_keys');

function my_custom_order_meta_keys( $keys ) {
    $keys[] = 'delivery_date';
     return $keys;
}

This code displays the “Delivery Date” in the email content for both the customer and the store administrator.

Custom checkout fields for WooCommerce code snippet

Customizing your WooCommerce checkout fields without relying on plugins allows you to tailor the shopping experience to your specific needs. Whether you need additional fields for product customization, delivery instructions, membership data, or any other purpose, the flexibility of custom code empowers you to create a seamless and personalized checkout process for your customers. By following the instructions provided in this guide, you can implement custom checkout fields to enhance your WooCommerce store while maintaining full control and optimizing performance.