You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

WooCommerce结账区块:如何为每个配送方式添加下方描述

WooCommerce结账区块:如何为每个配送方式添加下方描述

嗨,这个问题我刚好研究过,完全不用死守经典结账页面!新的WooCommerce结账区块也能实现给配送方式加描述的需求,给你两个实用方案:

  • 用代码钩子实现(最灵活):
    新结账区块有专属的钩子可以用,分两步走就行:

    1. 先给每个配送方式绑定自定义描述数据
    2. 再在结账区块里把这段描述渲染出来

    直接上可复用的代码示例,你可以根据自己的配送方式ID修改对应描述:

    // 给配送方式添加自定义描述数据
    add_filter( 'woocommerce_shipping_method_add_rate_args', 'custom_add_shipping_desc', 10, 2 );
    function custom_add_shipping_desc( $args, $method ) {
        // 按配送方式ID匹配描述,你可以自己加更多case
        match( $method->id ) {
            'flat_rate' => $args['description'] = '工作日次日达,周末及节假日暂停配送',
            'free_shipping' => $args['description'] = '订单满99元即可享受,全国大部分地区覆盖',
            'local_pickup' => $args['description'] = '支持门店自提,下单后2小时即可取货',
        };
        return $args;
    }
    
    // 在结账区块中渲染描述
    add_filter( 'woocommerce_checkout_block_shipping_method_item_html', 'custom_render_shipping_desc', 10, 3 );
    function custom_render_shipping_desc( $html, $method, $args ) {
        if ( !empty( $args['description'] ) ) {
            // 这里的样式可以根据你的主题调整
            $html .= '<p class="shipping-desc" style="font-size:0.85em; color:#767676; margin: 2px 0 0 24px;">' . esc_html( $args['description'] ) . '</p>';
        }
        return $html;
    }
    

    把这段代码加到你当前主题的functions.php文件末尾,或者用专门的自定义代码插件来添加(推荐后者,避免主题更新丢失代码)。

  • 用插件增强(不用写代码):
    如果你不想碰代码,可以去WooCommerce后台的插件商店搜「结账区块配送描述」相关的插件,有些官方或第三方的付费插件专门做这个功能,操作起来更直观,适合不熟悉代码的朋友。

提醒一下哦,经典结账用的那些钩子(比如woocommerce_cart_shipping_method_full_label)在新的区块里是不生效的,所以得换成上面说的区块专属钩子才行。

备注:内容来源于stack exchange,提问作者adem007

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.13 16:53:02