在 WooCommerce 单个产品上动态设置和显示自定义产品变体值 [英] Set and display a custom product variation value dynamically on WooCommerce single products

问题描述

我有一个 WooCommerce 珠宝网站.在单变量产品页面上，我有变体，并添加了一个文本框(文本框供客户写下将印在珠宝上的东西).

所以我希望页面按如下方式工作:如果客户选择特定的产品变体并开始在文本框中输入产品的价格应根据字母数量而变化(注意:这应该仅在一个特定变体是选择)对所有其他产品的价格将是固定的.

我确实设法完成了文本框价格更新的部分.

我在这里遇到的问题是选择特定的产品变体.

基于 显示Woocommerce 中所选变体的产品属性术语 答案，我尝试通过以下代码尝试解决此问题:

function vendor_defined_taxonomy() {返回材料"；}add_action('woocommerce_product_meta_end', 'display_product_vendors', 10);功能 display_product_vendors() {$taxonomy = vendor_defined_taxonomy();$term_ids = wp_get_post_terms( get_the_ID(), $taxonomy, array('fields' =>'id') );if( sizeof($term_ids) > 0 ){echo '<span class="posted_in vendor"></span>';}}add_filter( 'woocommerce_available_variation', 'selected_variation_vendor_value', 10, 3 );函数 selected_variation_vendor_value( $data, $product, $variation ) {$taxonomy = vendor_defined_taxonomy();if( isset($data['attributes']['attribute_'.$taxonomy]))$term = get_term_by( 'slug', $data['attributes']['attribute_'.$taxonomy], $taxonomy );if( isset($term) && is_a($term, 'WP_Term') )$data['variation_description'] .='name.'">';返回 $data;}add_action('woocommerce_before_add_to_cart_button', 'custom_product_jquery_script');函数 custom_product_jquery_script() {全球$产品；$taxonomy = vendor_defined_taxonomy();$terms_string = $product->get_attribute($taxonomy);如果(！空($terms_string)):?><script type="text/javascript">jQuery(函数($){var form = 'form.variations_form',selected = 'input[name="variation_id"]',vendorVal = 'input#vendor-hidden',vendorTarget = 'span.vendors',vendorHtml = $(vendorTarget).text(),供应商标签 = '';//在变体选择$(form).on( '模糊', '选择', function() {if($(selected).val() != ''){$(vendorTarget).text("");if($(vendorVal).val() == 'Zlato'){//$(vendorTarget).text(vendorLabel+''+$(vendorVal).val());$(vendorTarget).text(这是你的文字");}}});});<?php万一;}

但是我无法打印Matrijal"产品元部分下的产品属性选择名称值.

产品属性名称为Matrijal"；(和 slug mats") ……例如，术语名称是Zlato"；(和弹头zlato").

有什么帮助吗?

解决方案

你让事情变得更复杂了……

这是一种轻量级且有效的方法，可将特定的选定变体自定义值(来自特定产品属性)添加到单个产品元数据之后的附加 html ''.

您只需要在第一个函数中定义正确的产品属性分类即可.

代码:

//将自定义变体数据添加到变体表单数据中add_filter( 'woocommerce_available_variation', 'add_variation_vendor_value', 10, 3 );函数 add_variation_vendor_value( $data, $product, $variation ) {//这里定义产品变体中使用的目标分类法$taxonomy = 'pa_mats';$term_name = $variation->get_attribute($taxonomy);如果(！空($term_name)){$data['vendor_value'] = $term_name;}返回 $data;}//在产品元数据之后显示可变产品上的空跨度 htmladd_action('woocommerce_product_meta_end', 'display_product_vendors', 10);功能 display_product_vendors() {全球$产品；if ( $product->get_type() === '变量' ) {echo '<span class="posted_in vendor"></span>';}}//填写我们的 html span";具有来自所选变体的特定文本值add_action('woocommerce_after_variations_form', 'custom_product_variation_js');函数 custom_product_variation_js() {?><script type="text/javascript">jQuery(函数($){var $form = $('form.variations_form'),$vendor = $('span.vendors'),text = $vendor.text();$form.on('show_variation', function(event, data){//在选定的变体上如果(data.vendor_value){$vendor.text( data.vendor_value );}}).on('hide_variation', function(){//不在选定的变体上$vendor.text( 文本 );});});<?php}

代码位于活动子主题(或活动主题)的functions.php 文件中.

在具有定义的产品属性(变体)分类法的可变产品上测试并适用于最新的 WooCommerce 版本 (4.9.2).

请记住，产品属性分类法始终以pa_"开头；+ 产品属性.<​​/p>

I have a WooCommerce jewelry site. On single variable product page I have variations and I added a text box (text box is for the customer to write something that will be printed on the jewelry).

So I expect the page to work as follows: If the customer selects a particular product variation and starts typing in the textbox price of the product should change depending on number of letters (NOTE: this should only work if one specific variation is selected) on every other product price will be fixed.

I did manage to do the part for the textbox price update.

The issue I am having here is with the selection of specific product variation.

Based on Display the product attribute term for the selected variation in Woocommerce answer, I tried to solve this problem with the following code attempt:

function vendor_defined_taxonomy() {
    return 'Materijal'; 
}

add_action( 'woocommerce_product_meta_end', 'display_product_vendors', 10 );
function display_product_vendors() {
    $taxonomy = vendor_defined_taxonomy();
    $term_ids = wp_get_post_terms( get_the_ID(), $taxonomy, array('fields' => 
    'ids') );
    if( sizeof($term_ids) > 0 ){ 
        echo '<span class="posted_in vendors"></span>';
    }
}

add_filter( 'woocommerce_available_variation', 'selected_variation_vendor_value', 10, 3 );
function selected_variation_vendor_value( $data, $product, $variation ) {
    $taxonomy = vendor_defined_taxonomy();

    if( isset($data['attributes']['attribute_'.$taxonomy]) )
        $term = get_term_by( 'slug', $data['attributes']['attribute_'.$taxonomy], $taxonomy );

    if( isset($term) && is_a($term, 'WP_Term' ) )
        $data['variation_description'] .= '<input type="hidden" name="vendor- hidden" id="vendor-hidden" value="'.$term->name.'">';

    return $data;
}

add_action('woocommerce_before_add_to_cart_button', 'custom_product_jquery_script');
function custom_product_jquery_script() {
    global $product;

    $taxonomy     = vendor_defined_taxonomy();
    $terms_string = $product->get_attribute($taxonomy);

    if( ! empty($terms_string) ) :
    ?>
    <script type="text/javascript">
    jQuery(function($) {
        var form = 'form.variations_form',       
            selected = 'input[name="variation_id"]',
            vendorVal = 'input#vendor-hidden',
            vendorTarget = 'span.vendors',
            vendorHtml = $(vendorTarget).text(), 
            vendorLabel = '';

        // On variation select
        $(form).on( 'blur', 'select', function() {
            if($(selected).val() != ''){
                $(vendorTarget).text("");
                if($(vendorVal).val() == 'Zlato'){
                    //$(vendorTarget).text(vendorLabel+' 
                    '+$(vendorVal).val());
                    $(vendorTarget).text("here is your text");
                }
            } 
        });
    });
    </script>
    <?php
    endif;
}

But I can't make it work to print the "Matrijal" product attribute selected name value under product meta section.

Product attribute name is "Matrijal" (and slug "mats") … and for example a term name is "Zlato" (and slug "zlato").

Any help?

解决方案

You are making things more complicated that they should be…

Here is a lightweight and effective way to add specific selected variation custom value (from specific product attribute) to an additional html '' after single product meta.

You just need to define the correct product attribute taxonomy in the first function.

The code:

// Add custom variation data to variation form data
add_filter( 'woocommerce_available_variation', 'add_variation_vendor_value', 10, 3 );
function add_variation_vendor_value( $data, $product, $variation ) {
    // Here define the targeted taxonomy used in product variation
    $taxonomy  = 'pa_mats';

    $term_name = $variation->get_attribute($taxonomy);

    if( ! empty($term_name) ) {
        $data['vendor_value'] = $term_name;
    }
    return $data;
}

// Display after product meta an empty span html on variable products 
add_action( 'woocommerce_product_meta_end', 'display_product_vendors', 10 );
function display_product_vendors() {
    global $product;

    if ( $product->get_type() === 'variable' ) {
        echo '<span class="posted_in vendors"></span>';
    }
}

// Fill in our html "span" with specific text value from selected variation
add_action('woocommerce_after_variations_form', 'custom_product_variation_js');
function custom_product_variation_js() {
    ?>
    <script type="text/javascript">
    jQuery(function($) {
        var $form   = $('form.variations_form'),
            $vendor = $('span.vendors'),
            text    = $vendor.text();

        $form.on('show_variation', function(event, data){ // On selected variation
            if ( data.vendor_value ) {
                $vendor.text( data.vendor_value );
            }
        }).on('hide_variation', function(){ // Not on selected variation
            $vendor.text( text );
        });
    });
    </script>
    <?php
}

Code goes in functions.php file of the active child theme (or active theme).

Tested and works on last WooCommerce version (4.9.2) on a variable product with a defined product attribute (for variations) taxonomy.

Remember that product attribute taxonomy always start with "pa_" + product attribute slug.

这篇关于在 WooCommerce 单个产品上动态设置和显示自定义产品变体值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！