如何复制WooCommerce加入购物车按钮及其功能到页面预设位置

原脚本存在的问题 #

你的脚本逻辑方向正确，但存在两个核心问题导致无法正常执行：

• 执行时机不合理：window.load触发时你使用的自定义加购表单插件可能还未完成初始化，$.tcAPI()接口尚未挂载，无法获取到正确的按钮选择器，也无法调用tcClone方法。
• 无容错判断：没有校验目标元素、插件接口是否存在，一旦依赖项未就绪就会直接执行失败，也没有重试机制。

容器的正确构造 #

你不需要在容器内提前写input按钮，直接留空容器即可，避免冗余元素干扰，推荐写法：

<div class="my-new-button" style="margin: 20px 0;"></div>

你可以自行调整style属性控制容器的间距、对齐方式。

修正后的脚本代码 #

(function( $ ) {
    'use strict';
    // 重试配置，适配插件初始化延迟
    let retryCount = 0;
    const maxRetry = 10;
    function initCloneBtn() {
        // 校验插件API是否就绪
        if (typeof $.tcAPI === 'undefined' || !$.tcAPI().addToCartButtonSelector) {
            retryCount++;
            if (retryCount < maxRetry) {
                setTimeout(initCloneBtn, 200);
            }
            return;
        }
        const $originalBtn = $( $.tcAPI().addToCartButtonSelector ).first();
        // 校验原加购按钮是否存在
        if (!$originalBtn.length) return;
        // 克隆按钮并绑定事件
        $originalBtn.tcClone()
            .addClass('custom-add-to-cart-button')
            .on('click', function(e) {
                e.preventDefault();
                // 触发原按钮点击，自动继承所有表单校验、参数读取逻辑
                $originalBtn.trigger('click');
            })
            // 清空容器后插入新按钮，避免残留元素
            .appendTo( $('.my-new-button').empty() );
    }
    // DOM加载完成后启动初始化
    $(document).ready(initCloneBtn);
})( window.jQuery );

补充说明 #

• 新按钮的样式可以通过自定义.custom-add-to-cart-button的CSS规则调整，可保持和原按钮一致或者单独定制。
• 该方案直接复用原按钮的点击逻辑，会自动读取当前选中的商品选项，无需额外处理表单参数同步问题。
• 若仍无法生效，可打开浏览器开发者工具的控制台查看JS报错，确认$.tcAPI接口是否存在，对应调整你使用的自定义加购插件的接口调用方式即可。

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