websnippets

WooCommerce: Add House Number Field @ Checkout

A North European client told me they’re really strict about billing and shipping addresses over there. Couriers usually require a separate “House Number” in order to dispatch packages within those countries.

This must be therefore placed on the checkout, BESIDE the “Address_1” field and made required. Also, it’s a good idea to make this show in the Admin Order, thank you page and notification Emails.

Add House Number in the WooCommerce Checkout

Before coding…

If you don’t use the “Address_2” field you don’t need any customization! Just enable and make that field required via WordPress > Customize > WooCommerce > Checkout > Address 2 Field.

All you needed is now available to you. If you really require a little customization, that could be related to the “Address 1” and “Address 2” field placeholders. To edit and rename them use this snippet.

PHP Snippet 1: Edit Address Fields Placeholder @ WooCommerce Checkout Billing/Shipping

/**
 * @snippet       Rename Address 1 & 2 Placeholder | WooCommerce Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 3.8
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_filter( 'woocommerce_default_address_fields' , 'bbloomer_rename_address_placeholders_checkout', 9999 );
 
function bbloomer_rename_address_placeholders_checkout( $address_fields ) {
   $address_fields['address_1']['placeholder'] = 'House Number';
   $address_fields['address_2']['placeholder'] = 'Street Name';
   return $address_fields;
}

PHP Snippet: Add House Number @ WooCommerce Checkout Billing/Shipping

If, on the other end, you need a separate, new field (because you already use “Address 1” and “Address 2” and need a new “House Number” field), then you should look into this customization.

/**
 * @snippet       Add House Number to WooCommerce Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.8
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
  
add_filter( 'woocommerce_checkout_fields' , 'bbloomer_add_field_and_reorder_fields' );
   
function bbloomer_add_field_and_reorder_fields( $fields ) {
   
    // Add New Fields
        
    $fields['billing']['billing_houseno'] = array(
    'label'     => 'House Number',
    'placeholder'   => 'House Number',
    'priority' => 51,
    'required'  => true,
    'clear'     => true
     );
   
    $fields['shipping']['shipping_houseno'] = array(
    'label'     => 'House Number',
    'placeholder'   => 'House Number',
    'priority' => 51,
    'required'  => true,
    'clear'     => true
     );     
      
    return $fields;
}
  
// ------------------------------------
// Add Billing House # to Address Fields
  
add_filter( 'woocommerce_order_formatted_billing_address' , 'bbloomer_default_billing_address_fields', 10, 2 );
  
function bbloomer_default_billing_address_fields( $fields, $order ) {
    $fields['billing_houseno'] = get_post_meta( $order->get_id(), '_billing_houseno', true );
    return $fields;
}
  
// ------------------------------------
// Add Shipping House # to Address Fields
  
add_filter( 'woocommerce_order_formatted_shipping_address' , 'bbloomer_default_shipping_address_fields', 10, 2 );
  
function bbloomer_default_shipping_address_fields( $fields, $order ) {
    $fields['shipping_houseno'] = get_post_meta( $order->get_id(), '_shipping_houseno', true );
    return $fields;
}
  
// ------------------------------------
// Create 'replacements' for new Address Fields
  
add_filter( 'woocommerce_formatted_address_replacements', 'add_new_replacement_fields',10,2 );
  
function add_new_replacement_fields( $replacements, $address ) {
    $replacements['{billing_houseno}'] = isset($address['billing_houseno']) ? $address['billing_houseno'] : '';
    $replacements['{shipping_houseno}'] = isset($address['shipping_houseno']) ? $address['shipping_houseno'] : '';
    return $replacements;
}
  
// ------------------------------------
// Show Shipping & Billing House # for different countries
  
add_filter( 'woocommerce_localisation_address_formats', 'bbloomer_new_address_formats' );
  
function bbloomer_new_address_formats( $formats ) {
    $formats['IE'] = "{name}\n{company}\n{address_1}\n{billing_houseno}\n{shipping_houseno}\n{city}\n{state}\n{postcode}\n{country}";
    $formats['UK'] = "{name}\n{company}\n{address_1}\n{billing_houseno}\n{shipping_houseno}\n{city}\n{state}\n{postcode}\n{country}";
    // and so on...
    return $formats;
}

WooCommerce: Turn Address Checkout Field Into Drop-down

Talking about UX optimization, the WooCommerce checkout is where you should focus most of your time. The checkout page of an ecommerce website is one of the main reasons for shopping cart abandonment – additional hidden charges, lack of trust, confusion and also, too many fields to fill out.

Today, we will see how to turn the “Address 2” field into a dropdown. This is if you sell to specific areas and you want to minimize the writing time – why not let customers pick from a list instead?

Turn the WooCommerce checkout address field into a dropdown select

PHP Snippet: Turn Address Checkout Field Into Drop-down – WooCommerce

/**
* @snippet Turn Address Checkout Field Into Drop-down  - WooCommerce
* @how-to Get CustomizeWoo.com FREE
* @sourcecode https://businessbloomer.com/?p=73350
* @author Rodolfo Melogli
* @testedwith WooCommerce 3.2.5
*/
 
add_filter( 'woocommerce_default_address_fields' , 'bbloomer_address_field_dropdown' );
 
function bbloomer_address_field_dropdown( $address_fields ) {
 
    $location_array = array(
      'Location 1' => 'Location 1',
      'Location 2' => 'Location 2',
      'Location 3' => 'Location 3',
      'Location 4' => 'Location 4',
    );
 
$address_fields['address_2']['label'] = 'Location';
$address_fields['address_2']['type'] = 'select';
$address_fields['address_2']['options'] = $location_array;
 
return $address_fields;
 
}