wordpress 将运输部分移动到woocommerce结帐页面的右侧[已关闭]

cvxl0en2  于 2023-01-12  发布在  WordPress
关注(0)|答案(1)|浏览(156)

已关闭。此问题需要details or clarity。当前不接受答案。
**想要改进此问题?**添加详细信息并通过editing this post阐明问题。

昨天关门了。
Improve this question
我一直在努力改变我的woocommerce结帐页面的布局。我想把送货细节移到右边,这样它就可以和账单并排了。我可以通过CSS把订单细节部分移到右边,但我也想把送货移到那里,就在订单摘要的上方,我似乎不能在CSS中做到这一点。

uurity8g

uurity8g1#

您必须覆盖WooCommerce结账表。

如何覆盖:

从路径plugins/woocommerce/templates/checkout/form-checkout.php复制结帐表单并粘贴到您激活的主题(例如,在这里我粘贴到WordPress官方主题twentytwenty的自定义子主题内)在以下路径themes/twentytwenty-child/woocommerce/checkout/form-checkout.php

重写内容,如下所示:

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

变更说明:

1.从div#customer_details中删除了装运部分
1.将该部分添加到操作挂接<?php do_action( 'woocommerce_checkout_before_order_review_heading' ); ?>旁边
1.下面是我们添加的部分的片段:
<div class="col2-set"> <div class="col-1"> <h3 id="cus-shipping-heading">Shipping Details</h3> <?php do_action( 'woocommerce_checkout_shipping' ); ?> </div> </div>

更改后, checkout 页面将如下所示:

相关问题