我想改变我的WooCommerce结账页面的布局，但似乎由多个PHP页面组成，我不知道该如何做。
我想要把摘要部分和运输信息移到顶部，并在后面显示运输地址的输入字段。
我应该使用CSS进行这些更改，还是可以简单地改变模板中挂钩的顺序？
谢谢！
1个回答
7
在“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，您不会失去这些更改。
- Howli
6
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
<h3 id="order_review_heading"><?php _e( 'Your order', 'woocommerce' ); ?></h3>到form-checkout。现在，只剩下一个任务，就是删除通常位于提交按钮下方的灰色分隔条，但它已经与摘要一起移到了顶部。我可以通过删除div form-row place-order行来从顶部删除它，但我无法弄清楚如何再次将其插入到按钮中。非常感谢您的帮助。谢谢！ - user2806026background: #f7f6f7; padding: 20px;这些样式将被添加到 styles.css 文件中。 - Howli