制作响应三列的woocommerce

时间:2015-09-14 03:17:36

标签: wordpress woocommerce

有没有办法为woocommerce创建列,我希望它是3列,第1列(第1步)结算信息,第2列(第2步)运送方法和付款方式,第3列(第3步)项目详细信息和结帐按钮,所有在一个结帐页面,或是否有一个插件?

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

1 个答案:

答案 0 :(得分:0)

WooCommerce提供了通过在WordPress主题中添加{{1}}目录并在那里进行任何调整来覆盖其结帐模板文件的功能。

这需要覆盖多个模板文件,但是使用一些自定义HTML和CSS,您可能可以获得所需的结果。