CODEWITHSUNDEEP
phpwordpresswoocommercecheckout
Carlos Salvador
Carlos Salvador

Reputation: 41

Woocommerce wrap two checkout fields in a div

I'm trying to wrap the billing state and billing country fields on checkout in a div but seems to not work. This my code:

<div class="woocommerce-billing-fields__field-wrapper">
    <?php
    $fields = $checkout->get_checkout_fields( 'billing' );

    foreach ( $fields as $key => $field ) {
        if($key == 'billing_state'){
            
        } else if($key == 'billing_country'){
            
        } else{
            woocommerce_form_field( $key, $field, $checkout->get_value( $key ) );
        }
    }
    ?>
    <div class="state-province">
        <?php woocommerce_form_field( "billing_state", $checkout->checkout_fields['billing']['billing_state'], $checkout->get_value( 'billing_state' ) ); ?>
        <?php woocommerce_form_field( "billing_country", $checkout->checkout_fields['billing']['billing_country'], $checkout->get_value( 'billing_country' ) ); ?>
    </div>
</div>

Upvotes: 1

Views: 1788

Answers (1)

Carlos Salvador
Carlos Salvador

Reputation: 41

I found a solution disabling class 'form-row' to avoid js from woocommerce and adding priority:

function change_woocommerce_field_markup($field, $key, $args, $value) {

     $field = str_replace('form-row', '', $field);

     $field = '<div class="single-field-wrapper" data-priority="' . $args['priority'] . 
     '">' . $field . '</div>';

      if($key === 'billing_state')
         $field = '<div class="state-province">'.$field;
      else if ($key === 'billing_country')
         $field = $field.'</div>';

     return $field;
   } 

add_filter("woocommerce_form_field","change_woocommerce_field_markup", 10, 4);

Here is the explanation: https://wordpress.stackexchange.com/questions/309700/how-to-hook-on-a-woocommerce-checkout-field/309788

Upvotes: 1

Related Questions