Как можно исправить неправильное отображение поля в карточке товара?

Как я могу изменить свой код, чтобы вывести описание выбранной вариации на карточке товара? У меня есть два варианта кода, один выводит описание всех вариаций, а второй должен выводить описание только выбранной вариации, но он не работает. Вот код, который выводит описание всех вариаций:

```php
function test() {
  global $product;
  if ($product->is_type('variable')) {
    $variations = $product->get_available_variations();
    foreach ($variations as $variation) {
      if (isset($variation['variation_description'])) {
        echo $variation['variation_description'];
      }
    }
  }
}

add_action('woocommerce_after_shop_loop_item', 'test');
```

А вот код, который должен выводить описание выбранной вариации, но не работает на карточке товара:

```php
function test() {
  global $product;
  if ($product->is_type('variable')) {
    $current_variation_id = $product->get_variation_id();
    $variations = $product->get_available_variations();
    foreach ($variations as $variation) {
      if ($current_variation_id === $variation['variation_id']) {
        if (isset($variation['variation_description'])) {
          echo $variation['variation_description'];
        }
        break;
      }
    }
  }
}

add_action('woocommerce_before_single_product', 'test', 10);
```
Изображение к вопросу
  • 23 января 2024 г. 8:59
Ответы на вопрос 2
Чтобы исправить отображение описания только выбранной вариации на карточке товара, вам придется использовать немного другой подход, так как описание выбранной вариации должно обновляться динамически в зависимости от выбора пользователя.

Проблема в том, что `$product->get_variation_id()` не возвращает ID выбранной вариации до тех пор, пока не будет совершено действие, например, добавление товара в корзину. При просмотре страницы товара нет "выбранной" вариации, вместо этого есть возможность выбора вариаций пользователями.

Вам необходимо использовать JavaScript (или jQuery) для отслеживания изменений выбранных вариантов в вариативном продукте и AJAX для получения и отображения описания для выбранной вариации.

Сначала зарегистрируйте и добавьте на страницу скрипт для обработки событий изменения вариации:

```php
function theme_enqueue_assets() {
    wp_enqueue_script('my_custom_script', get_template_directory_uri() . '/js/custom_script.js', array('jquery'), '1.0.0', true);
    wp_localize_script('my_custom_script', 'ajax_var', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}
add_action('wp_enqueue_scripts', 'theme_enqueue_assets');

function load_variation_description() {
    $variation_id = isset($_POST['variation_id']) ? intval($_POST['variation_id']) : 0;
    if ($variation_id) {
        $variation = new WC_Product_Variation($variation_id);
        $variation_description = $variation->get_description();
        echo wp_kses_post($variation_description);
    }
    wp_die();
}
add_action('wp_ajax_load_variation_description', 'load_variation_description');
add_action('wp_ajax_nopriv_load_variation_description', 'load_variation_description');
```

Создайте JavaScript файл с именем `custom_script.js` в вашей теме (или дочерней теме) в каталоге js и добавьте в него такой код:

```javascript
jQuery(document).ready(function($) {
    $('.variations_form').on('found_variation', function(event, variation) {
        if (variation.variation_id) {
            $.ajax({
                url: ajax_var.ajax_url,
                type: 'POST',
                data: {
                    action: 'load_variation_description',
                    variation_id: variation.variation_id
                },
                success: function(result) {
                    $('#variation-description').html(result);
                }
            });
        }
    }).on('reset_data', function() {
        $('#variation-description').html('');
    });
});
```

Не забудьте, что вам нужно создать элемент с ID `#variation-description` на вашей странице, где должно отображаться описание вариации:

```html
<div id="variation-description"></div>
```

Добавьте этот элемент в шаблон карточки товара, используя соответствующее место для хуков или переопределяя шаблон в теме.

Теперь, когда пользователь выбирает вариацию, описание для этой вариации будет загружено и отображено в элементе `#variation-description`. Сценарий обрабатывает события выбора вариации и очищает описание, если выбор сбрасывается.
У меня для Вас плохие новости, проблема в том, что карточка товара явно не была рассчитана на добавление дополнительных элементов в виде информации о вариации товаров (особенно радует абсолютное позиционирование у некоторых элементов там, где ожидаешь увидеть блочную верстку). У меня получилось их отобразить, но это выглядит крайне не красиво: 
Похожие вопросы