問(wèn)題描述

在 WooCommerce 中，使用以下代碼在簡(jiǎn)單和可變產(chǎn)品的產(chǎn)品價(jià)格后添加自定義標(biāo)簽:

add_filter('woocommerce_variation_price_html','prices_custom_labels', 10, 2 );add_filter('woocommerce_price_html','prices_custom_labels', 10, 2);函數(shù)價(jià)格_custom_labels( $price, $product ){//在此處設(shè)置您的自定義標(biāo)簽名稱$per_dozen = ' '.__('每打', 'woocommerce');$per_case = ' '.__('每箱 (20 打)', 'woocommerce');//1) 可變產(chǎn)品if ($product->product_type != 'simple' && $product->variation_id ) {//獲取變體的現(xiàn)有屬性值數(shù)組$variation_attribute_value = $product->variation_data;//這里我們只保留這個(gè)數(shù)組中的最后一個(gè)值$last_variation_attribute_slug_value = ' ' .結(jié)束($variation_attribute_value)；//在屬性值 slug 中查找單詞 'case'$has_case = strstr($last_variation_attribute_slug_value, 'case');//根據(jù)屬性值設(shè)置正確顯示的標(biāo)簽slug如果( $has_case )$attribute_quantity_name_value = $per_case;別的$attribute_quantity_name_value = $per_dozen;//這里是輸出價(jià)格 + 自定義標(biāo)簽$price = '<ins class="highlight">'.woocommerce_price( $product- >regular_price ).$attribute_quantity_name_value.'</ins>';}//2) 簡(jiǎn)單的產(chǎn)品別的{//這里是輸出價(jià)格 + 自定義默認(rèn)標(biāo)簽$price = '<ins class="highlight">'.woocommerce_price( $product- >regular_price ).$per_dozen.'</ins>';}返回 $price;}

但在可變產(chǎn)品中，實(shí)時(shí)顯示價(jià)格中附加的自定義標(biāo)簽存在問(wèn)題.我使用的代碼只顯示在每打"實(shí)時(shí)價(jià)格之后.

我需要在自定義數(shù)量"選擇器上獲取所選值以在價(jià)格后添加正確的標(biāo)簽:

• 如果選擇的值為打"，我需要在實(shí)時(shí)價(jià)格后顯示每打"，
• 如果選擇的值為一箱(20打)"，我需要在實(shí)時(shí)價(jià)格后顯示每箱(20打)".

這個(gè)截圖是我對(duì)所有情況的實(shí)際截圖:

在我的網(wǎng)站上查看此問(wèn)題<強(qiáng)>特定產(chǎn)品頁(yè)面

因此，我需要獲取屬性數(shù)量"選定的值以將正確的標(biāo)簽附加到實(shí)時(shí)價(jià)格.

有什么幫助嗎?我該怎么做才能讓它發(fā)揮作用?

我嘗試了很多代碼，但我無(wú)法讓它工作.

實(shí)現(xiàn)此功能的唯一方法是使用 Javascript/jQuery，但它很復(fù)雜，因?yàn)?WooCommerce 已經(jīng)在其上運(yùn)行了一些 Javascript/Ajax 代碼.

首先，不可能檢測(cè)選擇器上的選定客戶選擇，因?yàn)?WooCommerce 從 中刪除了 selected" 屬性> html 標(biāo)簽.

一旦客戶進(jìn)行了完整的選擇(因此從該可變產(chǎn)品中選擇了一個(gè)變體)，Woocommerce 在隱藏的<代碼><輸入>中添加相應(yīng)的變體 ID 值代碼> html 字段 并顯示相應(yīng)的價(jià)格.

我們的 PHP 代碼將傳遞給 javascript 變體 ID 的數(shù)組，用于該可變產(chǎn)品，帶有相應(yīng)的數(shù)量"值. 屬性.

然后我們可以在 html 標(biāo)簽上使用 on blur" javascript 事件來(lái)獲得隱藏 variation ID 值，然后將價(jià)格附加到正確的標(biāo)簽".

這是該功能代碼，它將根據(jù)客戶選擇為實(shí)時(shí)價(jià)格添加自定義標(biāo)簽(因此選擇的產(chǎn)品變體):

add_action('woocommerce_after_add_to_cart_form', 'custom_get_variations_js');函數(shù) custom_get_variations_js() {全球$產(chǎn)品；//在此處設(shè)置您的數(shù)量"；屬性彈頭$attribute_qty_slug = 'pa_quantity';$attribute_qty_slug_key = 'attribute_'.$attribute_qty_slug;foreach($product->get_available_variations() 作為 $values){$attribute_qty_slug_value = $values['attributes'][$attribute_qty_slug_key];$attribute_qty_name_value = get_term_by('slug', $attribute_qty_slug_value, $attribute_qty_slug );$variations_id_arr[$values['variation_id']] = __(' per ', 'woocommerce') .strtolower($attribute_qty_name_value->name);}## JQUERY 腳本##?><腳本>(功能($){var $attributes;<?php//將產(chǎn)品變體屬性數(shù)組傳遞給 javascript$js_array = json_encode($variations_id_arr);echo 'var $variationsIdsAttr = '.$js_array ;?>$('td.value select').blur(function() {var $variationId = $('input[name="variation_id"]').val();if (typeof $variationId !== 'undefined' ){for($variationsIdsAttr 中的鍵){if( 鍵 == $variationId ){$attributes = $variationsIdsAttr[key];休息;}}}if ( typeof $attributes !== 'undefined' ){$('.woocommerce-variation-price .woocommerce-Price-amount.amount').append( $attributes );}});})(jQuery);<?php}

然后我們需要更改您現(xiàn)有的代碼以避免在此特定變量產(chǎn)品上顯示第二個(gè)自定義標(biāo)簽(在第一個(gè)掛鉤函數(shù)中):

add_filter('woocommerce_variation_price_html','prices_custom_labels', 10, 2 );add_filter('woocommerce_price_html','prices_custom_labels', 10, 2);函數(shù)價(jià)格_custom_labels( $price, $product ){//自定義標(biāo)簽名稱$per_dozen = ' '.__('每打', 'woocommerce');//在此處設(shè)置您的數(shù)量"；屬性彈頭$attribute_qty_slug = 'pa_quantity';$attribute_qty_slug_key = 'attribute_'.$attribute_qty_slug;$append_label = '';//1) 可變產(chǎn)品if ($product->product_type != 'simple' && $product->variation_id ) {//獲取屬性數(shù)量"；價(jià)值$attribute_qty_is_set = $product->variation_data[$attribute_qty_slug_key];echo '
';print_r($product->variation_data[$attribute_qty_slug_key]);echo '</pre>';//如果數(shù)量"未設(shè)置我們顯示每打"如果(！$attribute_qty_is_set)$append_label = $per_dozen;//輸出價(jià)格+自定義標(biāo)簽$price = '<ins class="highlight">'.woocommerce_price( $product->regular_price ).$append_label.'</ins>';}//2) 簡(jiǎn)單的產(chǎn)品別的{//這里是輸出價(jià)格 + 自定義默認(rèn)標(biāo)簽$price = '<ins class="highlight">'.woocommerce_price( $product->regular_price ).$per_dozen.'</ins>';}返回 $price;}add_filter('woocommerce_variable_price_html', 'prices_custom_labels_min_max', 20, 2);函數(shù)價(jià)格_custom_labels_min_max( $price, $product) {//自定義標(biāo)簽名稱$per_dozen = ' '.__('每打', 'woocommerce');$per_case = ' '.__('每個(gè)案例', 'woocommerce');//在此處設(shè)置您的數(shù)量屬性 slug$attribute_qty_slug = 'pa_quantity';//獲取最小和最大變化價(jià)格$variation_min_reg_price = $product->get_variation_regular_price('min', true);$variation_max_reg_price = $product->get_variation_regular_price('max', true);$variation_reg_price = $product->get_variation_regular_price();如果( $variation_min_reg_price == $variation_max_reg_price ){$price = ''.woocommerce_price($variation_reg_price) .$per_dozen .'</ins>';}別的{if( !in_array( $attribute_qty_slug, array_keys( $product->get_attributes() ) ) ){$price = ''.woocommerce_price($variation_min_reg_price) .$per_dozen .' - ' .woocommerce_price($variation_max_reg_price) .$per_dozen .'</ins>';}別的{$price = ''.woocommerce_price($variation_min_reg_price) .$per_dozen .' - ' .woocommerce_price($variation_max_reg_price) .$per_case .'</ins>';}}//print_r($product->get_attributes());返回 $price;}
代碼位于活動(dòng)子主題(或主題)的 function.php 文件或任何插件文件中.
相關(guān)答案:
通過(guò)將選擇的產(chǎn)品變體數(shù)據(jù)放入聯(lián)系表 7 查詢表
將自定義文本標(biāo)簽添加到產(chǎn)品價(jià)格取決于它們的類型
In WooCommerce use the code below to add a custom label after product prices in simple and variables products:
add_filter('woocommerce_variation_price_html','prices_custom_labels', 10, 2    );
add_filter('woocommerce_price_html','prices_custom_labels', 10, 2 );
function prices_custom_labels( $price, $product ){

    // Set HERE your custom labels names
    $per_dozen = ' '. __('per dozen', 'woocommerce' );
    $per_case = ' '. __('per case (20 dozens)', 'woocommerce' );


    // 1) Variable products
    if ($product->product_type != 'simple' && $product->variation_id ) {

        // Getting the array of existing attributes values for a variation
        $variation_attribute_value = $product->variation_data;
        // Here we keep only the last value in this array
        $last_variation_attribute_slug_value = ' ' .    end($variation_attribute_value);

        // Finding the word 'case' in the attribute value slug
        $has_case = strstr($last_variation_attribute_slug_value, 'case');

        // Setting the right displayed label depending on attribute value slug
        if( $has_case )
            $attribute_quantity_name_value = $per_case;
        else
            $attribute_quantity_name_value = $per_dozen;

        // Here the output price + custom label
        $price = '<ins class="highlight">'.woocommerce_price( $product-   >regular_price ).$attribute_quantity_name_value.'</ins>';
    }
    // 2) Simple products
    else
    {
        // Here the output price + custom default label
        $price = '<ins class="highlight">'.woocommerce_price( $product-  >regular_price ).$per_dozen.'</ins>';
    }
    return $price;
}
But in variable products, I have an issue with the appended custom label in the  live displayed price. The code that I use only display after the live price "per dozen".

I will need to get the selected value on the custom "quantity" selector to add the right label after the price:


If the selected value is "Dozen" I need to display after live price " per dozen",
If the selected value is "Case (20 dozens)" I need to display after live price " per case (20 dozens)".


This screenshot is what I have actually for all cases:



Check this issue on my web site specific product page

  
So I would need to get the attribute "quantity" selected value to append the right label to the live price.
Any help? How can I do to get that working?

I have tried many code, and I can't get it working.
 解決方案 
The only way to get this working is to use Javascript / jQuery, but it's complicated as WooCommerce is already running  some Javascript / Ajax code on it.
First, Is not possible to detect the selected customer choice on the selectors as WooCommerce remove "selected" attribute from <option> html tags.

Once customer have make a complete selection (so choosed one variation from this variable product), Woocommerce add the corresponding variation ID value in a hidden <imput> html field and display the corresponding price.
Our PHP code pass to javascript an array of the variations IDs for this variable product, with the corresponding value of the "quantity" attribute for each of them.
Then we can use the "on blur" javascript event on the <select> html tags to get that hidden variation ID value and then append the price with the right "label".
Here is that functional code, that will add a custom label to the live price depending on the customer selection (so the selected product variation):
add_action( 'woocommerce_after_add_to_cart_form', 'custom_get_variations_js' );
function custom_get_variations_js() {
    global $product;

    // Set HERE your "quantity" attribute slug
    $attribute_qty_slug = 'pa_quantity';
    $attribute_qty_slug_key = 'attribute_'.$attribute_qty_slug;

    foreach($product->get_available_variations() as $values){
        $attribute_qty_slug_value = $values['attributes'][$attribute_qty_slug_key];
        $attribute_qty_name_value = get_term_by( 'slug', $attribute_qty_slug_value, $attribute_qty_slug );
        $variations_id_arr[$values['variation_id']] = __(' per ', 'woocommerce' ) . strtolower($attribute_qty_name_value->name);
    }

    ## THE JQUERY SCRIPT ##
    ?>
    <script>
        (function($){
            var $attributes;
            <?php
                // Passing the product variations attributes array to javascript
                $js_array = json_encode($variations_id_arr);
                echo 'var $variationsIdsAttr = '. $js_array ;
            ?>
            $('td.value select').blur(function() {
                var $variationId = $('input[name="variation_id"]').val();
                if (typeof $variationId !== 'undefined' ){
                    for(key in $variationsIdsAttr){
                        if( key == $variationId ){
                            $attributes = $variationsIdsAttr[key];
                            break;
                        }
                    }
                }
                if ( typeof $attributes !== 'undefined' ){
                    $('.woocommerce-variation-price .woocommerce-Price-amount.amount').append( $attributes );
                }
            });
        })(jQuery);
    </script>
    <?php
}
Then we need to change your existing code to avoid displaying a second custom label on this specifics variable products (in the first hooked function):
add_filter('woocommerce_variation_price_html','prices_custom_labels', 10, 2 );
add_filter('woocommerce_price_html','prices_custom_labels', 10, 2 );
function prices_custom_labels( $price, $product ){

    // Custom label name
    $per_dozen = ' '. __('per dozen', 'woocommerce' );

    // Set HERE your "quantity" attribute slug
    $attribute_qty_slug = 'pa_quantity';

    $attribute_qty_slug_key = 'attribute_'.$attribute_qty_slug;
    $append_label = '';

    // 1) Variable products
    if ($product->product_type != 'simple' && $product->variation_id ) {

        // Getting the attribute "quantity" value
        $attribute_qty_is_set = $product->variation_data[$attribute_qty_slug_key];
        echo '<pre>'; print_r($product->variation_data[$attribute_qty_slug_key]); echo '</pre>';

        // if "quantity" not set we display " per dozen"
        if( ! $attribute_qty_is_set )
            $append_label = $per_dozen;


        // Outputed price + custom label
        $price = '<ins class="highlight">'.woocommerce_price( $product->regular_price ).$append_label.'</ins>';
    }
    // 2) Simple products
    else
    {
        // Here the output price + custom default label
        $price = '<ins class="highlight">'.woocommerce_price( $product->regular_price ).$per_dozen.'</ins>';
    }
    return $price;
}

add_filter('woocommerce_variable_price_html', 'prices_custom_labels_min_max', 20, 2);
function prices_custom_labels_min_max( $price, $product) {

    // Custom label name
    $per_dozen = ' '. __('per dozen', 'woocommerce' );
    $per_case = ' '. __('per case', 'woocommerce' );

    // Set HERE your quantity attribute slug
    $attribute_qty_slug = 'pa_quantity';


    // Getting the min and max variations prices
    $variation_min_reg_price = $product->get_variation_regular_price('min', true);
    $variation_max_reg_price = $product->get_variation_regular_price('max', true);
    $variation_reg_price = $product->get_variation_regular_price();


    if( $variation_min_reg_price == $variation_max_reg_price )
    {
        $price = '<ins class="highlight">'.woocommerce_price($variation_reg_price) . $per_dozen . '</ins>';
    }
    else
    {
        if( !in_array( $attribute_qty_slug, array_keys( $product->get_attributes() ) ) )
        {
            $price = '<ins class="highlight">' . woocommerce_price($variation_min_reg_price) . $per_dozen . ' - ' . woocommerce_price($variation_max_reg_price) . $per_dozen . '</ins>';
        }
        else
        {
            $price = '<ins class="highlight">' . woocommerce_price($variation_min_reg_price) . $per_dozen . ' - ' . woocommerce_price($variation_max_reg_price) . $per_case . '</ins>';
        }
    }
    // print_r($product->get_attributes());
    return $price;
}
Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

Related answer:

Pass the chosen product variations data into Contact Form 7 enquiry form
Adding custom text labels to the product prices depending on their type


                        
這篇關(guān)于可變產(chǎn)品選擇器:獲取實(shí)時(shí)選定值的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！
                
【網(wǎng)站聲明】本站部分內(nèi)容來(lái)源于互聯(lián)網(wǎng),旨在幫助大家更快的解決問(wèn)題，如果有圖片或者內(nèi)容侵犯了您的權(quán)益，請(qǐng)聯(lián)系我們刪除處理，感謝您的支持！
                
                

             

                  

                  上一篇：在 Woocommerce 結(jié)帳頁(yè)面中添加城市下拉列表 
                  下一篇：將自定義產(chǎn)品計(jì)算價(jià)格添加到 Woocommerce 購(gòu)物車 
                  
                
              
            
          
          
          

            

              

                

                  
相關(guān)文檔推薦
                

                

                  

                    以編程方式將可下載文件添加到 Woocommerce 產(chǎn)品
                  
                  
Add programmatically a downloadable file to Woocommerce products(以編程方式將可下載文件添加到 Woocommerce 產(chǎn)品)
                
                

                

                  

                    獲取今天 Woocommerce 中每種產(chǎn)品的總訂單數(shù)
                  
                  
Get today#39;s total orders count for each product in Woocommerce(獲取今天 Woocommerce 中每種產(chǎn)品的總訂單數(shù))
                
                

                

                  

                    在 WooCommerce 和電話字段驗(yàn)證問(wèn)題中添加自定義注
                  
                  
Add Custom registration fields in WooCommerce and phone field validation issue(在 WooCommerce 和電話字段驗(yàn)證問(wèn)題中添加自定義注冊(cè)字段)
                
                

                

                  

                    在 Woocommerce 簡(jiǎn)單產(chǎn)品中添加一個(gè)將更改價(jià)格的選
                  
                  
Add a select field that will change price in Woocommerce simple products(在 Woocommerce 簡(jiǎn)單產(chǎn)品中添加一個(gè)將更改價(jià)格的選擇字段)
                
                

                

                  

                    在 WooCommerce 3 中將自定義列添加到管理產(chǎn)品列表
                  
                  
Add custom columns to admin products list in WooCommerce 3(在 WooCommerce 3 中將自定義列添加到管理產(chǎn)品列表)
                
                

                

                  

                    自定義結(jié)帳“下訂單"按鈕輸出html
                  
                  
Customizing checkout quot;Place Orderquot; button output html(自定義結(jié)帳“下訂單按鈕輸出html)
                
                

            
          
        
        
        
        

          
          

            

               

                欄目導(dǎo)航
                
前端問(wèn)題解決Java問(wèn)題php問(wèn)題Python問(wèn)題C#/.NET問(wèn)題C/C++問(wèn)題移動(dòng)開(kāi)發(fā)問(wèn)題數(shù)據(jù)庫(kù)問(wèn)題

                
              
            
          
          
          
          

            

              

                最新文章
                

                    • php使用json_encode gbk編碼下漢字...
                  

                    • php解決json gbk編碼中文null問(wèn)題...
                  

                    • Resource id #3有關(guān)問(wèn)題...
                  

                    • whereJsonContains Laravel 5.6 不起作...
                  

                    • Laravel SwiftMailer:預(yù)期響應(yīng)代碼...
                  

                    • 輸出一個(gè)php多維數(shù)組到一個(gè)...
                  

                    • 使用 php/windows 安裝 ImageMagi...
                  

                    • 覆蓋多個(gè)模塊中的 magento 塊...
                  

                    • 確定 Laravel 5 中的文件是否存...
                  

                    • Laravel 5 isDirty() 總是返回 fa...
                  

                    • Laravel 5 Form::model(...) 默認(rèn)轉(zhuǎn)義...
                  

                    • Laravel 在用戶級(jí)別自定義 se...
                  

              
            
          
          
          
          

            

              

                熱門文章
                

                    • php使用json_encode gbk編碼下漢字...
                  

                    • php解決json gbk編碼中文null問(wèn)題...
                  

                    • Resource id #3有關(guān)問(wèn)題...
                  

                    • whereJsonContains Laravel 5.6 不起作...
                  

                    • Laravel SwiftMailer:預(yù)期響應(yīng)代碼...
                  

                    • 輸出一個(gè)php多維數(shù)組到一個(gè)...
                  

                    • 使用 php/windows 安裝 ImageMagi...
                  

                    • 覆蓋多個(gè)模塊中的 magento 塊...
                  

                    • 確定 Laravel 5 中的文件是否存...
                  

                    • Laravel 5 isDirty() 總是返回 fa...
                  

                    • Laravel 5 Form::model(...) 默認(rèn)轉(zhuǎn)義...
                  

                    • Laravel 在用戶級(jí)別自定義 se...
                  

              
            
          
          
          
          

            

              

                熱門標(biāo)簽
                

        	旅游公司
         	
        	服裝服飾
         	
        	機(jī)械設(shè)備
         	
        	電子產(chǎn)品
         	
        	政府協(xié)會(huì)
         	
        	網(wǎng)絡(luò)營(yíng)銷
         	
        	環(huán)保科技
         	
        	科技公司
         	
        	家政服務(wù)
         	
        	營(yíng)銷型
         	
        	環(huán)保
         	
        	軟件開(kāi)發(fā)
         	
        	傳媒公司
         	
        	金融服務(wù)
         	
        	雙語(yǔ)
         	
        	培訓(xùn)機(jī)構(gòu)
         	
        	零部件
         	
        	教育培訓(xùn)
         	
        	博客主題
         	
        	軸承
         	
        	新聞資訊
         	
        	視頻
         	
        	進(jìn)銷存系統(tǒng)
         	
        	bootstrap
         	
        	商城模板
         	
        	商務(wù)合作
         	
        	廣告設(shè)計(jì)
         	
        	驗(yàn)證碼
         	
        	門戶
         	
        	ar
         	
        	OElove
         	
        	漫畫網(wǎng)
         	
        	全景
         	
        	商城
         	
        	區(qū)塊鏈
         	
        	虛擬幣
         	
        	你畫我猜
         	
        	卡券
         	
        	動(dòng)畫特效
         	
        	在線客服
         	
        	地板
         	
        	域名停放
         	
        	canvas
         	
        	html5
         	
        	svg
         	
        	博客
         	
        	攝影
         	
        	導(dǎo)航
         	
        	小說(shuō)源碼
         	
        	自動(dòng)設(shè)備
         	
        	蘋果cms
         	
        	微擎微贊
         	
        	微商
         	
        	訂單系統(tǒng)
         	
        	小程序
         	
        	電影源碼
         	
        	微信程序
         	
        	帝國(guó)cms
         	
        	掃碼點(diǎn)餐
         	
        	jquery
         	
        	angular
         	
        	視頻打賞
         	
        	thinkphp
         	
        	360
         	
        	動(dòng)畫模板
         	
        	淘寶客
         	
        	音樂(lè)
         	
        	分發(fā)系統(tǒng)
         	
        	o2o
         	
        	微擎
         	

              
            
          
          
        
        
      
    
 






主站蜘蛛池模板：
色综合网站
|
国产精品视频偷伦精品视频
|
久草欧美
|
精品日韩电影
|
中文字幕在线剧情
|
一级片免费视频
|
国产亚洲精品久久久久久牛牛
|
综合精品久久久
|
欧美中文在线
|
国产免费xxx|
久久精品一
|
国产在线www
|
在线免费观看视频黄
|
一级在线观看
|
久草中文在线
|
嫩草影院网址
|
99久久99久久精品国产片果冰
|
在线免费小视频
|
欧美精品久久一区
|
欧美在线国产精品
|
国产一区高清
|
精品亚洲一区二区三区
|
国产无套一区二区三区久久
|
午夜在线精品偷拍
|
亚洲高清中文字幕
|
日本精品久久
|
99re6在线视频精品免费
|
国产精品高清在线
|
日本不卡高字幕在线2019
|
91精品国产91
|
99久久精品国产一区二区三区
|
国产精品一区二区三区久久
|
日韩二区
|
国精产品一区二区三区
|
久久久久久久久91
|
日韩欧美在线视频播放
|
一级毛片视频在线
|
精区3d动漫一品二品精区
|
91av视频在线观看
|
日本黄色影片在线观看
|
欧美一区在线视频
|

<rt id="aseus"><pre id="aseus"></pre></rt>