首页 文章

自定义WooCommerce结帐字段和列

提问于
浏览
0

我'm using WPExplorer' s总主题:You should be able to click this sentence to open the Total Theme from WPExplorer. You'll need to add something to your cart and get to the checkout page for the rest of this...我已经向主题作者寻求了一些帮助,但显然,这是一个WooCommerce问题 . 好的 . 因此,我打开了我的TeamTreeHouse帐户并尽可能多地查看 . 没运气 .

现在,如果您打开了主题,您将看到默认的结帐页面将左侧的所有 woocommerce_checkout_billing 字段放在右侧,然后放置所有 woocommerce_checkout_shipping 字段 .

现在,如果您的商店几乎没有需要像虚拟产品和可下载产品一样的产品,那么就存在一个问题:

结帐页面难以置信 . 页面左侧有很多字段,页面右侧几乎没有任何字段 . 我要做的是让 checkout_billing 字段为左边,右边一个,(新行),左边一个,右边一个,(新行),左边再右边,然后(如果需要)显示"Ship to A Different Address"切换出现 . 然后IF and only when 需要额外的 woocommerce_checkout_shipping 字段,它们再次左,右,(新行)左,右,(新行)左右 .

最终结果是结帐页面在表单上有 SYMMETRY 而不是全部在左侧

来自Woo的控制结帐页面的文件是https://github.com/woothemes/woocommerce/blob/master/templates/checkout/form-checkout.php#L33,从第33行开始我们看到:

<div class="col2-set" id="customer_details">
        <div class="col-1">
            <?php do_action( 'woocommerce_checkout_billing' ); ?>
        </div>

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

我需要更改为简单地使字段显示为1左,1右,新行,1左,1右,打开和打开checkout_billing,然后再次在 checkout_shipping 1左,1右,新行,打开和等等?

谢谢!

1 回答

  • 0

    对我来说,这似乎更像是一个纯粹的CSS问题 . 像下面这样的东西将是一个开始(假设我理解你所描述的)并且可以进一步定制 . 使用浏览器的开发人员工具检查元素并对其样式规则进行实时测试 .

    首先,我们删除了2个主要列 . 然后,我们将输入分成列 . 请注意,这不包括任何响应式布局 .

    .woocommerce .woocommerce-checkout .col2-set .col-1 {
        float: none;
        width: 100%;
    }
    
    .woocommerce form .form-row {
        margin-right: 4%;
        float: left;
        width: 48%;
    }
    
    .woocommerce form .form-row-last {
        margin-right: 0;
    }
    

相关问题