Checkout page input and add class in woo-commerce via hooks

To add a custom class to the input field on the WooCommerce checkout page, you can use the woocommerce_checkout_fields filter hook. Here’s an example code snippet that you can add to your theme’s functions.php file:

function custom_checkout_fields( $fields ) {
    $fields['billing']['billing_first_name']['class'] = array( 'custom-class' );
    return $fields;
add_filter( 'woocommerce_checkout_fields', 'custom_checkout_fields' );

This code adds a custom class custom-class to the billing first name field on the checkout page. You can modify this code to add a custom class to any other input field by changing the field key and class name.

Once you have added this code, the custom class will be applied to the input field on the checkout page. You can then use CSS to style the input field based on the custom class.

Also, you can use the `woocommerce_form_field_args` filter to add a class. Use the following code.

add_filter('woocommerce_form_field_args',  'wc_form_field_args',10,3);
  function wc_form_field_args($args, $key, $value) {
  $args['input_class'] = array( 'form-control' );
  return $args;

Leave a Reply

Your email address will not be published. Required fields are marked *