Display custom checkout address field 2 label in Woocommerce

Asked
Active3 hr before
Viewed126 times

6 Answers

displaycustom
90%

I found a way to change the placeholder but not the label of the checkout input fields in woocommerce., Meta Stack Overflow , Stack Overflow Public questions & answers , Stack Overflow help chat

To make the <label> visible, you need to remove the class from the <label> tag adding this line:

$address_fields['address_2']['label_class'] = array(); // No label class
load more v
88%

If you are unfamiliar with code and resolving potential conflicts, we have an extension that can help: WooCommerce Checkout Field Editor. Installing and activating this extension overrides any code below that you try to implement; and you cannot have custom checkout field code in your functions.php file when the extension is activated.,The priority argument is set during the add_action function, after you establish which hook you’re connecting to and what the name of your custom function will be.,Priority in regards to PHP code helps establish when a bit of code — called a function — runs in relation to a page load. It is set inside of each function and is useful when overriding existing code for custom display.,That means you have full control over checkout fields – you only need to know how to access them.

Billing:

$address_fields = apply_filters('woocommerce_billing_fields', $address_fields);
load more v
72%

There are two type of fields in WooCommerce – billing and shipping fields. Some of the fields are presented in both of these categories, like a first name field or a country field.,woocommerce_shipping_fields – the same, but affects only shipping fields,Okay, our field is now displayed on Edit Address pages in “My Account” and in the Checkout page. But what about WordPress admin? It would be cool, if the field will appear also in edit profile pages, don’t you think so? Here is what I mean:,Creating an address field is so much easier than creating fields for the Edit Account page or for the Checkout page.

add_filter('woocommerce_default_address_fields', 'misha_remove_fields');

function misha_remove_fields($fields) {

   unset($fields['address_2']);
   return $fields;

}
load more v
65%

WooCommerce: How to Add a Custom Checkout Field ,Check out these free video tutorials. You can learn how to customize WooCommerce without unnecessary plugins, how to properly configure the WooCommerce plugin settings and even how to master WooCommerce troubleshooting in case of a bug!,WooCommerce Checkout Fields Customization Guide ,WooCommerce Online Courses

/**
 * @snippet       Move Labels Inside Inputs - WooCommerce Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 5
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_filter('woocommerce_checkout_fields', 'bbloomer_labels_inside_checkout_fields', 9999);

function bbloomer_labels_inside_checkout_fields($fields) {
   foreach($fields as $section => $section_fields) {
      foreach($section_fields as $section_field => $section_field_settings) {
         $fields[$section][$section_field]['placeholder'] = $fields[$section][$section_field]['label'];
         $fields[$section][$section_field]['label'] = '';
      }
   }
   return $fields;
}
75%

The following code removes the address fields from the billing screen.,This code snippet will function as the shipping and billing address data and reveal inputs when the user clicks the little pencil icon.,Add this code snippet to the functions.php located in the theme folder of the WordPress website.,The following code will add a field to the checkout page, saves the data to the order meta, and displays the order meta in the orders admin. I received several queries about the process of adding multiple fields. To help address the issue, this code snippet has been modified to add two fields.

The following code removes the address fields from the billing screen.

function woocommerce_remove_additional_information_checkout($fields) {
   unset($fields["billing_first_name"]);
   unset($fields["billing_last_name"]);
   return $fields;
}
add_filter('woocommerce_billing_fields', 'woocommerce_remove_additional_information_checkout');

The following code will add a field to the checkout page, saves the data to the order meta, and displays the order meta in the orders admin. I received several queries about the process of adding multiple fields. To help address the issue, this code snippet has been modified to add two fields.

function cloudways_custom_checkout_fields($fields){
    $fields['cloudways_extra_fields'] = array(
            'cloudways_text_field' => array(
                'type' => 'text',
                'required'      => true,
                'label' => __( 'Input Text Field' )
                ),
            'cloudways_dropdown' => array(
                'type' => 'select',
                'options' => array( 'first' => __( 'First Option' ), 'second' => __( 'Second Option' ), 'third' => __( 'Third Option' ) ),
                'required'      => true,
                'label' => __( 'Dropdown field' )
                )
            );

    return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'cloudways_custom_checkout_fields' );

function cloudways_extra_checkout_fields(){

    $checkout = WC()->checkout(); ?>

    <div class="extra-fields">
    <h3><?php _e( 'Additional Fields' ); ?></h3>

    <?php
       foreach ( $checkout->checkout_fields['cloudways_extra_fields'] as $key => $field ) : ?>

            <?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>

        <?php endforeach; ?>
    </div>

<?php }
add_action( 'woocommerce_checkout_after_customer_details' ,'cloudways_extra_checkout_fields' );

Save the Data of Custom Checkout WooCommerce Fields

function cloudways_save_extra_checkout_fields($order_id, $posted) {
   // don't forget appropriate sanitization if you are using a different field type
   if (isset($posted['cloudways_text_field'])) {
      update_post_meta($order_id, '_cloudways_text_field', sanitize_text_field($posted['cloudways_text_field']));
   }
   if (isset($posted['cloudways_dropdown']) && in_array($posted['cloudways_dropdown'], array('first', 'second', 'third'))) {
      update_post_meta($order_id, '_cloudways_dropdown', $posted['cloudways_dropdown']);
   }
}
add_action('woocommerce_checkout_update_order_meta', 'cloudways_save_extra_checkout_fields', 10, 2);

Display  the Data of  WooCommerce Custom Fields to User

function cloudways_display_order_data( $order_id ){  ?>
    <h2><?php _e( 'Extra Information' ); ?></h2>
    <table class="shop_table shop_table_responsive additional_info">
        <tbody>
            <tr>
                <th><?php _e( 'Input Text Field:' ); ?></th>
                <td><?php echo get_post_meta( $order_id, '_cloudways_text_field', true ); ?></td>
            </tr>
            <tr>
                <th><?php _e( 'Drop Down Field:' ); ?></th>
                <td><?php echo get_post_meta( $order_id, '_cloudways_dropdown', true ); ?></td>
            </tr>
        </tbody>
    </table>
<?php }
add_action( 'woocommerce_thankyou', 'cloudways_display_order_data', 20 );
add_action( 'woocommerce_view_order', 'cloudways_display_order_data', 20 );

This code snippet will function as the shipping and billing address data and reveal inputs when the user clicks the little pencil icon.

function cloudways_display_order_data_in_admin( $order ){  ?>
    <div class="order_data_column">

        <h4><?php _e( 'Additional Information', 'woocommerce' ); ?><a href="#" class="edit_address"><?php _e( 'Edit', 'woocommerce' ); ?></a></h4>
        <div class="address">
        <?php
            echo '<p><strong>' . __( 'Text Field' ) . ':</strong>' . get_post_meta( $order->id, '_cloudways_text_field', true ) . '</p>';
            echo '<p><strong>' . __( 'Dropdown' ) . ':</strong>' . get_post_meta( $order->id, '_cloudways_dropdown', true ) . '</p>'; ?>
        </div>
        <div class="edit_address">
            <?php woocommerce_wp_text_input( array( 'id' => '_cloudways_text_field', 'label' => __( 'Some field' ), 'wrapper_class' => '_billing_company_field' ) ); ?>
            <?php woocommerce_wp_text_input( array( 'id' => '_cloudways_dropdown', 'label' => __( 'Another field' ), 'wrapper_class' => '_billing_company_field' ) ); ?>
        </div>
    </div>
<?php }
add_action( 'woocommerce_admin_order_data_after_order_details', 'cloudways_display_order_data_in_admin' );
function cloudways_save_extra_details($post_id, $post) {
   update_post_meta($post_id, '_cloudways_text_field', wc_clean($_POST['_cloudways_text_field']));
   update_post_meta($post_id, '_cloudways_dropdown', wc_clean($_POST['_cloudways_dropdown']));
}
add_action('woocommerce_process_shop_order_meta', 'cloudways_save_extra_details', 45, 2);

Add WooCommerce Custom Fields to Order Emails

function cloudways_email_order_meta_fields($fields, $sent_to_admin, $order) {
   $fields['instagram'] = array(
      'label' => __('Some field'),
      'value' => get_post_meta($order - > id, '_cloudways_text_field', true),
   );
   $fields['licence'] = array(
      'label' => __('Another field'),
      'value' => get_post_meta($order - > id, '_cloudways_dropdown', true),
   );
   return $fields;
}
add_filter('woocommerce_email_order_meta_fields', 'cloudways_email_order_meta_fields', 10, 3);

If you wish to customize the output in the emails,  you can add some text to any of the hooks available in the email templates.

function cloudways_show_email_order_meta( $order, $sent_to_admin, $plain_text ) {
    $cloudways_text_field = get_post_meta( $order->id, '_cloudways_text_field', true );
    $cloudways_dropdown = get_post_meta( $order->id, '_cloudways_dropdown', true );
    if( $plain_text ){
        echo 'The value for some field is ' . $cloudways_text_field . ' while the value of another field is ' . $cloudways_dropdown;
    } else {
        echo '<p>The value for <strong>input text field</strong> is ' . $cloudways_text_field. ' while the value of <strong>drop down</strong> is ' . $cloudways_dropdown . '</p>';
    }
}
add_action('woocommerce_email_customer_details', 'cloudways_show_email_order_meta', 30, 3 );
load more v
40%

The Checkout Field Editor (Checkout Manager) for WooCommerce premium plugin homepage.,Search and locate ‘Checkout Field Editor (Checkout Manager) for WooCommerce’ plugin.,Translate “Checkout Field Editor (Checkout Manager) for WooCommerce” into your language.,For the complete list of features, Please visit WooCommerce Checkout Field Editor (Checkout Manager) plugin’s official page.

Add additional fields to your Checkout page using the Checkout Manager plugin. You can add seven different types of checkout fields in your WooCommerce checkout page and collect more information from the end-user. The various field types it supports include:

* Text
   *
   Password *
   Email *
   Phone *
   Select *
   Textarea *
   Radio
load more v