user1595112 user1595112 - 16 days ago 5
PHP Question

Showing a description under input field on WooCommerce Checkout Page

Scenario - We're working on a particular WooCommerce site that is meant for Charities only. So on the Checkout page, we'd like to change "Company Name" to "Charity Name"

We've manage to to that with the following code. -

add_filter( 'woocommerce_billing_fields', 'custom_woocommerce_billing_fields' );
function custom_woocommerce_billing_fields( $fields ) {
$fields['billing_company'] = array(
'label' => __('Charity Name', 'woothemes'),
'placeholder' => __('Charity Name', 'woothemes'),
'required' => true,
'class' => array('billing-company'),

);
return $fields;
}


This changes the field name alright, however we require a description to show up below the Label that reads - "Please enter the full name of your Charity"

We tried adding the line

'description' => __( 'Please enter the full name of your Charity', 'woothemes' )


However, it doesn't seem to work or show up on the page or even in the code.

Could someone please guide me with the same.

Thank you in advance.

Answer

This isn't well documented, but these are the default fields for the woocommerce_form_field() function, which is where the array is passed, so you can determine the possible keys. It is found in includes/wc-template-functions.php:

$defaults = array(
    'type'              => 'text',
    'label'             => '',
    'placeholder'       => '',
    'maxlength'         => false,
    'required'          => false,
    'class'             => array(),
    'label_class'       => array(),
    'input_class'       => array(),
    'return'            => false,
    'options'           => array(),
    'custom_attributes' => array(),
    'validate'          => array(),
    'default'           => '',
);

There isn't a way in this method to append your own HTML, but you could hack it in using the custom_attributes (save your text description) and input_class (tell jQuery to use this to append to the DOM) options.

  • Add CSS class and custom attribute to hold the values for jQuery

    add_filter( 'woocommerce_billing_fields', 'custom_woocommerce_billing_fields' );
    function custom_woocommerce_billing_fields( $fields ) {
        $fields['billing_company']  = array(
            'label' => __('Charity Name', 'woothemes'),
            'placeholder' => __('Charity Name', 'woothemes'),
            'required' => true,
            'class' => array('billing-company'),
            'custom_attributes' = array( 'item-description'=>'YOUR DESCRIPTION' ),
            'input_class' = array( 'append-description' ),
        );
        return $fields;
    }
    
  • Use jQuery to use your CSS class as a selector and grab the description

    jQuery('.append-description').each(function(){
        var item = jQuery(this);
        var description = item.attr('item-description');
        item.parent().append('<div>'+description+'</div>');
    });
    

Please note the above code is untested and likely doesn't work, use as an example for your implementation.