将运输部分移动到 woocommerce 结帐页面的右侧
Posted
技术标签:
【中文标题】将运输部分移动到 woocommerce 结帐页面的右侧【英文标题】:Move shipping section to the right side of woocommerce checkout page 【发布时间】:2020-08-23 23:56:42 【问题描述】:我一直在努力更改 woocommerce 结帐页面的布局。我想将运输详细信息移到右侧,以便与帐单并排显示。我可以通过 css 将订单详细信息部分移到右侧,但我也希望将运输移到那里,就在订单摘要上方,我似乎无法在 css 中执行此操作。
sample image
【问题讨论】:
请在此处分享您的相关代码。在 Stack Overflow,我们需要在问题中包含最少的相关代码。如果您包含您的代码,我将能够提供更多帮助。 【参考方案1】:您必须覆盖 WooCommerce 结帐表单。
如何覆盖:
从路径plugins/woocommerce/templates/checkout/form-checkout.php
复制结帐表单并粘贴到以下路径themes/twentytwenty-child/woocommerce/checkout/form-checkout.php
中的您激活的主题中(例如,我将其粘贴到我的WordPress官方主题twentytwenty
的自定义子主题中)
像这样覆盖内容:
<?php
/**
* Checkout Form
*
* This template can be overridden by copying it to yourtheme/woocommerce/checkout/form-checkout.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @package WooCommerce/Templates
* @version 3.5.0
*/
if ( ! defined( 'ABSPATH' ) )
exit;
do_action( 'woocommerce_before_checkout_form', $checkout );
// If checkout registration is disabled and not logged in, the user cannot checkout.
if ( ! $checkout->is_registration_enabled() && $checkout->is_registration_required() && ! is_user_logged_in() )
echo esc_html( apply_filters( 'woocommerce_checkout_must_be_logged_in_message', __( 'You must be logged in to checkout.', 'woocommerce' ) ) );
return;
?>
<form name="checkout" method="post" class="checkout woocommerce-checkout" action="<?php echo esc_url( wc_get_checkout_url() ); ?>" enctype="multipart/form-data">
<?php if ( $checkout->get_checkout_fields() ) : ?>
<?php do_action( 'woocommerce_checkout_before_customer_details' ); ?>
<div class="col2-set" id="customer_details">
<div class="col-1">
<?php do_action( 'woocommerce_checkout_billing' ); ?>
</div>
</div>
<?php do_action( 'woocommerce_checkout_after_customer_details' ); ?>
<?php endif; ?>
<?php do_action( 'woocommerce_checkout_before_order_review_heading' ); ?>
<div class="col2-set">
<div class="col-1">
<h3 id="cus-shipping-heading">Shipping Details</h3>
<?php do_action( 'woocommerce_checkout_shipping' ); ?>
</div>
</div>
<h3 id="order_review_heading"><?php esc_html_e( 'Your order', 'woocommerce' ); ?></h3>
<?php do_action( 'woocommerce_checkout_before_order_review' ); ?>
<div id="order_review" class="woocommerce-checkout-review-order">
<?php do_action( 'woocommerce_checkout_order_review' ); ?>
</div>
<?php do_action( 'woocommerce_checkout_after_order_review' ); ?>
</form>
<?php do_action( 'woocommerce_after_checkout_form', $checkout ); ?>
改动说明:
-
从
div#customer_details
中删除了运输部分
在动作钩子旁边添加该部分<?php do_action( 'woocommerce_checkout_before_order_review_heading' ); ?>
这是我们添加的部分的 sn-p:
<div class="col2-set">
<div class="col-1">
<h3 id="cus-shipping-heading">Shipping Details</h3>
<?php do_action( 'woocommerce_checkout_shipping' ); ?>
</div>
</div>
更改后结帐页面将如下所示:
【讨论】:
谢谢,这确实有效。虽然我不得不将路径更改为以上是关于将运输部分移动到 woocommerce 结帐页面的右侧的主要内容,如果未能解决你的问题,请参考以下文章
在 WooCommerce 中结帐时的付款选项之前从订单审核表中移动运输选项
在 WooCommerce 结帐的付款部分之前移动优惠券表格