制作响应式三列woocommerce

Question

有没有办法为woocommerce创建列，我希望它是3列，列1(step1)账单信息，列2(step2)运输方法和付款方法，列3(step3)项目详细信息和结帐按钮，所有这些都在一个结帐页面，或者有一个插件？

<?php
/**
 * Checkout Form
 *
 * @author      WooThemes
 * @package     WooCommerce/Templates
 * @version     2.3.0
 */

if ( ! defined( 'ABSPATH' ) ) {
exit;
}

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 woocommerce-checkout" action="<?php echo esc_url( $get_checkout_url ); ?>" enctype="multipart/form-data">

<?php if ( sizeof( $checkout->checkout_fields ) > 0 ) : ?>

    <?php do_action( 'woocommerce_checkout_before_customer_details' ); ?>


    <div class="onecheckout">
<div class="step-1">Step One</div>

            <?php do_action( 'woocommerce_checkout_billing' ); ?>
        </div>
<div class="onecheckoutmid">
<div class="step-2">Step Two</div>
<h6>Delivery Method</h6>

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

        </div>


</div>  
<div class="onecheckout">

<div class="step-3">Step Three</div>
<h6>Confirm Order</h6>
</form>    

Answer 1

WooCommerce提供了通过在WordPress主题中添加woocommerce目录并在其中进行所需的任何调整来覆盖其签出模板文件的功能。

这将需要覆盖几个模板文件，但使用一些自定义的HTML和CSS，您可能会获得您正在寻找的结果。