滑动继续阅读»
【阿里云感恩回馈,云产品冰点价】最高31%返现 • 云服务器96.00元/年 • 产品低至1.3折
莫比水阻划船机家用健身器材静音划船器折叠智能纸牌屋运动划桨机

建立基于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结帐页面

要重新订购配送详细信息和订单总额,你需要在子主题的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上查看GitHubcheckout.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结帐页面

总结

扩展或覆盖WooCommerce非常简单,因为它是使用WordPress插件API构建的。在更改结帐页面、购物车或任何其他WooCommerce模板时,你必须牢记的是JavaScript。如果模板可以通过JavaScript更改,请务必对其进行测试。如果某些东西不起作用,那么可能必须包含或排除某些东西(通过PHP或JavaScript)。


【阿里云感恩回馈,云产品冰点价】最高31%返现 • 云服务器96.00元/年 • 产品低至1.3折