建立基于WordPress和WooCommerce的网站有时会引导你创建自定义解决方案，而你从未想过要必须这样做，为什么这样做，或者曾经提出过这样的请求。我的一个朋友也有类似的情况。他不得不将整个配送方式区域从桌面上移到其他地方。在本教程中，将向你展示如何在理解的情况下自定义WooCommerce结账页面，以及如何移动其他部分。
我们将进入自定义结帐页面的两个特定部分。首先，我们将配送地址和备注区域移到页面底部，并将订单详细信息（总计）显示在右侧（账单地址旁边）。其次，我们将从表格中移出配送方式并将其移至产品列表上方。
如果你不喜欢阅读，可以观看下方视频：
第一步：制作子主题
当你想要自定义WooCommerce结帐页面时，你可能必须使用子主题（或其他插件）。在本教程中，我还将使用子主题。
当你安装一个新的WordPress网站时，你将获得二十七主题，我们将使用它作为我们的父主题。转到你的wp-content/themes文件夹并创建一个新文件夹child17。在该文件夹中，创建一个style.css并将此代码复制至此：
/* Theme Name: Twenty Seventeen Child Description: Child Theme to Customize WooCommerce Checkout Page Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: child17 Template: twentyseventeen */
现在，转到管理面板并激活该主题（确保有可用的二十七主题）。
在我们继续之前，让我们确保我们拥有来自父主题的正确CSS，因此创建文件functions.php并添加以下内容：
<?php
/**
* Child 17 child theme functions
*/
if( ! defined( 'ABSPATH' ) ) {
return;
}
/**
* Child Theme Functions
*/
add_action( 'wp_enqueue_scripts', 'enqueue_2017_css' );
/**
* Enqueue the Twenty Seventeen CSS
*/
function enqueue_2017_css() {
wp_enqueue_style( '2017-css', get_template_directory_uri() . '/style.css');
}如何自定义WooCommerce结帐页面
更改和覆盖WooCommerce模板非常容易。使用我们将在此处用于自定义WooCommerce结帐页面的相同方法，你可以自定义任何其他WooCommerce部分。
当你想覆盖WooCommerce模板时，只需在你的主题中创建一个文件夹woocommerce，然后开始遵循WooCommerce为文件夹模板中的每个模板设置的相同路径。
用订单总计替换配送详细信息
现在我们有一个子主题并了解如何覆盖WooCommerce模板，我们准备继续。
如何轻松自定义WooCommerce结帐页面
要重新订购配送详细信息和订单总额，你需要在子主题的woocommerce文件夹中创建一个文件夹结帐。然后添加一个文件form-checkout.php并从插件woocommerce/templates/checkout/form-checkout.php中复制整个文件内容。
我们现在要做一些非常简单的事情。如果你仔细查看该模板，你将看到帐单和运输详细信息包含在.col-2set中。我们希望将其放在上面，然后将订单详细信息包装到.col-2中。在这里查看：
<?php
//child17/woocommerce/checkout/form-checkout.php
// Complete file: https://gist.githubusercontent.com/igorbenic/ad39ec3cd53d8b2d875f01870983f71d/raw/d7af10a4c1c954d1909a9776e2484ce5730f4834/form-checkout.php
// ....
?>
<form name="checkout" method="post" class="checkout woocommerce-checkout" action="<?php echo esc_url( wc_get_checkout_url() ); ?>" enctype="multipart/form-data">
<div class="col2-set">
<?php if ( $checkout->get_checkout_fields() ) : ?>
<div class="col-1" id="customer_details">
<?php do_action( 'woocommerce_checkout_before_customer_details' ); ?>
<?php do_action( 'woocommerce_checkout_billing' ); ?>
<?php do_action( 'woocommerce_checkout_shipping' ); ?>
<?php do_action( 'woocommerce_checkout_after_customer_details' ); ?>
</div>
<?php endif; ?>
<div class="col-2">
<h3 id="order_review_heading"><?php _e( 'Your order', 'woocommerce' ); ?></h3>
<?php do_action( 'woocommerce_checkout_before_order_review' ); ?>
<div id="order_review" class="woocommerce-checkout-review-order">
<?php do_action( 'woocommerce_checkout_order_review' ); ?>
</div>
<?php do_action( 'woocommerce_checkout_after_order_review' ); ?>
</div>
</div>
</form>
<?php
// ...
?>如果你想查看完整的文件，可以点此查看。
这很简单，对吧？你可以做一些更高级的东西，但这取决于你！
将配送方式转移到其他地方
前面的部分真的很简单，对吧？现在让我们将配送方式移到产品上方。怎么做呢？
如果你检查checkout-form.php以进行订单审核，你会看到有一个操作woocommerce_checkout_order_review。此操作将包含一个文件checkout/review-order.php。
那么，我们应该怎么做？让我们在子主题中创建一个新文件woocommerce/checkout/review-order.php。之后，转到WooCommerce并从该模板复制代码（woocommerce/templates/checkout/review-order.php）。
然后，找到如下所示的运输方式代码：
<?php if ( WC()->cart->needs_shipping() && WC()->cart->show_shipping() ) : ?>
<?php do_action( 'woocommerce_review_order_before_shipping' ); ?>
<table class="my-custom-shipping-table">
<tbody>
<?php wc_cart_totals_shipping_html(); ?>
</tbody>
</table>
<?php do_action( 'woocommerce_review_order_after_shipping' ); ?>
<?php endif; ?>找到后，全选，复制并删除它。是的，从该模板中删除它。我们不需要它，但将它保存在剪贴板中（不要复制其他东西）。
现在，我们将转到我们之前的模板checkout-form.php并找到#order_review。
<?php // Here will go our shipping methods ?>
<div id="order_review" class="woocommerce-checkout-review-order">
<?php do_action( 'woocommerce_checkout_order_review' ); ?>
</div>之后，复制上面的运输方式代码。你可能认为你已经完成了，对吧？不，它是错误的。
修复配送方式刷新问题
现在，由于送货方式在他们自己的自定义表中，如果你更改地址，它们将不会刷新。为了能够查看该问题，你必须至少添加2个送货区域。在WooCommerce设置中添加它们。我有2个送货区域，第一个是任何地方，有2种不同的送货方式，第二个是上海，提供免费送货方式。请务必将任何地方作为最后一个选项。
打开结帐页面（购物车中至少有1件商品）。页面加载时的运输方式将是正确的。但是，如果你尝试更改地址，例如从上海到北京，你将看不到更新后的送货方式。
如何解决？我们将使用片段。
片段是从AJAX响应中检索到的JSON对象，每个片段包括：
- key – 我们可以用来定位元素的类或id
- value – 我们将放入该位置的新HTML
当我们更改结帐页面上的详细信息时，WooCommerce会向我们的网站执行AJAX请求并检索新的订单总数。你可以查看它在woocommerce/includes/class-wc-ajax.php中的作用。出于结帐页面的目的，你可能对检查方法update_order_review感兴趣。
在前端，当检索到AJAX响应时，WooCommerce会遍历每个片段并使用key通过jQuery定位一个元素。之后，用value替换它。这是怎么做的？你可以在WooCommerce上查看GitHub checkout.js。
重构配送方式
要添加我们自己的片段，我们首先需要将运输方式包装在一个自定义表格中，因为运输方式HTML实际上是一个表格行tr。该表还将有一个自定义类（我们的片段key）。
<?php if ( WC()->cart->needs_shipping() && WC()->cart->show_shipping() ) : ?>
<?php do_action( 'woocommerce_review_order_before_shipping' ); ?>
<table class="my-custom-shipping-table"><!-- Our table -->
<tbody>
<?php wc_cart_totals_shipping_html(); ?>
</tbody>
</table>
<?php do_action( 'woocommerce_review_order_after_shipping' ); ?>
<?php endif; ?>添加我们自己的片段HTML
如果你仔细观察update_order_review方法，你会看到这些片段是用woocommerce_update_order_review_fragments过滤的。我们将使用该过滤器添加我们自己的片段。打开文件functions.php并添加：
<?php
add_filter( 'woocommerce_update_order_review_fragments', 'my_custom_shipping_table_update');
function my_custom_shipping_table_update( $fragments ) {
ob_start();
?>
<table class="my-custom-shipping-table">
<tbody>
<?php wc_cart_totals_shipping_html(); ?>
</tbody>
</table>
<?php
$woocommerce_shipping_methods = ob_get_clean();
$fragments['.my-custom-shipping-table'] = $woocommerce_shipping_methods;
return $fragments;
}在这里，我们添加了完整的自定义运输表（带有自定义类），并将该HTML添加到键.my-custom-shipping-table中。
现在，当处理AJAX时，WooCommerce将使用$(‘.my-custom-shipping-table’)获取我们的旧表格HTML，并将其替换为新的HTML。
总结
扩展或覆盖WooCommerce非常简单，因为它是使用WordPress插件API构建的。在更改结帐页面、购物车或任何其他WooCommerce模板时，你必须牢记的是JavaScript。如果模板可以通过JavaScript更改，请务必对其进行测试。如果某些东西不起作用，那么可能必须包含或排除某些东西（通过PHP或JavaScript）。
