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.

谢谢！

推荐答案

在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屋！