Как вывести атрибуты выбранной вариации Woocommerce?

Question

[dimitriylutsenko]

Здравствуйте.

У меня есть необходимость заполнить таблицу "Характеристики" или "Детали" на странице товара Woocommerce.
Основной проблемой является то, что я не могу вывести значения атрибутов выбранной вариации товара.
В данной таблице просто перечисляются все атрибуты, участвующие в вариативности.

Есть в интернете масса инструкций, как кастомизировать хук ‘woocommerce_available_variation’ чтобы выводилось значение полей выбранной вариации над кнопкой «Корзина» с ценой.
Но это решением я назвать не могу. Так как атрибутов у меня может быть 5-10 (И они могут быть совершенно с разными значениями, что нельзя прописать в основном товаре в Описании)


Так как можно реализовать возможность вывода значений параметров выбранной вариации?

Answer 1

[dimitriylutsenko]

Эх, как всегда, нашел решение сам...

Я не знаю, почему на этом вукоммерс не реализовали необходимый функционал по выводу характеристик выбранной вариации в таблице, без костылей и синей изоленты никуда...

Инструкция (Я разработал минимально рабочий код, оставляю на Ваше усмотрение оптимизацию кода.).

Инструкция по внедрению в таблицу Детали значения выбранной вариации

1. В файле \wp-content\themes\{Ваша тема}\inc\woocommerce.php ищете

   <input type="hidden" name="variation_id" value="0" />

   и дописываете ему id="variation_id".
   Это необходимо для отслеживания изменения данного поля с id выбранной вариации.
   
   
2. Идем в файл \wp-content\themes\{Ваша_тема}\woocommerce\single-product\add-to-cart\variation.php
   Инициализируем Все необходимые поля. И скрываем в публичной части сайта. {У меня есть свои кастомные поля, можете посмотреть, как их добавлять в админке, ищите по ключевым словам "woocommerce_wp_text_input" "load_variation_settings_fields" }
   
   variation.php

   
   

   <script type="text/template" id="tmpl-variation-template">
   <div class="woocommerce-variation-description" style="display:none;">
   {{{ data.variation.variation_description }}}
   </div>
   <div class="woocommerce-sleep_place-description" style="display:none;">
   {{{ data.variation.sleep_place }}}
   </div>
   <div class="woocommerce-volume-description" style="display:none;">
   {{{ data.variation.volume }}}
   </div>
   <div class="woocommerce-volume-description" style="display:none;">
   {{{ data.variation.cloth_type }}}
   </div>
   <div class="woocommerce-variation-availability" style="display:none;">
   {{{ data.variation.availability_html }}}
   </div>
   <div class="woocommerce-open_size-availability" style="display:none;">
   {{{ data.variation.open_size }}}
   </div>
   <div class="woocommerce-max_load-availability" style="display:none;">
   {{{ data.variation.max_load }}}
   </div>
   <div class="woocommerce-carcas_material-availability" style="display:none;">
   {{{ data.variation.carcas_material }}}
   </div>
   <div class="woocommerce-prod_time-availability" style="display:none;">
   {{{ data.variation.prod_time }}}
   </div>
   <div class="woocommerce-garantee-availability" style="display:none;">
   {{{ data.variation.garantee }}}
   </div>
   <div class="woocommerce-variation-price">
   {{{ data.variation.price_html }}}
   </div>
   </script>

   
   
   
   
   
   
3. В functions.php Вашей активной темы прописываете JS, где производится сбор скрытых ранее полей атрибутов, очищение таблицы "Детали" и формирование новой
   
   Код в functions.php

   
   

   add_action( 'wp_footer', 'variations_change_javascript', 99999 ); // для фронта
   function variations_change_javascript() { ?>
   <script>
   function empty( mixed_var ) {	// Determine whether a variable is empty
   	return ( mixed_var === "" || mixed_var === 0   || mixed_var === "0" || mixed_var === null  
   			|| mixed_var === false  ||  ( Array.isArray(mixed_var) && mixed_var.length === 0 ) );
   }
   
   jQuery(document).ready(function($) {
   	
   	var attributes = new Map(); 
   	
   	jQuery("#variation_id").bind("change", function() {
         // console.log("ID: " + jQuery(this).val()); 
   	   
   	   if($(".sku").text().length > 0) {
   		    attributes.set('Артикул',$(".sku").text()+"");
   	   }
   	   if ($(".woocommerce-sleep_place-description").text().length > 0) {
   		   attributes.set('Спальное место, мм',$(".woocommerce-sleep_place-description").text()+"");
   	   }
   	   if ($(".woocommerce-volume-description").text().length > 0) {
   		   attributes.set('Объем, кб. м',$(".woocommerce-volume-description").text()+"");
   	   }
   	   if ($(".woocommerce-open_size-availability").text().length > 0) {
   		   attributes.set('Габариты в разложенном виде, мм',$(".woocommerce-open_size-availability").text()+"");
   	   }
   	   if ($(".woocommerce-max_load-availability").text().length > 0) {
   		   attributes.set('Максимальная нагрузка, кг',$(".woocommerce-max_load-availability").text()+"");
   	   }
   	   if ($(".woocommerce-carcas_material-availability").text().length > 0) {
   		   attributes.set('Материалы каркаса',$(".woocommerce-carcas_material-availability").text()+"");
   	   }
   	   if ($(".woocommerce-prod_time-availability").text().length > 0) {
   		   attributes.set('Сроки изготовления',$(".woocommerce-prod_time-availability").text()+"");
   	   }
   	   if ($(".woocommerce-garantee-availability").text().length > 0) {
   		   attributes.set('Гарантия изготовителя',$(".woocommerce-garantee-availability").text()+"");
   	   }
   	  
   		jQuery(".options-product tbody").empty();
   		var fields="";
   		
   		if (attributes.size > 0) {
   			
   			attributes.forEach(function(value, key) {
   				
   				if(value.length > 0){
   					fields+='<tr>';
   					fields+='<th class="product-attributes-item__label">'+key+'</th>';
   					fields+='<td class="product-attributes-item__value">'+value+'</td>';
   					fields+='</tr>';
   					jQuery(".options-product tbody").append(fields);
   					fields = "";
   				}
   			});
   		
   		}
   	  
   	}); 
   	
   	
    });
   		</script>	
   <?}

   
   
   
   
   
   
4. Получаете то, что нужно. Код можно доработать, чем я и занимаюсь