如何为WooCommerce产品SKU分配类ID以实现复制到剪贴板按钮功能？

嘿，别担心，刚接触WooCommerce开发的话有这些疑问太正常啦！我来一步步帮你搞定这个复制SKU的需求，从给SKU加类/ID到实现复制+跳转的功能都安排得明明白白～

第一步：修改SKU显示代码，给SKU添加类和ID #

你已经能在页面上显示SKU了，那咱们直接在输出SKU的代码里，给SKU文本套上带类和ID的HTML标签，这样后面的JavaScript才能精准定位到它。把你现有的SKU显示代码替换成下面这段：

/*在单产品页显示带类/ID的SKU和复制按钮*/
add_action('woocommerce_single_product_summary', 'display_custom_sku_with_copy_btn', 15);
function display_custom_sku_with_copy_btn() {
    global $product;
    // 仅当产品有SKU时才显示
    if ( $product->get_sku() ) {
        // 给SKU的<span>标签添加类`product-sku-text`和ID`product-sku`，同时把复制按钮放在旁边
        echo '<div class="custom-sku-block">
                Bespoke Item Code: <span class="product-sku-text" id="product-sku">' . $product->get_sku() . '</span>
                <button class="copy-sku-button" onclick="copySku()">复制SKU</button>
              </div>';
    }
}

这里我把SKU放在了id="product-sku"的<span>里，同时加了product-sku-text类，方便你后续调整样式或者做其他操作时定位元素，复制按钮也直接嵌在同一个容器里，结构更整洁。

第二步：添加复制到剪贴板的JS代码，实现跳转功能 #

接下来咱们加一段原生JavaScript代码，不用依赖任何外部库，直接实现复制功能，复制成功后再跳转到你需要的页面。把这段代码加到主题的functions.php里（记得用子主题！不然主题更新后代码会丢失）：

/*添加复制SKU的JS脚本，仅在单产品页加载*/
add_action('wp_footer', 'sku_copy_clipboard_script');
function sku_copy_clipboard_script() {
    // 只在单产品页加载脚本，节省资源
    if ( is_product() ) {
        ?>
        <script>
        function copySku() {
            // 通过ID精准获取SKU文本
            const skuText = document.getElementById('product-sku').textContent;
            // 创建临时文本区域（部分元素无法直接选中复制，临时textarea是最稳妥的方式）
            const tempInput = document.createElement('textarea');
            tempInput.value = skuText;
            document.body.appendChild(tempInput);
            tempInput.select();
            // 执行复制命令
            document.execCommand('copy');
            // 移除临时元素
            document.body.removeChild(tempInput);

            // 给用户视觉反馈：把按钮文字改成「已复制！」
            const copyBtn = document.querySelector('.copy-sku-button');
            const originalBtnText = copyBtn.textContent;
            copyBtn.textContent = '已复制！';
            // 2秒后恢复按钮原文字
            setTimeout(() => {
                copyBtn.textContent = originalBtnText;
            }, 2000);

            // 复制成功后1秒跳转到目标页面，记得把URL换成你实际需要的页面地址
            setTimeout(() => {
                window.location.href = 'https://your-target-page.com';
            }, 1000);
        }
        </script>
        <?php
    }
}

这段逻辑很清晰：点击按钮后先拿到SKU文本，用临时textarea完成复制（避免直接选中文本的兼容性问题），然后给用户一个“已复制”的明确提示，最后延迟1秒跳转到指定页面，让用户能清楚看到复制成功的反馈。

第三步：可选——给SKU模块加基础样式 #

如果想让这个模块看起来更贴合店铺风格，可以把下面的CSS代码加到主题的自定义CSS里（外观→自定义→额外CSS）：

.custom-sku-block {
    margin: 1.5rem 0;
    padding: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}
.copy-sku-button {
    margin-left: 1rem;
    padding: 0.5rem 1rem;
    background-color: #2c7a7b;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.copy-sku-button:hover {
    background-color: #236467;
}

这只是个基础样式，你可以根据店铺主题的颜色、排版调整背景色、间距等参数。

小提醒 #

• 务必使用子主题修改functions.php，否则主题更新后你添加的代码会全部丢失；
• 跳转URL一定要替换成你实际需要的页面地址，别用示例里的占位符；
• 如果SKU显示位置不符合预期，可以调整add_action里的优先级参数（就是代码里的15），数字越小显示位置越靠前，数字越大越靠后。

备注：内容来源于stack exchange，提问作者ajumbz