如何将Woocommerce可变商品悬浮选择按钮改为加入购物车链接

• 先确认你的可变商品已经在后台设置了默认选中的变体（产品编辑页→变体选项中设置默认属性值）
• 下面的代码可以帮你把底部悬浮栏的“选择选项”按钮改成直接加购默认变体的“加入购物车”按钮，你可以选择两种方式添加代码：
  1. 安装Code Snippets插件（新手推荐，无需修改主题文件），新建代码片段粘贴代码并启用
  2. 打开主题的functions.php文件，将代码粘贴到文件末尾

核心代码（适配多数主题） #

// 修改可变商品底部悬浮栏加购按钮为直接加购默认变体
add_filter( 'woocommerce_loop_add_to_cart_link', 'custom_variable_floating_add_to_cart', 10, 3 );
function custom_variable_floating_add_to_cart( $html, $product, $args ) {
    if ( $product->is_type( 'variable' ) ) {
        // 获取商品设置的默认属性
        $default_attrs = $product->get_default_attributes();
        if ( ! empty( $default_attrs ) ) {
            // 根据默认属性匹配对应的变体ID
            $variation_id = $product->get_matching_variation( $default_attrs );
            if ( $variation_id ) {
                // 生成该变体的直接加购链接
                $add_to_cart_url = wc_get_add_to_cart_url( $variation_id );
                // 重构按钮HTML为加购链接
                $html = sprintf(
                    '<a href="%s" data-quantity="%s" class="%s" %s>%s</a>',
                    esc_url( $add_to_cart_url ),
                    esc_attr( $args['quantity'] ?? 1 ),
                    esc_attr( $args['class'] ?? 'button' ),
                    isset( $args['attributes'] ) ? wc_implode_html_attributes( $args['attributes'] ) : '',
                    esc_html__( '加入购物车', 'woocommerce' )
                );
            }
        }
    }
    return $html;
}

针对主题自定义悬浮按钮的补充代码（如果上面代码无效） #

如果你的主题底部悬浮栏用了自定义按钮结构，上面的代码没生效，可以添加这段代码，记得替换按钮的CSS类名：

// 自定义主题悬浮按钮适配
add_action( 'wp_footer', 'custom_floating_button_fix' );
function custom_floating_button_fix() {
    if ( is_product() && get_product()->is_type( 'variable' ) ) {
        $product = get_product();
        $default_attrs = $product->get_default_attributes();
        if ( ! empty( $default_attrs ) ) {
            $variation_id = $product->get_matching_variation( $default_attrs );
            if ( $variation_id ) {
                $add_to_cart_url = wc_get_add_to_cart_url( $variation_id );
                ?>
                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        // 替换成你主题底部悬浮按钮的实际CSS类名
                        const floatingBtn = document.querySelector('.replace-with-your-button-class');
                        if (floatingBtn) {
                            floatingBtn.textContent = '加入购物车';
                            floatingBtn.setAttribute('href', '<?php echo esc_js($add_to_cart_url); ?>');
                            floatingBtn.removeAttribute('onclick'); // 清除原有点击事件
                        }
                    });
                </script>
                <?php
            }
        }
    }
}

提示：查看按钮CSS类名可以用浏览器F12开发者工具，选中悬浮按钮后查看元素的class属性。

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