如何在WooCommerce中为单个商品添加外部跳转按钮

操作前准备 #

• 先获取目标商品的ID：进入WordPress后台「商品」-「所有商品」，将鼠标悬浮在你需要添加按钮的对应商品名称上，下方显示的ID数字即为目标商品ID，记录备用。
• 无开发经验优先使用「Code Snippets」插件添加代码，不会因为代码错误导致网站崩溃；也可以将代码添加到你正在使用的子主题的functions.php文件末尾。

可直接使用的代码 #

// 商品列表页添加自定义按钮
add_action( 'woocommerce_after_shop_loop_item', 'add_custom_external_button_for_specific_product', 10 );
// 商品详情页添加自定义按钮
add_action( 'woocommerce_after_add_to_cart_button', 'add_custom_external_button_for_specific_product', 10 );

function add_custom_external_button_for_specific_product() {
    global $product;
    // 替换下面的数字为你自己的目标商品ID
    $target_product_id = 123;
    if ( $product->get_id() != $target_product_id ) {
        return;
    }
    // 下方修改按钮文字、跳转链接
    $button_text = '查看国际配送选项';
    $button_url = 'https://你要跳转的外部地址';
    // 按钮样式可根据需要调整，下面的样式默认和WooCommerce自带按钮风格一致
    echo '<a href="'.$button_url.'" target="_blank" class="button alt" style="margin-left:10px;">'.$button_text.'</a>';
}

配置&验证步骤 #

1. 将代码添加到Code Snippets插件新建的片段中，或者子主题functions.php末尾
2. 将代码中$target_product_id对应的123替换为你之前记录的商品ID
3. 修改$button_text为你要显示的按钮文案，修改$button_url为你要跳转的目标地址
4. 保存并激活代码片段（或者保存functions.php修改）
5. 前台验证：访问店铺列表页找到对应商品，确认加购按钮旁显示自定义按钮；进入商品详情页，确认加购按钮旁同样显示按钮，点击可正常跳转。

常见问题排查 #

• 如果按钮没有显示：可以将代码中两个add_action末尾的数字10修改为20，调整钩子执行优先级适配你的主题
• 如果按钮样式不对：可以修改a标签的style属性调整边距、颜色、字号等参数

内容的提问来源于stack exchange，提问作者Zakiya Fareed