CODEWITHSUNDEEP
wordpresswoocommerce
jwinn
jwinn

Reputation: 1125

Add woocommerce checkout field to right column, not left

I am integrating woocommerce with a custom theme. When I add a custom checkout field, it appears at the bottom of all the other fields on the left column. I would like it to appear in the right hand column, underneath the textarea "Order Notes".

Code in functions.php:

// Change Checkout Fields
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
function custom_override_checkout_fields( $fields ) {
    // Add new fields to checkout
     $fields['billing']['card_requests'] = array(
        'type'      => 'textarea',
        'label'     => __('Card Requests', 'woocommerce'),
        'placeholder'   => _x('Please enter messages for your handwritten cards here.', 'placeholder', 'woocommerce'),
        'required'  => false
     );
    return $fields;
}

In the outputted HTML, there is a col-1 div, and a col-2 div. Which I think is from templates/formcheckout.php :

        <div class="col-1">
            <?php do_action( 'woocommerce_checkout_billing' ); ?>
        </div>
        <div class="col-2">
            <?php do_action( 'woocommerce_checkout_shipping' ); ?>
        </div>

Screenshot: /checkout/ page

Upvotes: 1

Views: 2783

Answers (1)

Terry
Terry

Reputation: 184

Add the following to your functions.php:

// Change Checkout Fields
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
function custom_override_checkout_fields( $fields ) {
  // Add new fields below order notes section
  $fields['order']['card_requests'] = array(
    'type'      => 'textarea',
    'label'     => __('Card Requests', 'woocommerce'),
    'placeholder'   => _x('Please enter messages for your handwritten cards here.', 'placeholder', 'woocommerce'),
    'required'  => false
  );
  return $fields;
}

Upvotes: 2

Related Questions