风格化WooCommerce结帐字段

Question

我一直在为WooCommerce定制一个主题并遇到了死胡同。我想将结帐字段样式化为两列，现在它看起来像这样（仅一列）：

screenshot http://oi59.tinypic.com/2ag70wl.jpg

由于WP和WooCommerce codex我无法访问单个html元素（插件作者也指示我只使用CSS），或者至少我不知道要查看哪个文件。有没有办法使用它来自定义它们只有CSS？或者，如果可能，我可以编辑哪个文件来使用php修改这些字段？

编辑：我按要求添加了html / php。

<?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 ); ?>

编辑：来自浏览器的HTML代码，请求：

<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 &amp;lt;em&amp;gt;Zaktualizuj koszyk&amp;lt;/em&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;lt;br/&amp;gt;&amp;lt;input type="submit" class="button alt" name="woocommerce_checkout_update_totals" value="Uaktualnij podsumowanie" /&amp;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>