2

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.

LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399
Tom Hartley
  • 93
  • 2
  • 10

1 Answers1

3

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:

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

LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399
  • I understand the WooCommerce docs but how do I put my control and field divs around the input? From what I can see I'm able to change the placeholder and remove fields but not add my own HTML? – Tom Hartley Aug 22 '18 at 16:09
  • @TomHartley I have update my answer with an addition related to your comment. With this you get the right track to make changes in a correct way. – LoicTheAztec Aug 22 '18 at 17:50