可变产品选择器:获取实时选定值

问题描述

在 WooCommerce 中，使用以下代码在简单和可变产品的产品价格后添加自定义标签:

add_filter('woocommerce_variation_price_html','prices_custom_labels', 10, 2 );add_filter('woocommerce_price_html','prices_custom_labels', 10, 2);函数价格_custom_labels( $price, $product ){//在此处设置您的自定义标签名称$per_dozen = ' '.__('每打', 'woocommerce');$per_case = ' '.__('每箱 (20 打)', 'woocommerce');//1) 可变产品if ($product->product_type != 'simple' && $product->variation_id ) {//获取变体的现有属性值数组$variation_attribute_value = $product->variation_data;//这里我们只保留这个数组中的最后一个值$last_variation_attribute_slug_value = ' ' .结束($variation_attribute_value)；//在属性值 slug 中查找单词 'case'$has_case = strstr($last_variation_attribute_slug_value, 'case');//根据属性值设置正确显示的标签slug如果( $has_case )$attribute_quantity_name_value = $per_case;别的$attribute_quantity_name_value = $per_dozen;//这里是输出价格 + 自定义标签$price = '<ins class="highlight">'.woocommerce_price( $product- >regular_price ).$attribute_quantity_name_value.'</ins>';}//2) 简单的产品别的{//这里是输出价格 + 自定义默认标签$price = '<ins class="highlight">'.woocommerce_price( $product- >regular_price ).$per_dozen.'</ins>';}返回 $price;}

但在可变产品中，实时显示价格中附加的自定义标签存在问题.我使用的代码只显示在每打"实时价格之后.

我需要在自定义数量"选择器上获取所选值以在价格后添加正确的标签:

• 如果选择的值为打"，我需要在实时价格后显示每打"，
• 如果选择的值为一箱(20打)"，我需要在实时价格后显示每箱(20打)".

这个截图是我对所有情况的实际截图:

在我的网站上查看此问题<强>特定产品页面

因此，我需要获取属性数量"选定的值以将正确的标签附加到实时价格.

有什么帮助吗?我该怎么做才能让它发挥作用?

我尝试了很多代码，但我无法让它工作.

实现此功能的唯一方法是使用 Javascript/jQuery，但它很复杂，因为 WooCommerce 已经在其上运行了一些 Javascript/Ajax 代码.

首先，不可能检测选择器上的选定客户选择，因为 WooCommerce 从 中删除了 selected" 属性> html 标签.

一旦客户进行了完整的选择(因此从该可变产品中选择了一个变体)，Woocommerce 在隐藏的<代码><输入>中添加相应的变体 ID 值代码> html 字段 并显示相应的价格.

我们的 PHP 代码将传递给 javascript 变体 ID 的数组，用于该可变产品，带有相应的数量"值. 属性.

然后我们可以在 html 标签上使用 on blur" javascript 事件来获得隐藏 variation ID 值，然后将价格附加到正确的标签".

这是该功能代码，它将根据客户选择为实时价格添加自定义标签(因此选择的产品变体):

add_action('woocommerce_after_add_to_cart_form', 'custom_get_variations_js');函数 custom_get_variations_js() {全球$产品；//在此处设置您的数量"；属性弹头$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//将产品变体属性数组传递给 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}

然后我们需要更改您现有的代码以避免在此特定变量产品上显示第二个自定义标签(在第一个挂钩函数中):

add_filter('woocommerce_variation_price_html','prices_custom_labels', 10, 2 );add_filter('woocommerce_price_html','prices_custom_labels', 10, 2);函数价格_custom_labels( $price, $product ){//自定义标签名称$per_dozen = ' '.__('每打', 'woocommerce');//在此处设置您的数量"；属性弹头$attribute_qty_slug = 'pa_quantity';$attribute_qty_slug_key = 'attribute_'.$attribute_qty_slug;$append_label = '';//1) 可变产品if ($product->product_type != 'simple' && $product->variation_id ) {//获取属性数量"；价值$attribute_qty_is_set = $product->variation_data[$attribute_qty_slug_key];echo '
';print_r($product->variation_data[$attribute_qty_slug_key]);echo '</pre>';//如果数量"未设置我们显示每打"如果(！$attribute_qty_is_set)$append_label = $per_dozen;//输出价格+自定义标签$price = '<ins class="highlight">'.woocommerce_price( $product->regular_price ).$append_label.'</ins>';}//2) 简单的产品别的{//这里是输出价格 + 自定义默认标签$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);函数价格_custom_labels_min_max( $price, $product) {//自定义标签名称$per_dozen = ' '.__('每打', 'woocommerce');$per_case = ' '.__('每个案例', 'woocommerce');//在此处设置您的数量属性 slug$attribute_qty_slug = 'pa_quantity';//获取最小和最大变化价格$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;}
代码位于活动子主题(或主题)的 function.php 文件或任何插件文件中.
相关答案:
通过将选择的产品变体数据放入联系表 7 查询表
将自定义文本标签添加到产品价格取决于它们的类型
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


                        
这篇关于可变产品选择器:获取实时选定值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！


上一篇：在 Woocommerce 结帐页面中添加城市下拉列表 
下一篇：将自定义产品计算价格添加到 Woocommerce 购物车 

 
相关文章
以编程方式将可下载文件添加到 Woocommerce 产品Add programmatically a downloadable file to Woocommerce products(以编程方式将可下载文件添加到 Woocommerce 产品)
获取今天 Woocommerce 中每种产品的总订单数Get today#39;s total orders count for each product in Woocommerce(获取今天 Woocommerce 中每种产品的总订单数)
在 WooCommerce 和电话字段验证问题中添加自定义注Add Custom registration fields in WooCommerce and phone field validation issue(在 WooCommerce 和电话字段验证问题中添加自定义注册字段
在 Woocommerce 简单产品中添加一个将更改价格的选Add a select field that will change price in Woocommerce simple products(在 Woocommerce 简单产品中添加一个将更改价格的选择字段)
在 WooCommerce 3 中将自定义列添加到管理产品列表Add custom columns to admin products list in WooCommerce 3(在 WooCommerce 3 中将自定义列添加到管理产品列表)
自定义结帐“下订单"按钮输出htmlCustomizing checkout quot;Place Orderquot; button output html(自定义结帐“下订单按钮输出html)



最新文章

在 WooCommerce 中添加自定义库存状态
WooCommerce 获取订单总数
woocommerce - 获取购物车总数作为数量
如何获取订单商品 ID 以获取一些产品元数据?
覆盖 WordPress 中的插件功能
在 Woocommerce 注册表中添加条款和条件复选框
在 Woocommerce 中添加新产品时自动添加所有产品属
重命名 WooCommerce 订单状态
将自定义帖子类型/帖子添加到 Woocommerce
显示含税和不含税的 Woocommerce 产品价格和税额



Copyright © 2022-2023 HTML5模板网 版权所有并保留所有权