blocks|key|4278204|text|为了让它工作，我专门为产品变体使用了一个定制的ajax+add-+To+-cart。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4278205|1)。我首先对你的按钮html做了一点修改：|4278206|<div+class="btnss">
++++<span+class="price">
++++++++<span+class="woocommerce-Price-amount+amount">6,999&nbsp;
++++++++++++<span+class="woocommerce-Price-currencySymbol">kr</span>
++++++++</span>
++++</span>
++++<div+class="quantity+buttons_added">
++++++++<input+type="button"+value="-"+class="minus">
++++++++<label+class="screen-reader-text"+for="quantity_5b101f605f067">Quantity</label>
++++++++<input+type="number"+id="quantity_5b101f605f067"+class="input-text+qty+text"+step="1"+min="1"+max=""+name="quantity"+value="1"+title="Qty"+size="4"+pattern="[0-9]*"+inputmode="numeric"+aria-labelledby="">
++++++++<input+type="button"+value="%2B"+class="plus">
++++</div>
++++<a+href="#"+class="button+product_type_variation+add_to_cart_button+ajax+variation"+data-product_id="237"+data-variation_id="208673"+data-quantity="1"+data-variation="pa_option=bluetooth">Add+to+cart</a>
</div>|code-block|syntax|javascript|4278207|正如您将看到的，我没有使用按钮href属性，因为我通过ajax发布数据。|offset|length|style|CODE|4278208|对于您的属性，如果您有多个属性，您将使用coma将每对属性分开，如下所示：|4278209|data-variation="pa_option=bluetooth,pa_color=red-shiny"|4278210|2)。PHP+(Wordpress-Ajax)和jQuery+(Ajax)代码：|4278211|//+Wordpress+Ajax+php:+Adding+variation+to+cart
add_action(+'wp_ajax_nopriv_variation_to_cart',+'product_variation_add_to_cart'+);
add_action(+'wp_ajax_variation_to_cart',+'product_variation_add_to_cart'+);
function+product_variation_add_to_cart()+{
++++if(+isset($_POST['pid'])+&&+$_POST['pid']+>+0+){
++++++++$product_id+++=+(int)+$_POST['pid'];
++++++++$variation_id+=+(int)+$_POST['vid'];
++++++++$quantity+++++=+(int)+$_POST['qty'];
++++++++$attributes+++=+explode(',',+$_POST['var']);
++++++++$variation++++=+array();
++++++++foreach($attributes+as+$values){
++++++++++++$values+=+explode('=',+$values);
++++++++++++$variation['attributes_'.$values[0]]+=+$values[1];
++++++++}
++++++++WC()->cart->add_to_cart(+$product_id,+$quantity,+$variation_id,+$variation+);
++++++++echo+true;
++++}
++++die();+//+To+avoid+server+error+500
}

//+The+Jquery+ajax+script
add_action(+'wp_footer',+'custom_product_variation_script'+);
function+custom_product_variation_script()+{
++++//+HERE+set+the+page+or+the+post+ID
++++$the_id+=+102;

++++if(+!+(+is_page($the_id)+%7C%7C+is_single($the_id)+)+)+return;

++++$view_cart+=+'<a+href="'.wc_get_cart_url().'"+class="added_to_cart+wc-forward"+title="View+cart">View+cart</a>';
++++$adding++++=+__('Adding+to+cart…',+'woocommerce');
++++?>
++++<script+type="text/javascript">
++++jQuery(+function($){
++++++++//+wc_add_to_cart_params+is+required+to+continue
++++++++if+(+typeof+wc_add_to_cart_params+===+'undefined'+)
++++++++++++return+false;

++++++++var+a+=+'a.button.ajax.variation',
++++++++++++b+=+$(a).html(),
++++++++++++c+=+'<?php+echo+$view_cart;+?>',
++++++++++++d+=+'<?php+echo+$adding;+?>';

++++++++//+Sync+the+data-quantity+attribute
++++++++$('input.minus,input.plus').on(+'click+blur',+function(){
++++++++++++$(a).attr('data-quantity',$('input.qty').val());
++++++++});
++++++++$('input.qty').on('input+click+blur',+function(){
++++++++++++$(a).attr('data-quantity',$('input.qty').val());
++++++++})

++++++++$(a).on('click',+function(e){
++++++++++++e.preventDefault();

++++++++++++$('a.wc-forward').remove();
++++++++++++$(a).html(d);

++++++++++++//+The+Ajax+request
++++++++++++$.ajax({
++++++++++++++++type:+'POST',
++++++++++++++++url:+wc_add_to_cart_params.ajax_url,
++++++++++++++++data:+{
++++++++++++++++++++'action':+'variation_to_cart',
++++++++++++++++++++'pid'+++:+$(a).attr('data-product_id'),
++++++++++++++++++++'vid'+++:+$(a).attr('data-variation_id'),
++++++++++++++++++++'qty'+++:+$(a).attr('data-quantity'),
++++++++++++++++++++'var'+++:+$(a).attr('data-variation'),
++++++++++++++++},
++++++++++++++++success:+function+(response)+{
++++++++++++++++++++if(response){
++++++++++++++++++++++++//+Update+button+and+refresh+minicart+fragments
++++++++++++++++++++++++setTimeout(function(){
++++++++++++++++++++++++++++$(a).addClass('added').html(b).after(c);
++++++++++++++++++++++++++++$(document.body).trigger('added_to_cart').trigger('wc_fragment_refresh');
++++++++++++++++++++++++},+500);
++++++++++++++++++++}
++++++++++++++++},
++++++++++++++++error:+function+(error)+{
++++++++++++++++++++$(a).addClass('failed').html('Add+to+cart+failed!');
++++++++++++++++++++console.log(error);
++++++++++++++++}
++++++++++++});
++++++++});
++++});
++++</script>
++++<?php
}|4278212|代码放在活动子主题(或活动主题)的function.php文件中。经过测试，效果良好。|4278213|entityMap^0|0|0|0|F|4|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|13|8|@$K|14|L|15|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|16|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|17|8|@]|9|@]|A|$G|H]]|$1|S|3|T|5|6|7|18|8|@]|9|@]|A|$]]|$1|U|3|V|5|F|7|19|8|@]|9|@]|A|$G|H]]|$1|W|3|X|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|Z|$]]

<p>To make it work I use a custom ajax add-to-cart for product variations exclusively.</p>
<p>1). I have first changed a bit your button html:</p>
<pre><code>&lt;div class=&quot;btnss&quot;&gt;
    &lt;span class=&quot;price&quot;&gt;
        &lt;span class=&quot;woocommerce-Price-amount amount&quot;&gt;6,999&amp;nbsp;
            &lt;span class=&quot;woocommerce-Price-currencySymbol&quot;&gt;kr&lt;/span&gt;
        &lt;/span&gt;
    &lt;/span&gt;
    &lt;div class=&quot;quantity buttons_added&quot;&gt;
        &lt;input type=&quot;button&quot; value=&quot;-&quot; class=&quot;minus&quot;&gt;
        &lt;label class=&quot;screen-reader-text&quot; for=&quot;quantity_5b101f605f067&quot;&gt;Quantity&lt;/label&gt;
        &lt;input type=&quot;number&quot; id=&quot;quantity_5b101f605f067&quot; class=&quot;input-text qty text&quot; step=&quot;1&quot; min=&quot;1&quot; max=&quot;&quot; name=&quot;quantity&quot; value=&quot;1&quot; title=&quot;Qty&quot; size=&quot;4&quot; pattern=&quot;[0-9]*&quot; inputmode=&quot;numeric&quot; aria-labelledby=&quot;&quot;&gt;
        &lt;input type=&quot;button&quot; value=&quot;+&quot; class=&quot;plus&quot;&gt;
    &lt;/div&gt;
    &lt;a href=&quot;#&quot; class=&quot;button product_type_variation add_to_cart_button ajax variation&quot; data-product_id=&quot;237&quot; data-variation_id=&quot;208673&quot; data-quantity=&quot;1&quot; data-variation=&quot;pa_option=bluetooth&quot;&gt;Add to cart&lt;/a&gt;
&lt;/div&gt;
</code></pre>
<p>As you will see I don't use the button <code>href</code> attribute, as I post the data through ajax.</p>
<p>For your attributes, if you have more than one, you will separate each pair by a coma like:</p>
<pre><code>data-variation=&quot;pa_option=bluetooth,pa_color=red-shiny&quot;
</code></pre>
<p>2). The PHP (Wordpress-Ajax) and the jQuery (Ajax) code:</p>
<pre><code>// Wordpress Ajax php: Adding variation to cart
add_action( 'wp_ajax_nopriv_variation_to_cart', 'product_variation_add_to_cart' );
add_action( 'wp_ajax_variation_to_cart', 'product_variation_add_to_cart' );
function product_variation_add_to_cart() {
    if( isset($_POST['pid']) &amp;&amp; $_POST['pid'] &gt; 0 ){
        $product_id   = (int) $_POST['pid'];
        $variation_id = (int) $_POST['vid'];
        $quantity     = (int) $_POST['qty'];
        $attributes   = explode(',', $_POST['var']);
        $variation    = array();
        foreach($attributes as $values){
            $values = explode('=', $values);
            $variation['attributes_'.$values[0]] = $values[1];
        }
        WC()-&gt;cart-&gt;add_to_cart( $product_id, $quantity, $variation_id, $variation );
        echo true;
    }
    die(); // To avoid server error 500
}

// The Jquery ajax script
add_action( 'wp_footer', 'custom_product_variation_script' );
function custom_product_variation_script() {
    // HERE set the page or the post ID
    $the_id = 102;

    if( ! ( is_page($the_id) || is_single($the_id) ) ) return;

    $view_cart = '&lt;a href=&quot;'.wc_get_cart_url().'&quot; class=&quot;added_to_cart wc-forward&quot; title=&quot;View cart&quot;&gt;View cart&lt;/a&gt;';
    $adding    = __('Adding to cart…', 'woocommerce');
    ?&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
    jQuery( function($){
        // wc_add_to_cart_params is required to continue
        if ( typeof wc_add_to_cart_params === 'undefined' )
            return false;

        var a = 'a.button.ajax.variation',
            b = $(a).html(),
            c = '&lt;?php echo $view_cart; ?&gt;',
            d = '&lt;?php echo $adding; ?&gt;';

        // Sync the data-quantity attribute
        $('input.minus,input.plus').on( 'click blur', function(){
            $(a).attr('data-quantity',$('input.qty').val());
        });
        $('input.qty').on('input click blur', function(){
            $(a).attr('data-quantity',$('input.qty').val());
        })

        $(a).on('click', function(e){
            e.preventDefault();

            $('a.wc-forward').remove();
            $(a).html(d);

            // The Ajax request
            $.ajax({
                type: 'POST',
                url: wc_add_to_cart_params.ajax_url,
                data: {
                    'action': 'variation_to_cart',
                    'pid'   : $(a).attr('data-product_id'),
                    'vid'   : $(a).attr('data-variation_id'),
                    'qty'   : $(a).attr('data-quantity'),
                    'var'   : $(a).attr('data-variation'),
                },
                success: function (response) {
                    if(response){
                        // Update button and refresh minicart fragments
                        setTimeout(function(){
                            $(a).addClass('added').html(b).after(c);
                            $(document.body).trigger('added_to_cart').trigger('wc_fragment_refresh');
                        }, 500);
                    }
                },
                error: function (error) {
                    $(a).addClass('failed').html('Add to cart failed!');
                    console.log(error);
                }
            });
        });
    });
    &lt;/script&gt;
    &lt;?php
}
</code></pre>
<p>Code goes in function.php file of your active child theme (or active theme). Tested and works.</p>


<p>I have this button here. The use of this button is to add to cart a product has a product id of 237, variation id of 208673, and attribute_pa_option of bluetooth. Is there a way to AJAX this?</p>

<pre><code>&lt;div class="btnss"&gt;
    &lt;span class="price"&gt;
        &lt;span class="woocommerce-Price-amount amount"&gt;6,999&amp;nbsp;
            &lt;span class="woocommerce-Price-currencySymbol"&gt;kr&lt;/span&gt;
        &lt;/span&gt;
    &lt;/span&gt;
    &lt;div class="quantity buttons_added"&gt;
        &lt;input type="button" value="-" class="minus"&gt;
        &lt;label class="screen-reader-text" for="quantity_5b101f605f067"&gt;Quantity&lt;/label&gt;
        &lt;input type="number" id="quantity_5b101f605f067" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="Qty" size="4" pattern="[0-9]*" inputmode="numeric" aria-labelledby=""&gt;
        &lt;input type="button" value="+" class="plus"&gt;
    &lt;/div&gt;
    &lt;a href="/?add-to-cart=237&amp;variation_id=208673&amp;attribute_pa_option=bluetooth" class="button product_type_simple add_to_cart_button ajax_add_to_cart"&gt;Add to cart&lt;/a&gt;
&lt;/div&gt;
</code></pre>


Ajax add to cart button for product variation in WooCommerce 3

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我这里有个按钮。使用此按钮可将产品id为237、变体id为208673、蓝牙为attribute_pa_option的产品添加到购物车中。有没有办法用AJAX解决这个问题呢？<div class="btnss">    <span class="price">        <span class="woocommer...

Ajax添加到购物车按钮，用于WooCommerce 3中的产品变体-腾讯云开发者社区-腾讯云

问Ajax添加到购物车按钮，用于WooCommerce 3中的产品变体
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Ajax添加到购物车按钮，用于WooCommerce 3中的产品变体EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Ajax添加到购物车按钮，用于WooCommerce 3中的产品变体
EN