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):
screenshot http://oi59.tinypic.com/2ag70wl.jpg
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?
EDIT: I am adding the html/php as requested.
<?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->enable_signup && ! $checkout->enable_guest_checkout && ! 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()->cart->get_checkout_url() ); ?>
<form name="checkout" method="post" class="checkout billing-form clearfix" action="<?php echo esc_url( $get_checkout_url ); ?>">
<?php if ( sizeof( $checkout->checkout_fields ) > 0 ) : ?>
<?php do_action( 'woocommerce_checkout_before_customer_details' ); ?>
<div class="col2-set" id="check-accordion">
<?php do_action( 'woocommerce_checkout_billing' ); ?>
<?php do_action( 'woocommerce_checkout_shipping' ); ?>
</div>
<?php do_action( 'woocommerce_checkout_after_customer_details' ); ?>
<div class="review-accordion">
<h5 id="order_review_heading"><small><?php _e('Step 3', 'Maxshop')?></small><a href="#"><?php _e('Your order', 'Maxshop'); ?></a></h5>
<?php endif; ?>
<?php do_action( 'woocommerce_checkout_order_review' ); ?>
</div>
</form>
<?php do_action( 'woocommerce_after_checkout_form', $checkout ); ?>
EDIT: HTML code from the browser, as requested:
<form name="checkout" method="post" class="checkout billing-form clearfix" action="http://www.globusy.eu/sklep/zamowienie/">
<div class="col2-set ui-accordion ui-widget ui-helper-reset" id="check-accordion" role="tablist">
<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"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span><small>Krok 2</small><a href="#">Adres dostawy</a></h5>
<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;">
<p class="form-row woocommerce-validated" id="billing_first_name_field"><label for="billing_first_name" class="">Imię:</label><input type="text" class="input-text " name="billing_first_name" id="billing_first_name" placeholder="imię" value="">
</p>
<p class="form-row " id="billing_last_name_field"><label for="billing_last_name" class="">Nazwisko:</label><input type="text" class="input-text " name="billing_last_name" id="billing_last_name" placeholder="nazwisko" value="">
</p>
<p class="form-row " id="billing_address_1_field"><label for="billing_address_1" class="">Adres:</label><input type="text" class="input-text " name="billing_address_1" id="billing_address_1" placeholder="adres" value="">
</p>
<p class="form-row " id="billing_company_field"><label for="billing_company" class="">Nazwa firmy:</label><input type="text" class="input-text " name="billing_company" id="billing_company" placeholder="nazwa firmy" value="">
</p>
<p class="form-row " id="billing_address_2_field"><label for="billing_address_2" class="">Adres c.d.:</label><input type="text" class="input-text " name="billing_address_2" id="billing_address_2" placeholder="adres c.d." value="">
</p>
<p class="form-row " id="billing_city_field"><label for="billing_city" class="">Miasto:</label><input type="text" class="input-text " name="billing_city" id="billing_city" placeholder="miasto" value="">
</p>
<p class="form-row " id="billing_postcode_field"><label for="billing_postcode" class="">Kod pocztowy:</label><input type="text" class="input-text " name="billing_postcode" id="billing_postcode" placeholder="kod pocztowy" value="66-400">
</p>
<p class="form-row woocommerce-validated" id="billing_country_field"><label for="billing_country" class="">Kraj:</label><input type="text" class="input-text " name="billing_country" id="billing_country" placeholder="kraj" value="PL">
</p>
<p class="form-row " id="billing_email_field"><label for="billing_email" class="">Adres e-mail:</label><input type="text" class="input-text " name="billing_email" id="billing_email" placeholder="adres e-mail" value="">
</p>
<p class="form-row " id="billing_phone_field"><label for="billing_phone" class="">Numer telefonu:</label><input type="text" class="input-text " name="billing_phone" id="billing_phone" placeholder="numer telefonu" value="">
</p>
</div>
<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;"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
<p class="form-row form-row-wide address-field update_totals_on_change validate-required" id="shipping_country_field"><label class="">Kraj</label><strong>Polska</strong><input type="hidden" name="shipping_country" id="shipping_country" value="PL" class="country_to_state"></p>
<p class="form-row form-row-first validate-required" id="shipping_first_name_field"><label for="shipping_first_name" class="">Imię <abbr class="required" title="pole wymagane">*</abbr></label><input type="text" class="input-text " name="shipping_first_name" id="shipping_first_name" placeholder="" value="">
</p>
<p class="form-row form-row-last validate-required" id="shipping_last_name_field"><label for="shipping_last_name" class="">Nazwisko <abbr class="required" title="pole wymagane">*</abbr></label><input type="text" class="input-text " name="shipping_last_name" id="shipping_last_name" placeholder="" value="">
</p><div class="clear"></div>
<p class="form-row form-row-wide" id="shipping_company_field"><label for="shipping_company" class="">Nazwa firmy</label><input type="text" class="input-text " name="shipping_company" id="shipping_company" placeholder="" value="">
</p>
<p class="form-row form-row-wide address-field validate-required" id="shipping_address_1_field"><label for="shipping_address_1" class="">Adres <abbr class="required" title="pole wymagane">*</abbr></label><input type="text" class="input-text " name="shipping_address_1" id="shipping_address_1" placeholder="Ulica" value="">
</p>
<p class="form-row form-row-wide address-field" id="shipping_address_2_field"><input type="text" class="input-text " name="shipping_address_2" id="shipping_address_2" placeholder="Nr mieszkania, lokalu (opcjonalnie)" value="">
</p>
<div class="clear"></div>
<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"><label for="shipping_postcode" class="">Kod pocztowy <abbr class="required" title="pole wymagane">*</abbr></label><input type="text" class="input-text " name="shipping_postcode" id="shipping_postcode" placeholder="Kod pocztowy" value="66-400">
</p><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"><label for="shipping_city" class="">Miasto <abbr class="required" title="pole wymagane">*</abbr></label><input type="text" class="input-text " name="shipping_city" id="shipping_city" placeholder="Miasto" value="">
</p>
<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"><label for="shipping_state" class="">Stan</label><input type="hidden" class="hidden" name="shipping_state" id="shipping_state" value="" placeholder="Stan"></p>
<h3 id="ship-to-different-address">
<label for="ship-to-different-address-checkbox" class="checkbox">Wysłać na inny adres?</label>
<input id="ship-to-different-address-checkbox" class="input-checkbox" type="checkbox" name="ship_to_different_address" value="1">
</h3>
</div>
<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;"><label for="order_comments" class="">Uwagi do zamówienia</label><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"></textarea>
</p>
</div>
<div class="review-accordion ui-accordion ui-widget ui-helper-reset" role="tablist">
<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"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span><small>Krok 3</small><a href="#">Twoje zamówienie</a></h5>
<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;">
<table class="shop_table">
<thead>
<tr>
<th class="product-name">Produkt</th>
<th class="product-total">Suma</th>
</tr>
</thead>
<tfoot>
<tr class="cart-subtotal">
<th>Wartość produktów</th>
<td><span class="amount">650,00zł</span></td>
</tr>
<tr class="shipping">
<th>Opłata pocztowa</th>
<td>
<ul id="shipping_method">
<li>
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_local_pickup" value="local_pickup" class="shipping_method">
<label for="shipping_method_0_local_pickup">Odbiór osobisty (Bezpłatnie)</label>
</li>
<li>
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate" value="flat_rate" checked="checked" class="shipping_method">
<label for="shipping_method_0_flat_rate">Kurier: <span class="amount">30,00zł</span></label>
</li>
</ul>
</td>
</tr>
<tr class="order-total">
<th>Suma zamówienia</th>
<td><strong><span class="amount">680,00zł</span></strong> </td>
</tr>
</tfoot>
<tbody>
<tr class="cart_item">
<td class="product-name">
Globus 1 <strong class="product-quantity">× 1</strong> </td>
<td class="product-total">
<span class="amount">650,00zł</span> </td>
</tr>
</tbody>
</table>
<div id="payment">
<ul class="payment_methods methods">
<li class="payment_method_bacs">
<input id="payment_method_bacs" type="radio" class="input-radio" name="payment_method" value="bacs" checked="checked" data-order_button_text="">
<label for="payment_method_bacs">Przelew bankowy </label>
<div class="payment_box payment_method_bacs"><p>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. </p>
</div> </li>
</ul>
<div class="form-row place-order">
<noscript>Ponieważ Twoja przeglądarka nie wspiera JavaScriptu lub jest on wyłączony, upewnij się, że klikniesz przycisk &lt;em&gt;Zaktualizuj koszyk&lt;/em&gt; przed złożeniem zamówienia. Możesz zapłacić więcej niż jest podane powyżej, jeśli tego nie zrobisz.&lt;br/&gt;&lt;input type="submit" class="button alt" name="woocommerce_checkout_update_totals" value="Uaktualnij podsumowanie" /&gt;</noscript>
<input type="hidden" id="_wpnonce" name="_wpnonce" value="6ec047e18f"><input type="hidden" name="_wp_http_referer" value="/sklep/wp-admin/admin-ajax.php">
<input type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="Złóż zamówienie" data-value="Złóż zamówienie">
<p class="form-row terms">
<label for="terms" class="checkbox">Przeczytałem i akceptuję <a href="http://www.globusy.eu/sklep/regulamin/" target="_blank">warunki i zasady</a></label>
<input type="checkbox" class="input-checkbox" name="terms" id="terms">
</p>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</form>
