WooCommerce 结帐布局 [英] WooCommerce checkout layout

问题描述

我想更改我的 WooCommerce 结帐页面的布局，但我不知道该怎么做，因为它似乎由多个 PHP 页面组成.

I would like to change the layout of my WooCommerce checkout page, but I can't figure out how to do it since it seems to consist of multiple PHP pages.

我想要实现的是将摘要部分和送货信息移到顶部，然后在后面显示送货地址的输入字段.

What I'm trying to achieve is moving the summary part and shipping info to the top, and have the input fields for the shipping address shown afterwards.

我应该使用 CSS 进行这些更改，还是可以简单地更改模板中钩子的顺序?

Should I make these changes using CSS, or can I simply change the order of the hooks in the template?

谢谢！

推荐答案

在woocommerce/templates/checkout"文件夹中有一个名为form-checkout.php"的文件.将该文件的内容复制到yourtheme/woocommerce/checkout/form-checkout.php" 在 ~54 行有以下代码:

In the "woocommerce/templates/checkout" folder there is a file called "form-checkout.php". Copy the contents of that file to "yourtheme/woocommerce/checkout/form-checkout.php" On line ~54 there is the following code:

<?php do_action( 'woocommerce_checkout_order_review' ); ?>

将其移至正下方

<form name="checkout" method="post" class="checkout" action="<?php echo esc_url( $get_checkout_url ); ?>">

并添加:

<?php
$order_button_text = apply_filters( 'woocommerce_order_button_text', __( 'Place order', 'woocommerce' ) );

echo apply_filters( 'woocommerce_order_button_html', '<input type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="' . esc_attr( $order_button_text ) . '" data-value="' . esc_attr( $order_button_text ) . '" />' );
?>

到刚好低于

<?php endif; ?>

并保存文件.这会将摘要和运输带到输入字段上方，但您仍然会在页面顶部有下订单"按钮.将review-order.php"的内容复制到yourtheme/woocommerce/checkout/review-order.php"并删除以下内容(第~169行):

and save file the. That will bring the summary and shipping to above the input fields, but you will still have "Place Order" button at the top of the page. Copy the contents of the "review-order.php" to "yourtheme/woocommerce/checkout/review-order.php" and remove the following (from line ~169):

<?php
$order_button_text = apply_filters( 'woocommerce_order_button_text', __( 'Place order', 'woocommerce' ) );

echo apply_filters( 'woocommerce_order_button_html', '<input type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="' . esc_attr( $order_button_text ) . '" data-value="' . esc_attr( $order_button_text ) . '" />' );
?>

删除上述内容将删除页面顶部的下订单"按钮.

Removing the above will remove the "Place order" button at the top of the page.

您可以在woocommerce/templates/checkout/form-checkout.php"中编辑form-check.php"文件，但不建议这样做，因为更新woocommerce时您会丢失这些更改.将文件复制到yourtheme/woocommerce/checkout/form-checkout.php"将覆盖文件和你如果您更新 woocommerce，则不会丢失这些更改.

You can edit the "form-check.php" file in "woocommerce/templates/checkout/form-checkout.php", but it is not recommended as when you update woocommerce you will lose those changes. Copying the file to "yourtheme/woocommerce/checkout/form-checkout.php" will override the file and you won't lose those changes if you update woocommerce.

这篇关于WooCommerce 结帐布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！