获取WooCommerce可变产品首个变体的加入购物车URL

首先明确：可变产品的变体ID不是主产品ID+1，每个变体都有独立生成的ID，和主产品ID没有固定的递增关联，必须通过代码动态获取首个变体的有效ID。

以下是适配Elementor+Crocoblock环境的具体实现步骤：

1. 添加自定义函数到主题文件 #

将以下代码添加到当前主题（推荐用子主题）的functions.php文件中，该函数会自动获取可变产品的首个可用变体ID，并生成直接加入购物车的URL：

// 获取可变产品首个可用变体的加入购物车URL
function get_first_variant_add_to_cart_url($product_id) {
    $product = wc_get_product($product_id);
    
    // 仅处理可变产品
    if (!$product || !$product->is_type('variable')) {
        return get_permalink($product_id);
    }
    
    // 获取所有可见且有库存的变体（可按需调整筛选规则）
    $variations = $product->get_available_variations();
    
    if (empty($variations)) {
        return get_permalink($product_id);
    }
    
    // 取第一个变体的ID
    $first_variant_id = $variations[0]['variation_id'];
    
    // 生成带参数的加购URL
    return add_query_arg(
        array(
            'add-to-cart' => $first_variant_id,
            'quantity' => 1
        ),
        wc_get_cart_url()
    );
}

// 注册Elementor动态标签（方便可视化调用）
add_action('elementor/dynamic_tags/register_tags', function($dynamic_tags) {
    class FirstVariantAddToCartTag extends \Elementor\Core\DynamicTags\Tag {
        public function get_name() {
            return 'first-variant-add-to-cart-url';
        }
        
        public function get_title() {
            return '首个变体加入购物车URL';
        }
        
        public function get_group() {
            return 'woocommerce';
        }
        
        public function get_categories() {
            return array(\Elementor\Modules\DynamicTags\Module::URL_CATEGORY);
        }
        
        protected function register_controls() {
            $this->add_control(
                'product_id',
                array(
                    'label' => '产品ID',
                    'type' => \Elementor\Controls_Manager::TEXT,
                    'dynamic' => array('active' => true),
                )
            );
        }
        
        public function render() {
            $product_id = $this->get_settings('product_id');
            echo esc_url(get_first_variant_add_to_cart_url($product_id));
        }
    }
    
    $dynamic_tags->register_tag(new FirstVariantAddToCartTag());
});

2. 在Elementor产品循环中配置 #

• 打开由Elementor或JetWooBuilder创建的产品循环模板
• 找到「添加到购物车」按钮，将链接类型设置为动态
• 在动态标签列表中选择我们注册的「首个变体加入购物车URL」
• 绑定产品ID的动态值（比如用Crocoblock的「产品ID」标签，或Elementor原生「帖子ID」标签）

3. 注意事项 #

• 若产品无可用变体（如全部缺货），函数会自动返回产品单品页链接，避免无效操作
• 建议用子主题添加代码，防止主题更新时丢失自定义内容
• 配置完成后清空站点缓存，确保新功能生效

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