php - WooCommerce 结帐布局

Question

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

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

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

谢谢!

Answer 1

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

<?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 行开始):

<?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 ) . '" />' );
?>

删除上面的内容将删除页面顶部的“下订单”按钮。

您可以编辑“woocommerce/templates/checkout/form-checkout.php”中的“form-check.php”文件，但不建议这样做，因为当您更新 woocommerce 时，您将丢失这些更改。将文件复制到“yourtheme/woocommerce/checkout/form-checkout.php”将 override文件，如果您更新 woocommerce，您将不会丢失这些更改。