WooCommerce产品页面添加自定义按钮并支持链接设置的技术需求

我来给你一套完整的可落地方案，分三步实现需求：先在产品编辑后台添加自定义设置项，让你能给每个产品单独配置按钮的文本和链接；再在前端产品页的分类板块下方渲染按钮；最后加基础样式让按钮看起来更协调。

1. 给产品后台添加自定义设置字段 #

首先要在产品编辑页面增加一组自定义字段，用来输入两个按钮的文本和对应链接。把下面的代码添加到你的主题子主题的functions.php文件里，或者创建一个简单的自定义插件来存放（更推荐后者，避免主题更新丢失代码）：

// 注册产品自定义Meta Box
add_action('add_meta_boxes', 'custom_product_button_meta_box');
function custom_product_button_meta_box() {
    add_meta_box(
        'custom_product_buttons',
        '自定义产品按钮设置',
        'render_custom_product_button_fields',
        'product',
        'side',
        'default'
    );
}

// 渲染自定义字段
function render_custom_product_button_fields($post) {
    // 安全验证
    wp_nonce_field('save_custom_product_buttons', 'custom_product_buttons_nonce');
    
    // 获取已保存的元数据
    $btn1_text = get_post_meta($post->ID, '_custom_btn1_text', true);
    $btn1_link = get_post_meta($post->ID, '_custom_btn1_link', true);
    $btn2_text = get_post_meta($post->ID, '_custom_btn2_text', true);
    $btn2_link = get_post_meta($post->ID, '_custom_btn2_link', true);
    
    // 输出字段
    ?>
    <div style="margin-bottom:15px;">
        <label style="display:block;margin-bottom:5px;font-weight:bold;" for="custom_btn1_text">按钮1文本:</label>
        <input type="text" id="custom_btn1_text" name="custom_btn1_text" value="<?php echo esc_attr($btn1_text); ?>" style="width:100%;">
    </div>
    <div style="margin-bottom:15px;">
        <label style="display:block;margin-bottom:5px;font-weight:bold;" for="custom_btn1_link">按钮1链接:</label>
        <input type="url" id="custom_btn1_link" name="custom_btn1_link" value="<?php echo esc_attr($btn1_link); ?>" style="width:100%;" placeholder="https://example.com">
    </div>
    <div style="margin-bottom:15px;">
        <label style="display:block;margin-bottom:5px;font-weight:bold;" for="custom_btn2_text">按钮2文本:</label>
        <input type="text" id="custom_btn2_text" name="custom_btn2_text" value="<?php echo esc_attr($btn2_text); ?>" style="width:100%;">
    </div>
    <div>
        <label style="display:block;margin-bottom:5px;font-weight:bold;" for="custom_btn2_link">按钮2链接:</label>
        <input type="url" id="custom_btn2_link" name="custom_btn2_link" value="<?php echo esc_attr($btn2_link); ?>" style="width:100%;" placeholder="https://example.com">
    </div>
    <?php
}

// 保存自定义字段数据
add_action('save_post_product', 'save_custom_product_button_fields');
function save_custom_product_button_fields($post_id) {
    // 验证nonce、权限和自动保存
    if (!isset($_POST['custom_product_buttons_nonce']) || !wp_verify_nonce($_POST['custom_product_buttons_nonce'], 'save_custom_product_buttons')) {
        return;
    }
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }
    if (!current_user_can('edit_post', $post_id)) {
        return;
    }
    
    // 保存按钮1数据
    if (isset($_POST['custom_btn1_text'])) {
        update_post_meta($post_id, '_custom_btn1_text', sanitize_text_field($_POST['custom_btn1_text']));
    }
    if (isset($_POST['custom_btn1_link'])) {
        update_post_meta($post_id, '_custom_btn1_link', esc_url_raw($_POST['custom_btn1_link']));
    }
    
    // 保存按钮2数据
    if (isset($_POST['custom_btn2_text'])) {
        update_post_meta($post_id, '_custom_btn2_text', sanitize_text_field($_POST['custom_btn2_text']));
    }
    if (isset($_POST['custom_btn2_link'])) {
        update_post_meta($post_id, '_custom_btn2_link', esc_url_raw($_POST['custom_btn2_link']));
    }
}

添加后，你在编辑产品的时候，右侧边栏会出现一个「自定义产品按钮设置」的 metabox，就可以输入每个按钮的文本和链接了。

2. 在产品前端分类板块下方渲染按钮 #

接下来要把按钮输出到产品页面的分类板块下方，我们用WooCommerce的woocommerce_product_meta_end钩子，这个钩子刚好在产品分类、标签等元信息的末尾，完美符合你的需求。把下面的代码也添加到functions.php或自定义插件里：

// 在产品分类板块下方输出自定义按钮
add_action('woocommerce_product_meta_end', 'render_custom_product_buttons');
function render_custom_product_buttons() {
    global $product;
    $product_id = $product->get_id();
    
    // 获取按钮数据
    $btn1_text = get_post_meta($product_id, '_custom_btn1_text', true);
    $btn1_link = get_post_meta($product_id, '_custom_btn1_link', true);
    $btn2_text = get_post_meta($product_id, '_custom_btn2_text', true);
    $btn2_link = get_post_meta($product_id, '_custom_btn2_link', true);
    
    // 如果有按钮数据，输出按钮容器
    if (($btn1_text && $btn1_link) || ($btn2_text && $btn2_link)) {
        echo '<div class="custom-product-buttons" style="margin-top:20px;">';
        
        // 输出按钮1
        if ($btn1_text && $btn1_link) {
            echo '<a href="' . esc_url($btn1_link) . '" class="custom-product-btn custom-btn-1" target="_blank">' . esc_html($btn1_text) . '</a>';
        }
        
        // 输出按钮2
        if ($btn2_text && $btn2_link) {
            echo '<a href="' . esc_url($btn2_link) . '" class="custom-product-btn custom-btn-2" target="_blank">' . esc_html($btn2_text) . '</a>';
        }
        
        echo '</div>';
    }
}

这段代码会判断如果产品设置了按钮的文本和链接，就会在分类板块下方显示对应的按钮，target="_blank"是让链接在新窗口打开，你可以根据需要去掉。

3. 添加基础CSS样式优化按钮显示 #

最后给按钮加一点基础样式，让它们看起来更美观，把下面的CSS添加到主题的自定义CSS里（比如外观→自定义→额外CSS）：

.custom-product-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.custom-product-btn {
    padding: 8px 16px;
    background-color: #2271b1;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.custom-product-btn:hover {
    background-color: #135e96;
    color: #fff;
    text-decoration: none;
}

/* 可以单独给两个按钮设置不同样式 */
.custom-btn-2 {
    background-color: #f0c14b;
    color: #111;
}

.custom-btn-2:hover {
    background-color: #d9a73b;
    color: #111;
}

你可以根据自己的网站风格调整颜色、 padding、圆角这些参数，让按钮和你的页面更协调。

这样一套操作下来，你就能在每个产品的分类板块下方显示可自定义链接的按钮了，而且每个产品都能独立设置不同的按钮文本和链接，完全满足你的需求。

内容的提问来源于stack exchange，提问作者Jordan h