WooCommerce结帐布局

Question

我想改变我的WooCommerce结帐页面的布局,但我无法弄清楚如何做,因为它似乎包含多个PHP页面.

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

我应该使用CSS进行这些更改,还是只需更改模板中钩子的顺序？

谢谢!

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"将覆盖该文件,如果您更新woocommerce,则不会丢失这些更改.