WooCommerce结账区块:如何为每个配送方式添加下方描述
WooCommerce结账区块:如何为每个配送方式添加下方描述
嗨,这个问题我刚好研究过,完全不用死守经典结账页面!新的WooCommerce结账区块也能实现给配送方式加描述的需求,给你两个实用方案:
用代码钩子实现(最灵活):
新结账区块有专属的钩子可以用,分两步走就行:- 先给每个配送方式绑定自定义描述数据
- 再在结账区块里把这段描述渲染出来
直接上可复用的代码示例,你可以根据自己的配送方式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
相关产品推荐
相关产品推荐

