問題描述
在 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 hiddenvariation IDvalue 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模板網！