将Woocommerce订单审核移至结账页面顶部

Question

我正在尝试将订单审核部分移动到Woocommerce结账页面的顶部，这个操作是有效的：

remove_action( 'woocommerce_checkout_order_review',    'woocommerce_order_review', 10 );
add_action( 'woocommerce_before_checkout_form', 'woocommerce_order_review', 20 );

但是当结账页面打开时，它会滚动到订单审核部分，而不是页面顶部。

- H. Frederick

---

这确实将订单审查移动到结账页面的顶部。但似乎用于选择运输方式的jQuery不再起作用。例如，运费价格不再更新。 - abc

Answer 1

这是可行的:

remove_action( 'woocommerce_checkout_order_review', 'woocommerce_order_review', 10 );
add_action( 'woocommerce_after_checkout_billing_form', 'woocommerce_order_review', 20 );

- H. Frederick

Answer 2

移动评论表单并不会自动移动“您的订单”标题。这是我添加到functions.php中的内容：

remove_action( 'woocommerce_checkout_order_review', 'woocommerce_order_review', 10 );
add_action( 'woocommerce_before_checkout_form', 'prefix_wc_order_review_heading', 3 );
add_action( 'woocommerce_before_checkout_form', 'woocommerce_order_review', 4 );

/**
 * Add a heading for order review on checkout page. 
 * This replaces the heading added by WooCommerce since order review is moved to the top of the checkout page.
 */
function prefix_wc_order_review_heading() {
    echo '<h3>Your Order</h3>';
}

为了隐藏现有的 Your Order 标题（以及信用卡表单的一些间距），我将以下内容添加到 style.css 中

.woocommerce-checkout #order_review_heading {
    display: none !important;
}

.woocommerce-checkout #order_review {
    margin-top: 2rem !important;
}

- Arun Basil Lal