How to edit checkout fields in WooCommerce

Question

I am trying to edit the front-end of my checkout page within WooCommerce.

At the moment this is the generated html code that is shown on the checkout page:

<div class="column">
    <h2 class="title">Billing Details</h2>
    <?php if ( $checkout->get_checkout_fields() ) : ?>

    <?php do_action( 'woocommerce_checkout_before_customer_details' ); ?>

        <?php do_action( 'woocommerce_checkout_billing' ); ?>

    <?php do_action( 'woocommerce_checkout_after_customer_details' ); ?>

    <?php endif; ?>
</div>

How do I change this so that the output code is like this:

<div class="column">
    <h2 class="title">Billing Details</h2>
    <?php if ( $checkout->get_checkout_fields() ) : ?>

    <?php do_action( 'woocommerce_checkout_before_customer_details' ); ?>

        <div class="field">
          <label class="label">First Name</label>
          <div class="control">
            <input class="input" type="text" placeholder="First Name">
          </div>
        </div>

        etc......

    <?php do_action( 'woocommerce_checkout_after_customer_details' ); ?>

    <?php endif; ?>
</div>

This is to make the front-end look a lot more appealing for the user as I have already got CSS styling used across the other site pages and to clear up all the unnecessary markup produced by WooCommerce.

Any help is appreciated.

Answer 1

To edit checkout fields in woocommerce you will use some action and filter hooks like describe on the official documentation:

Customizing checkout fields using actions and filters in Woocommerce

It will explain you how to make the desired changes, giving you many code examples.

You will find in StackOverFlow many related threads using this search .

---

Update (related to your comment)

Make changes on the generated html field types:

All checkout fields are generated from the function woocommerce_form_field() and if you look to the source code you can use the composite filter hook "woocommerce_form_field_{$args\\[type\\]}" where $args[type] is the targeted field type to be changed:

$field = apply_filters( 'woocommerce_form_field_' . $args['type'], $field, $key, $args, $value );

Here are some existing examples code threads using this hook:

• How to rearrange/customize html in woocommerce checkout form fields
• WooCommerce Custom Fields - Multiselect
• WooCommerce: Dynamic Custom Checkout Fields in admin

As this is for checkout, you will use the conditional tag is_checkout() .