CODEWITHSUNDEEP
phpwordpresswoocommerce
user1049961
user1049961

Reputation: 2736

WooCommerce - add description before woocommerce_form_field() on checkout

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?

Thanks

Upvotes: 1

Views: 6126

Answers (3)

Aaron
Aaron

Reputation: 31

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;
}

Upvotes: 2

Mr Digital
Mr Digital

Reputation: 29

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.

Upvotes: -1

Alan
Alan

Reputation: 159

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' ));

}

Upvotes: 2

Related Questions