As an online store owner, if you are targeting to sell products within specific regions, you must focus more on collecting customers’ delivery pin codes. For example, if you have a store that sells fresh produce and wants to deliver only to specific local postcodes within a 50-mile radius of the farm. In such specific use cases, this customization helps to avoid invalid orders and to double-check whether customers’ billing postcodes align with your delivery regions.
This handy code snippet allows you to collect the postcode directly on the product page using custom input fields. Additionally, the captured postcode is automatically set as the billing postcode, minimizing the risk of manual entry errors by pre-filling the billing information.
Solution: Automatically Set WooCommerce Billing Postcode from a Product Custom Input Field
The code allows customers to enter their postcode on the product page, and this postcode is then automatically set for both cart totals and billing pincode field.
add_action('woocommerce_after_add_to_cart_button', 'ts_custom_field_delivery_postcode', 10 ); function ts_custom_field_delivery_postcode() { woocommerce_form_field('postcode_note', array( 'type' => 'text', 'class' => array('my-field-class', 'form-row-wide'), 'label' => __('Postcode'), 'placeholder' => __('Enter your service postcode...'), 'required' => true, ), ''); } // Add the postcode to cart item data add_filter('woocommerce_add_cart_item_data', 'ts_add_delivery_postcode_to_cart_item_data', 20, 2); function ts_add_delivery_postcode_to_cart_item_data($cart_item_data, $product_id) { if (isset($_POST['postcode_note']) && !empty($_POST['postcode_note'])) { $postcode_note = sanitize_text_field($_POST['postcode_note']); $cart_item_data['postcode_note'] = $postcode_note; // Set the postcode in the customer session for shipping and billing WC()->customer->set_shipping_postcode($postcode_note); WC()->customer->set_billing_postcode($postcode_note); } return $cart_item_data; } // Set the postcode in the shipping calculator and checkout fields add_action('woocommerce_cart_calculate_fees', 'ts_set_customer_postcode_in_session'); function ts_set_customer_postcode_in_session() { if (isset($_POST['postcode_note']) && !empty($_POST['postcode_note'])) { $postcode_note = sanitize_text_field($_POST['postcode_note']); WC()->customer->set_shipping_postcode($postcode_note); WC()->customer->set_billing_postcode($postcode_note); } }
Output
When a customer visits the product page, they will see a product input field where they can enter their postcode.
![How to Automatically Set WooCommerce Billing Postcode from a Custom Input Field? 1 How to Automatically Set WooCommerce Billing Postcode from a Custom Input Field? - Tyche Softwares](https://media.tychesoftwares.com/wp-content/uploads/Custom-Input-Field-to-collect-delivery-Postcode-on-Product-page-1024x618.png)
Once the customer enters their postcode and proceeds, the captured postcode is then automatically set as both the shipping calculator address and the billing postcode.
![How to Automatically Set WooCommerce Billing Postcode from a Custom Input Field? 2 How to Automatically Set WooCommerce Billing Postcode from a Custom Input Field? - Tyche Softwares](https://media.tychesoftwares.com/wp-content/uploads/Automatically-set-the-custom-input-field-retrived-from-product-page-1024x664.png)
Just like the product options mentioned above for gathering customer information, you can also add additional custom input fields, such as email addresses and phone numbers, directly on the WooCommerce product page. This enables you to collect and store contact details from your customers seamlessly.