已解决
0

我的 WooCommerce 项目上有一些代码问题。我希望在产品详情页中自动添加一条链接,指向相关的演示产品(Demo Product),用于通知客户可以购买演示版。

我使用了 woocommerce_after_add_to_cart_button 这个 action hook,在简单产品上显示正常,但在可变产品页面上,链接虽然显示了,但变体无法添加到购物车

以下是我最初使用的代码:

add_action( 'woocommerce_after_add_to_cart_button', 'find_rf_link_products_function2' );

function find_rf_link_products_function2(){ 
    global $product;
    
    $product_rf = $product->get_sku() . "RF";
    $product_id = wc_get_product_id_by_sku( $product_rf );
    $linktorf   = get_permalink($product_id);

    if( $product_id ) {
        $product  = wc_get_product( $product_id );
        $amountRF = $product->get_stock_quantity();
    }
    
    if ( $amountRF > 0 ) {
        echo "<span class='box'><a href='" . esc_url($linktorf) . "'>EX-DEMO AVAILABLE</a></span>";
    }
}

该代码的问题在于,在可变产品页面上,变体无法添加到购物车。

2 个回答

最佳
超哥
超哥
行业大佬
行业大佬
时间: 2025年05月09日

错误的根本原因在于,您在代码中对可变产品没有进行适当的处理。具体来说,当添加自定义链接时,代码未考虑到动态变化的可变产品选项,导致 WooCommerce 无法正确识别并处理变体的选择状态,进而阻止了变体被添加到购物车。

此外,您在操作 woocommerce_after_add_to_cart_button 钩子时,并没有考虑到可能存在的异步加载变体数据,这使得您的代码在动态切换变体时失效。

解决方法:

为了解决这个问题,我们需要对代码进行一些调整,尤其是在可变产品上动态处理相关产品链接和变体选择。

1. 显示相关演示产品链接(对于可变产品使用隐藏链接):

add_action( 'woocommerce_after_add_to_cart_button', 'display_product_demo_link' );
function display_product_demo_link(){ 
    global $product;
    
    // 获取与产品 SKU 相关的演示产品 ID
    $product_demo_id = wc_get_product_id_by_sku( $product->get_sku() . 'RF' );

    // 对于可变产品(显示隐藏的空演示链接)
    if ( $product->is_type('variable') ) {
        printf('<span class="box demo-link" style="display:none;"><a href="#">%s</a></span>', esc_html__('EX-DEMO AVAILABLE') );
    } 
    // 对于其他产品类型(如果有演示产品链接并且库存大于 0,则显示链接)
    elseif ( !$product->is_type('variable') && $product_demo_id ) {
        $product_demo = wc_get_product( $product_demo_id );

        if ( $product_demo && $product_demo->is_in_stock() ) {
            printf('<span class="box"><a href="%s">%s</a></span>', $product_demo->get_permalink(), esc_html__('EX-DEMO AVAILABLE') );
        }
    }
}

2. 为每个变体添加演示产品链接:

// 变体产品:为每个变体添加演示产品链接到表单数据
add_filter( 'woocommerce_available_variation', 'define_variation_demo_link', 10, 3 );
function define_variation_demo_link( $data_variation, $product, $variation ) {
    // 获取与变体 SKU 相关的演示变体 ID
    $variation_demo_id = wc_get_product_id_by_sku( $variation->get_sku() . 'RF' );

    if ( $variation_demo_id ) {
        $variation_demo = wc_get_product( $variation_demo_id );

        if ( $variation_demo && $variation_demo->is_type('variation') && $variation_demo->is_in_stock() ) {
            $data_variation['demo_link'] = $variation_demo->get_permalink();
        }
    }
    return $data_variation;
}

3. 使用 JavaScript 动态更新已选择变体的演示链接:

// 变体产品:动态显示已选择的变体的演示产品链接
add_action('woocommerce_single_variation', 'variable_product_jquery_demo_link_script', 5);
function variable_product_jquery_demo_link_script() {
    // 注册 JavaScript
    wc_enqueue_js( "$('form.variations_form').on('show_variation', function(event, data){ 
        if( data.demo_link ) {
            $('span.demo-link > a').prop('href', data.demo_link);
            $('span.demo-link').show();
        } else {
            $('span.demo-link > a').prop('href', '');
            $('span.demo-link').hide();
        }
    }).on('hide_variation', function(){
        $('span.demo-link > a').prop('href', '');
        $('span.demo-link').hide();
    });" );
}

总结:

  1. 问题原因:在处理可变产品时,缺乏动态更新演示链接的机制,导致变体无法正确加载。

  2. 解决方案:通过 woocommerce_available_variation 钩子来为每个变体动态添加演示产品链接,并通过 JavaScript 动态更新演示链接。

通过这些修改,您应该能够在 WooCommerce 中正确地为可变产品添加演示链接,并且确保在选择不同变体时,演示链接能正确显示,变体也能正常添加到购物车中。

    xiaomengxiang
    小梦想
    新手小白
    新手小白
    时间: 2025年05月09日

    @超哥 非常感谢,已经解决了