在WooCommerce变量产品单页中获取所选的产品变体ID [英] Get the selected product variation ID in WooCommerce variable products single pages
问题描述
对于我的Woocommerce变量产品，我在单个产品页面上实现自定义尺寸选择器，并在表格中显示这些尺寸：
这些变化只是： 30B 30C 30D 而不是分成： 30 和 B C D
我是什么试图弄明白的是：如何获取每个产品变体的运费等级？
我在购物车页面上有类似内容，但我不知道变体ID是什么或者如何从单个产品页面获取它：
$ product_id =（0！= $ cart_item ['variation_id']） ？ $ cart_item ['variation_id']：$ cart_item ['product_id'];
//需要上面的变体ID才能完成剩下的工作：
$ product_shipping_classes = get_the_terms（$ product_id，'product_shipping_class'）;
$ product_shipping_class_name =（$ product_shipping_classes&&！is_wp_error（$ product_shipping_classes））？ current（$ product_shipping_classes） - > name：'';
我知道如果我有变体ID，该怎么做。我只是无法弄清楚如何得到它以便做其余的事情。我需要得到的唯一东西是产品ID和变体的slug（这个页面上还有一个颜色属性）。
但是我已经为该产品提供了一个默认变体（因此设置了隐藏的 variation_id ）。
也许需要首先获取所选颜色的ID然后获取其他颜色的变化ID？
这样做的方法是使用JavaScript / jQuery来获取它。由于您没有为此单一产品页面提供有关您的可变产品的任何相关代码，因此我无法为您提供完全符合您需求的实际工作代码。
在变量产品的单个产品页面上获取所选变体ID（在此示例中，我将动态显示所选变体ID，添加到购物车按钮）：
add_action（'woocommerce_single_product_summary'，'single_product_variable_customization'，3,0）;
function single_product_variable_customization（）{
global $ product;
//仅适用于单品页面上的可变产品
if（$ product-> is_type（'variable'）&& is_product（））{
## ==> ==>这里是你的PHP代码（如果需要）==> ==> ##
//将变量传递给javascript
$ string1 =所选的变体ID为：;
$ string2 =未选择变体ID;
？>
< script>
jQuery（document）.ready（function（$）{
//初始化
var myText1 ='<？php echo $ string1;？>'，myText2 = '<？php echo $ string2;？>';
//获取并显示添加到购物车按钮后的默认变体ID（初始化）
if（''！ = $（'input.variation_id'）。val（））
$（'div.woocommerce-variation-add-to-cart'）。after（'< div class =selected-variation-id >'+ myText1 + $（'input.variation_id'）。val（）+'< / div>'）;
else
$（'div.woocommerce-variation-add-to-cart '）。after（'< div class =selected-variation-id>'+ myText2 +'< / div>'）; //未选择ID
console.log（$ （'input.variation_id'）。val（））; //在浏览器控制台中输出
//在添加到购物车按钮$ b后获取并显示所选的变体ID $ b $（'select'）。blur（function（）{
if（''！= $（' input.variation_id'）。val（））
$（'div.selected-variation-id'）。html（myText1 + $（'input.variation_id'）。val（））;
else
$（'div.selected-variation-id'）。html（myText2）; //未选择ID
console.log（$（'input.variation_id'）。val（））; //在浏览器控制台中输出
}）;
}）;
< / script>
<？php
}
}
代码放在活动子主题（或主题）的function.php文件中或任何插件文件中。
此代码在WooCommerce 3+下测试并且可以工作。
所以在这个基础上你可以自己设定一个符合你要求的功能（因为你不再提供必要的细节或者代码）。
一些相关的答案示例用法（使用jQuery和Woocommerce单个产品页面）：
- 重命名为WooCommerce 3中的缺货产品添加到购物车按钮
- 用所选变量替换可变产品价格WooCommerce中的价格3
- 可变产品选择器：获取实时选定值
- 将所选产品变体数据传递到Contact Form 7查询表格
For my Woocommerce variable products I'm implementing a custom size chooser on the single product page and have this sizes in a table:
These variations are just: 30B 30C 30D rather than being split in to: 30 and B C D
What I am trying to figure out is: How to grab the shipping class for each product variations?
I have something similar on cart page but I don't know what is the variation ID or how to get it from the single product page:
$product_id = ( 0 != $cart_item['variation_id'] ) ? $cart_item['variation_id'] : $cart_item['product_id'];
// need the variation id for the above to be able to do the rest:
$product_shipping_classes = get_the_terms( $product_id, 'product_shipping_class' );
$product_shipping_class_name = ( $product_shipping_classes && ! is_wp_error( $product_shipping_classes ) ) ? current( $product_shipping_classes )->name : '';
I know how to do it once I have the variation ID. I just can't figure out how to get it in order to do the rest. The only things that I need to get for it, are the product id and the slug for the variations (there is also a color attribute on this page).
However I have given to the product a default variation to use (so the hidden variation_id is set).
Perhaps that needs to be fetched first to know the id of the selected color to then fetch the variation ids for the others?
In WooCommerce product single pages for variable products, you can't get the selected product variation in PHP as it's a live event (client side, not server side).
The way to do it is using JavaScript/jQuery to get it. As you don't provide any related code for this single product page regarding your variable products, is not possible for me to give you a real working code that will completely match your needs.
Get the selected variation ID on single product page for variable product (In this example I display the selected variation ID dynamically below add to cart button):
add_action( 'woocommerce_single_product_summary', 'single_product_variable_customization', 3, 0 );
function single_product_variable_customization() {
global $product;
// Only for variable products on single product pages
if ( $product->is_type('variable') && is_product() ) {
## ==> ==> Here goes your php code (if needed) ==> ==> ##
// Passing a variable to javascript
$string1 = "The selected Variation ID is: ";
$string2 = "No Variation ID is selected ";
?>
<script>
jQuery(document).ready(function($) {
// Initializing
var myText1 = '<?php echo $string1; ?>', myText2 = '<?php echo $string2; ?>';
// Get and display the default variation ID after add-to-cart button (initialization)
if( '' != $('input.variation_id').val() )
$('div.woocommerce-variation-add-to-cart').after('<div class="selected-variation-id">'+myText1+$('input.variation_id').val()+'</div>');
else
$('div.woocommerce-variation-add-to-cart').after('<div class="selected-variation-id">'+myText2+'</div>'); // No ID selected
console.log($('input.variation_id').val()); // Output in the browser console
// Get and display the chosen variation ID after add-to-cart button
$('select').blur( function(){
if( '' != $('input.variation_id').val() )
$('div.selected-variation-id').html(myText1+$('input.variation_id').val());
else
$('div.selected-variation-id').html(myText2); // No ID selected
console.log($('input.variation_id').val()); // Output in the browser console
});
});
</script>
<?php
}
}
Code goes in function.php file of your active child theme (or theme) or also in any plugin file.
This code is tested under WooCommerce 3+ and works.
So on this base you can make your own function to match your requirements (as you don't give anymore necessary details or code).
Some related answers examples usage (with jQuery and Woocommerce single product pages):
- Rename Add to Cart buttons for Out Of Stock Products in WooCommerce 3
- Replace Variable Product Price by the chosen variation price in WooCommerce 3
- Variable product selectors: Getting the live selected values
- Pass the chosen product variations data into Contact Form 7 enquiry form
这篇关于在WooCommerce变量产品单页中获取所选的产品变体ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
