WooCommerce – add description before woocommerce_form_field() on checkout

2 Views

I’m adding some custom fields to my checkout page, with following code: 

add_action( 'woocommerce_before_order_notes', 'bs_custom_checkout_fields' );
function bs_custom_checkout_fields( $checkout ) {

    woocommerce_form_field( 'order_domain_name', array(
        'type'          => 'text',
        'class'         => array('my-field-class form-row-wide'),
        'label'         => __('Name','bs'),
        'placeholder'   => __('Enter the name','bs'),
        'required'      => true,
    ), $checkout->get_value( 'order_domain_name' ));
}

I would need to add some additional description before this field, to explain the user what this field means. Is there way to do that?

Read More

Thanks

Post Views: 2

Related posts

Leave a Reply

3 comments

  1. Use the description parameter:

    add_action( 'woocommerce_before_order_notes', 'bs_custom_checkout_fields' );
function bs_custom_checkout_fields( $checkout ) {

woocommerce_form_field( 'order_domain_name', array(
    'type'          => 'text',
    'class'         => array('my-field-class form-row-wide'),
    'label'         => __('Name','bs'),
    'placeholder'   => __('Enter the name','bs'),
    'required'      => true,
    'description    => __('Additional description goes here','bs')
), $checkout->get_value( 'order_domain_name' ));

    }

  2. I found two options to fix this in a way that will be safe with WooCommerce updates.

    One way is to use the filter ‘woocommerce_form_field’. This passes the $field variable as well as $key, $args, $value for the field. You can edit the output, but this is a bit tedious and may need updating in the future.

    A much more simple option is to change it through CSS by utilizing flexbox. I added the following CSS code to move the description above the form fields:

    .woocommerce-checkout .woocommerce-input-wrapper {
    display: -webkit-box;
    display:    -moz-box;
    display:         box;
    -webkit-box-orient: vertical;
       -moz-box-orient: vertical;
            box-orient: vertical;
    width: 100%;
}
.woocommerce-checkout .woocommerce-input-wrapper .description {
    display:  -ms-flexbox;
    display:  -webkit-box; 
    display:     -moz-box;
    display: -webkit-flex; 
    display:         flex;
    -webkit-box-ordinal-group: 1;
       -moz-box-ordinal-group: 1;
               -ms-flex-order: 1; 
                -webkit-order: 1; 
                        order: 1;
    font-style: italic;
}
.woocommerce-checkout .woocommerce-input-wrapper input,
.woocommerce-checkout .woocommerce-input-wrapper textarea,
.woocommerce-checkout .woocommerce-input-wrapper .select2-container {
    display:  -ms-flexbox;
    display:  -webkit-box; 
    display:     -moz-box;
    display: -webkit-flex; 
    display:         flex;
    -webkit-box-ordinal-group: 2;
       -moz-box-ordinal-group: 2;
               -ms-flex-order: 2; 
                -webkit-order: 2; 
                        order: 2;
}

  3. This is in answer to putting the description underneath the label.

    You need to hack /plugins/woocommerce/includes/wc-template-functions.php

    Move the Line 2103 – $field_html .= $field;
    to Line 2108.

    That’s all you can do, not WooCommerce update proof unfortunately.