title: Stylize WooCommerce checkout fields
body: <p>I've been customizing a theme for WooCommerce and encountered a dead end. I want to stylize checkout fields for them to be in two columns, right now it looks like this (one column only):</p>
  
  <p><a href="https://i.stack.imgur.com/NEjrc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NEjrc.png" alt="screenshot"></a>
  </p>
  
  <p>Due to WP and WooCommerce codex I have no access to individual html elements (plugin author  also instructed me to use CSS only), or at least I have no idea which file to look in. Is there a way to customize them using CSS only? Or, if it is possible, which file can I edit to modify those fields with php?</p>
  
  <p>EDIT: I am adding the html/php as requested.</p>
  
  <pre><code>&lt;?php
  /**
   * Checkout Form
   *
   * @author      WooThemes
   * @package     WooCommerce/Templates
   * @version     2.0.0
   */
  
  if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
  
  global $woocommerce;
  
  wc_print_notices();
  
  do_action( 'woocommerce_before_checkout_form', $checkout );
  
  // If checkout registration is disabled and not logged in, the user cannot checkout
  if ( ! $checkout-&gt;enable_signup &amp;&amp; ! $checkout-&gt;enable_guest_checkout &amp;&amp; ! is_user_logged_in() ) {
      echo apply_filters( 'woocommerce_checkout_must_be_logged_in_message', __( 'You must be logged in to checkout.', 'woocommerce' ) );
      return;
  }
  
  // filter hook for include new pages inside the payment method
  $get_checkout_url = apply_filters( 'woocommerce_get_checkout_url', WC()-&gt;cart-&gt;get_checkout_url() ); ?&gt;
  
  &lt;form name="checkout" method="post" class="checkout billing-form clearfix" action="&lt;?php echo esc_url( $get_checkout_url ); ?&gt;"&gt;
  
      &lt;?php if ( sizeof( $checkout-&gt;checkout_fields ) &gt; 0 ) : ?&gt;
  
          &lt;?php do_action( 'woocommerce_checkout_before_customer_details' ); ?&gt;
  
          &lt;div class="col2-set" id="check-accordion"&gt;
  
  
                  &lt;?php do_action( 'woocommerce_checkout_billing' ); ?&gt;
  
  
                  &lt;?php do_action( 'woocommerce_checkout_shipping' ); ?&gt;
  
          &lt;/div&gt;
  
          &lt;?php do_action( 'woocommerce_checkout_after_customer_details' ); ?&gt;
          &lt;div class="review-accordion"&gt;
              &lt;h5 id="order_review_heading"&gt;&lt;small&gt;&lt;?php _e('Step 3', 'Maxshop')?&gt;&lt;/small&gt;&lt;a href="#"&gt;&lt;?php _e('Your order', 'Maxshop'); ?&gt;&lt;/a&gt;&lt;/h5&gt;
      &lt;?php endif; ?&gt;
  
      &lt;?php do_action( 'woocommerce_checkout_order_review' ); ?&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  
  &lt;?php do_action( 'woocommerce_after_checkout_form', $checkout ); ?&gt;
  </code></pre>
  
  <p>EDIT: HTML code from the browser, as requested:</p>
  
  <pre><code>&lt;form name="checkout" method="post" class="checkout billing-form clearfix" action="http://www.globusy.eu/sklep/zamowienie/"&gt;
  
  
  
          &lt;div class="col2-set ui-accordion ui-widget ui-helper-reset" id="check-accordion" role="tablist"&gt;
  
  
  
  
              &lt;h5 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-header-active ui-state-active ui-corner-top ui-accordion-icons" role="tab" id="ui-accordion-check-accordion-header-0" aria-controls="ui-accordion-check-accordion-panel-0" aria-selected="true" tabindex="0"&gt;&lt;span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"&gt;&lt;/span&gt;&lt;small&gt;Krok 2&lt;/small&gt;&lt;a href="#"&gt;Adres dostawy&lt;/a&gt;&lt;/h5&gt;
  
          &lt;div class="clearfix ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" id="ui-accordion-check-accordion-panel-0" aria-labelledby="ui-accordion-check-accordion-header-0" role="tabpanel" aria-expanded="true" aria-hidden="false" style="display: block; height: 770px;"&gt;
  
  
              &lt;p class="form-row woocommerce-validated" id="billing_first_name_field"&gt;&lt;label for="billing_first_name" class=""&gt;Imię:&lt;/label&gt;&lt;input type="text" class="input-text " name="billing_first_name" id="billing_first_name" placeholder="imię" value=""&gt;
                  &lt;/p&gt;
  
              &lt;p class="form-row " id="billing_last_name_field"&gt;&lt;label for="billing_last_name" class=""&gt;Nazwisko:&lt;/label&gt;&lt;input type="text" class="input-text " name="billing_last_name" id="billing_last_name" placeholder="nazwisko" value=""&gt;
                  &lt;/p&gt;
  
              &lt;p class="form-row " id="billing_address_1_field"&gt;&lt;label for="billing_address_1" class=""&gt;Adres:&lt;/label&gt;&lt;input type="text" class="input-text " name="billing_address_1" id="billing_address_1" placeholder="adres" value=""&gt;
                  &lt;/p&gt;
  
              &lt;p class="form-row " id="billing_company_field"&gt;&lt;label for="billing_company" class=""&gt;Nazwa firmy:&lt;/label&gt;&lt;input type="text" class="input-text " name="billing_company" id="billing_company" placeholder="nazwa firmy" value=""&gt;
                  &lt;/p&gt;
  
              &lt;p class="form-row " id="billing_address_2_field"&gt;&lt;label for="billing_address_2" class=""&gt;Adres c.d.:&lt;/label&gt;&lt;input type="text" class="input-text " name="billing_address_2" id="billing_address_2" placeholder="adres c.d." value=""&gt;
                  &lt;/p&gt;
  
              &lt;p class="form-row " id="billing_city_field"&gt;&lt;label for="billing_city" class=""&gt;Miasto:&lt;/label&gt;&lt;input type="text" class="input-text " name="billing_city" id="billing_city" placeholder="miasto" value=""&gt;
                  &lt;/p&gt;
  
              &lt;p class="form-row " id="billing_postcode_field"&gt;&lt;label for="billing_postcode" class=""&gt;Kod pocztowy:&lt;/label&gt;&lt;input type="text" class="input-text " name="billing_postcode" id="billing_postcode" placeholder="kod pocztowy" value="66-400"&gt;
                  &lt;/p&gt;
  
              &lt;p class="form-row woocommerce-validated" id="billing_country_field"&gt;&lt;label for="billing_country" class=""&gt;Kraj:&lt;/label&gt;&lt;input type="text" class="input-text " name="billing_country" id="billing_country" placeholder="kraj" value="PL"&gt;
                  &lt;/p&gt;
  
              &lt;p class="form-row " id="billing_email_field"&gt;&lt;label for="billing_email" class=""&gt;Adres e-mail:&lt;/label&gt;&lt;input type="text" class="input-text " name="billing_email" id="billing_email" placeholder="adres e-mail" value=""&gt;
                  &lt;/p&gt;
  
              &lt;p class="form-row " id="billing_phone_field"&gt;&lt;label for="billing_phone" class=""&gt;Numer telefonu:&lt;/label&gt;&lt;input type="text" class="input-text " name="billing_phone" id="billing_phone" placeholder="numer telefonu" value=""&gt;
                  &lt;/p&gt;
  
              &lt;/div&gt;
  
  
  
  
  
  
  
  
          &lt;div class="shipping_address ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons" role="tab" id="ui-accordion-check-accordion-header-1" aria-controls="order_comments_field" aria-selected="false" tabindex="-1" style="display: none;"&gt;&lt;span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"&gt;&lt;/span&gt;
  
  
  
                  &lt;p class="form-row form-row-wide address-field update_totals_on_change validate-required" id="shipping_country_field"&gt;&lt;label class=""&gt;Kraj&lt;/label&gt;&lt;strong&gt;Polska&lt;/strong&gt;&lt;input type="hidden" name="shipping_country" id="shipping_country" value="PL" class="country_to_state"&gt;&lt;/p&gt;
  
                  &lt;p class="form-row form-row-first validate-required" id="shipping_first_name_field"&gt;&lt;label for="shipping_first_name" class=""&gt;Imię &lt;abbr class="required" title="pole wymagane"&gt;*&lt;/abbr&gt;&lt;/label&gt;&lt;input type="text" class="input-text " name="shipping_first_name" id="shipping_first_name" placeholder="" value=""&gt;
                  &lt;/p&gt;
  
                  &lt;p class="form-row form-row-last validate-required" id="shipping_last_name_field"&gt;&lt;label for="shipping_last_name" class=""&gt;Nazwisko &lt;abbr class="required" title="pole wymagane"&gt;*&lt;/abbr&gt;&lt;/label&gt;&lt;input type="text" class="input-text " name="shipping_last_name" id="shipping_last_name" placeholder="" value=""&gt;
                  &lt;/p&gt;&lt;div class="clear"&gt;&lt;/div&gt;
  
                  &lt;p class="form-row form-row-wide" id="shipping_company_field"&gt;&lt;label for="shipping_company" class=""&gt;Nazwa firmy&lt;/label&gt;&lt;input type="text" class="input-text " name="shipping_company" id="shipping_company" placeholder="" value=""&gt;
                  &lt;/p&gt;
  
                  &lt;p class="form-row form-row-wide address-field validate-required" id="shipping_address_1_field"&gt;&lt;label for="shipping_address_1" class=""&gt;Adres &lt;abbr class="required" title="pole wymagane"&gt;*&lt;/abbr&gt;&lt;/label&gt;&lt;input type="text" class="input-text " name="shipping_address_1" id="shipping_address_1" placeholder="Ulica" value=""&gt;
                  &lt;/p&gt;
  
                  &lt;p class="form-row form-row-wide address-field" id="shipping_address_2_field"&gt;&lt;input type="text" class="input-text " name="shipping_address_2" id="shipping_address_2" placeholder="Nr mieszkania, lokalu (opcjonalnie)" value=""&gt;
                  &lt;/p&gt;
  
                  &lt;div class="clear"&gt;&lt;/div&gt;
  
                  &lt;p class="form-row form-row-wide address-field validate-required validate-postcode" id="shipping_postcode_field" data-o_class="form-row form-row-wide address-field validate-required validate-postcode"&gt;&lt;label for="shipping_postcode" class=""&gt;Kod pocztowy &lt;abbr class="required" title="pole wymagane"&gt;*&lt;/abbr&gt;&lt;/label&gt;&lt;input type="text" class="input-text " name="shipping_postcode" id="shipping_postcode" placeholder="Kod pocztowy" value="66-400"&gt;
                  &lt;/p&gt;&lt;p class="form-row form-row-wide address-field validate-required" id="shipping_city_field" data-o_class="form-row form-row-wide address-field validate-required"&gt;&lt;label for="shipping_city" class=""&gt;Miasto &lt;abbr class="required" title="pole wymagane"&gt;*&lt;/abbr&gt;&lt;/label&gt;&lt;input type="text" class="input-text " name="shipping_city" id="shipping_city" placeholder="Miasto" value=""&gt;
                  &lt;/p&gt;
  
                  &lt;p class="form-row address-field validate-state form-row-wide" id="shipping_state_field" style="display: none;" data-o_class="form-row form-row-first address-field validate-state"&gt;&lt;label for="shipping_state" class=""&gt;Stan&lt;/label&gt;&lt;input type="hidden" class="hidden" name="shipping_state" id="shipping_state" value="" placeholder="Stan"&gt;&lt;/p&gt;
  
                          &lt;h3 id="ship-to-different-address"&gt;
                  &lt;label for="ship-to-different-address-checkbox" class="checkbox"&gt;Wysłać na inny adres?&lt;/label&gt;
                  &lt;input id="ship-to-different-address-checkbox" class="input-checkbox" type="checkbox" name="ship_to_different_address" value="1"&gt;
              &lt;/h3&gt;
          &lt;/div&gt;
  
  
  
  
  
  
              &lt;p class="form-row notes ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="order_comments_field" aria-labelledby="ui-accordion-check-accordion-header-1" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none; height: 770px;"&gt;&lt;label for="order_comments" class=""&gt;Uwagi do zamówienia&lt;/label&gt;&lt;textarea name="order_comments" class="input-text " id="order_comments" placeholder="Notatka do twojego zamówienia, np. informacje o dostarczeniu przesyłki." rows="2" cols="5"&gt;&lt;/textarea&gt;
                  &lt;/p&gt;
  
  
  
          &lt;/div&gt;
  
                  &lt;div class="review-accordion ui-accordion ui-widget ui-helper-reset" role="tablist"&gt;
              &lt;h5 id="order_review_heading" class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-header-active ui-state-active ui-corner-top ui-accordion-icons" role="tab" aria-controls="order_review" aria-selected="true" tabindex="0"&gt;&lt;span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"&gt;&lt;/span&gt;&lt;small&gt;Krok 3&lt;/small&gt;&lt;a href="#"&gt;Twoje zamówienie&lt;/a&gt;&lt;/h5&gt;
  
      &lt;div id="order_review" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" aria-labelledby="order_review_heading" role="tabpanel" aria-expanded="true" aria-hidden="false" style="position: relative; zoom: 1; display: block; height: 567px;"&gt;
  
      &lt;table class="shop_table"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th class="product-name"&gt;Produkt&lt;/th&gt;
                  &lt;th class="product-total"&gt;Suma&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tfoot&gt;
  
              &lt;tr class="cart-subtotal"&gt;
                  &lt;th&gt;Wartość produktów&lt;/th&gt;
                  &lt;td&gt;&lt;span class="amount"&gt;650,00zł&lt;/span&gt;&lt;/td&gt;
              &lt;/tr&gt;
  
  
  
  
                  &lt;tr class="shipping"&gt;
      &lt;th&gt;Opłata pocztowa&lt;/th&gt;
      &lt;td&gt;
  
  
                  &lt;ul id="shipping_method"&gt;
                                              &lt;li&gt;
                              &lt;input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_local_pickup" value="local_pickup" class="shipping_method"&gt;
                              &lt;label for="shipping_method_0_local_pickup"&gt;Odbiór osobisty (Bezpłatnie)&lt;/label&gt;
                          &lt;/li&gt;
                                              &lt;li&gt;
                              &lt;input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate" value="flat_rate" checked="checked" class="shipping_method"&gt;
                              &lt;label for="shipping_method_0_flat_rate"&gt;Kurier: &lt;span class="amount"&gt;30,00zł&lt;/span&gt;&lt;/label&gt;
                          &lt;/li&gt;
                                      &lt;/ul&gt;
  
  
  
              &lt;/td&gt;
  &lt;/tr&gt;
  
  
  
  
  
  
  
              &lt;tr class="order-total"&gt;
                  &lt;th&gt;Suma zamówienia&lt;/th&gt;
                  &lt;td&gt;&lt;strong&gt;&lt;span class="amount"&gt;680,00zł&lt;/span&gt;&lt;/strong&gt; &lt;/td&gt;
              &lt;/tr&gt;
  
  
          &lt;/tfoot&gt;
          &lt;tbody&gt;
                                      &lt;tr class="cart_item"&gt;
                              &lt;td class="product-name"&gt;
                                  Globus 1                                 &lt;strong class="product-quantity"&gt;× 1&lt;/strong&gt;                                                          &lt;/td&gt;
                              &lt;td class="product-total"&gt;
                                  &lt;span class="amount"&gt;650,00zł&lt;/span&gt;                            &lt;/td&gt;
                          &lt;/tr&gt;
                                  &lt;/tbody&gt;
      &lt;/table&gt;
  
  
      &lt;div id="payment"&gt;
                  &lt;ul class="payment_methods methods"&gt;
                                      &lt;li class="payment_method_bacs"&gt;
                              &lt;input id="payment_method_bacs" type="radio" class="input-radio" name="payment_method" value="bacs" checked="checked" data-order_button_text=""&gt;
                              &lt;label for="payment_method_bacs"&gt;Przelew bankowy &lt;/label&gt;
                              &lt;div class="payment_box payment_method_bacs"&gt;&lt;p&gt;Prosimy o wpłatę bezpośrednio na nasz konto bankowe. Proszę użyć numeru zamówienia jako tytuł płatności. Twoje zamówienie nie zostanie wysłane dopóki wpłata nie zostanie zaksięgowana na naszym koncie. &lt;/p&gt;
  &lt;/div&gt;                      &lt;/li&gt;
                                  &lt;/ul&gt;
  
          &lt;div class="form-row place-order"&gt;
  
              &lt;noscript&gt;Ponieważ Twoja przeglądarka nie wspiera JavaScriptu lub jest on wyłączony, upewnij się, że klikniesz przycisk &amp;amp;lt;em&amp;amp;gt;Zaktualizuj koszyk&amp;amp;lt;/em&amp;amp;gt; przed złożeniem zamówienia. Możesz zapłacić więcej niż jest podane powyżej, jeśli tego nie zrobisz.&amp;amp;lt;br/&amp;amp;gt;&amp;amp;lt;input type="submit" class="button alt" name="woocommerce_checkout_update_totals" value="Uaktualnij podsumowanie" /&amp;amp;gt;&lt;/noscript&gt;
  
              &lt;input type="hidden" id="_wpnonce" name="_wpnonce" value="6ec047e18f"&gt;&lt;input type="hidden" name="_wp_http_referer" value="/sklep/wp-admin/admin-ajax.php"&gt;
  
              &lt;input type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="Złóż zamówienie" data-value="Złóż zamówienie"&gt;
                              &lt;p class="form-row terms"&gt;
                      &lt;label for="terms" class="checkbox"&gt;Przeczytałem i akceptuję &lt;a href="http://www.globusy.eu/sklep/regulamin/" target="_blank"&gt;warunki i zasady&lt;/a&gt;&lt;/label&gt;
                      &lt;input type="checkbox" class="input-checkbox" name="terms" id="terms"&gt;
                  &lt;/p&gt;
  
  
          &lt;/div&gt;
  
          &lt;div class="clear"&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  
  
  &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>