Как вывести вариации в табличном виде?

HTML

1 ответ

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

// Вариации таблицей function display_product_variations() {     global $product;         if ( $product-&gt;is_type( 'variable' ) ) {         $variations = $product-&gt;get_available_variations();                 if ( ! empty( $variations ) ) {             $attributes = $product-&gt;get_variation_attributes();             $attribute_keys = array_keys( $attributes );                         echo '&lt;div class="woocommerce-tabs" style="width: var(--default-editor, var(--block-width)); margin: auto"&gt;&lt;div class="panel" id="tab-variations"&gt;&lt;table class="woocommerce-variations-table"&gt;&lt;thead&gt;&lt;tr&gt;';                                    foreach ( $attribute_keys as $attribute_key ) {                 echo '&lt;th&gt;' . wc_attribute_label( $attribute_key ) . '&lt;/th&gt;';             }             echo '&lt;th&gt;Цена&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;';                         foreach ( $variations as $variation ) {                 $variation_id = $variation['variation_id'];                 $variation_obj = new WC_Product_Variation( $variation_id );                                 echo '&lt;tr&gt;';                                 foreach ( $attribute_keys as $attribute_key ) {                     $attribute_value = $variation['attributes'][ 'attribute_' . sanitize_title( $attribute_key ) ];                     echo '&lt;td&gt;' . $attribute_value . '&lt;/td&gt;';                 }                                 echo '&lt;td&gt;' . $variation_obj-&gt;get_price_html() . '&lt;/td&gt;&lt;/tr&gt;';                             }                         echo '&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;/div&gt;';                                 }     } } add_action( 'woocommerce_after_single_product_summary', 'display_product_variations' );

// Вариации таблицей function display_product_variations() { global $product; if ( $product->is_type( 'variable' ) ) { $variations = $product->get_available_variations(); if ( ! empty( $variations ) ) { $attributes = $product->get_variation_attributes(); $attribute_keys = array_keys( $attributes ); echo '<div class="woocommerce-tabs" style="width: var(--default-editor, var(--block-width)); margin: auto"><div class="panel" id="tab-variations"><table class="woocommerce-variations-table"><thead><tr>'; foreach ( $attribute_keys as $attribute_key ) { echo '<th>' . wc_attribute_label( $attribute_key ) . '</th>'; } echo '<th>Цена</th></tr></thead><tbody>'; foreach ( $variations as $variation ) { $variation_id = $variation['variation_id']; $variation_obj = new WC_Product_Variation( $variation_id ); echo '<tr>'; foreach ( $attribute_keys as $attribute_key ) { $attribute_value = $variation['attributes'][ 'attribute_' . sanitize_title( $attribute_key ) ]; echo '<td>' . $attribute_value . '</td>'; } echo '<td>' . $variation_obj->get_price_html() . '</td></tr>'; } echo '</tbody></table></div></div>'; } } } add_action( 'woocommerce_after_single_product_summary', 'display_product_variations' );

Дополнительно:

Открой для себя плагины - увидишь новые горизонты о которых ты даже не мечтал :)

Refguser, причём тут плагины?
Готовых подобных решений нет или они работают не так как надо.

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Мария Код Ответ

Вариации WooCommerce в табличном виде нужно выводить не из сырых ярлыков, а из данных вариаций и атрибутов товара. У вариативного товара есть доступные вариации, у каждой вариации есть массив атрибутов, цена, наличие и ID. Названия атрибутов можно получить через wc_attribute_label(), а значения — через slug термина или обычную строку.

Пример базового вывода после описания товара:

add_action('woocommerce_after_single_product_summary', function () {
    global $product;
 
    if (!$product || !$product-&gt;is_type('variable')) {
        return;
    }
 
    $attributes = $product-&gt;get_variation_attributes();
    $variations = $product-&gt;get_available_variations();
 
    if (!$variations) {
        return;
    }
 
    echo '&lt;table class="variations-table"&gt;&lt;thead&gt;&lt;tr&gt;';
 
    foreach (array_keys($attributes) as $attribute_name) {
        echo '&lt;th&gt;' . esc_html(wc_attribute_label($attribute_name)) . '&lt;/th&gt;';
    }
 
    echo '&lt;th&gt;Цена&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;';
 
    foreach ($variations as $variation_data) {
        $variation = wc_get_product($variation_data['variation_id']);
        echo '&lt;tr&gt;';
 
        foreach (array_keys($attributes) as $attribute_name) {
            $key = 'attribute_' . sanitize_title($attribute_name);
            $value = $variation_data['attributes'][$key] ?? '';
            echo '&lt;td&gt;' . esc_html($value ?: '-') . '&lt;/td&gt;';
        }
 
        echo '&lt;td&gt;' . wp_kses_post($variation-&gt;get_price_html()) . '&lt;/td&gt;';
        echo '&lt;/tr&gt;';
    }
 
    echo '&lt;/tbody&gt;&lt;/table&gt;';
}, 25);

add_action('woocommerce_after_single_product_summary', function () { global $product; if (!$product || !$product->is_type('variable')) { return; } $attributes = $product->get_variation_attributes(); $variations = $product->get_available_variations(); if (!$variations) { return; } echo '<table class="variations-table"><thead><tr>'; foreach (array_keys($attributes) as $attribute_name) { echo '<th>' . esc_html(wc_attribute_label($attribute_name)) . '</th>'; } echo '<th>Цена</th></tr></thead><tbody>'; foreach ($variations as $variation_data) { $variation = wc_get_product($variation_data['variation_id']); echo '<tr>'; foreach (array_keys($attributes) as $attribute_name) { $key = 'attribute_' . sanitize_title($attribute_name); $value = $variation_data['attributes'][$key] ?? ''; echo '<td>' . esc_html($value ?: '-') . '</td>'; } echo '<td>' . wp_kses_post($variation->get_price_html()) . '</td>'; echo '</tr>'; } echo '</tbody></table>'; }, 25);

Если значения атрибутов хранятся как термины, slug можно преобразовать в название через get_term_by(). Также учитывайте вариации “любой размер/любой цвет”: там значение может быть пустым, и его надо показывать понятным текстом.

Для глобальных атрибутов WooCommerce ключи обычно выглядят как attribute_pa_color, а человекочитаемое название термина нужно получать отдельно:

$taxonomy = str_replace('attribute_', '', $key);
$term = get_term_by('slug', $value, $taxonomy);
$label = $term ? $term-&gt;name : $value;

$taxonomy = str_replace('attribute_', '', $key); $term = get_term_by('slug', $value, $taxonomy); $label = $term ? $term->name : $value;

Не забывайте экранировать вывод и не показывать вариации, которых нет в наличии, если это важно для покупателя. Таблицу лучше сделать адаптивной: на мобильном добавить горизонтальную прокрутку или карточный вид. Иначе при большом количестве атрибутов она вылезет за экран.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Figma Баг с переносом слов в Figma? 1 ответ

Как вывести вариации в табличном виде?

Дополнительно:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно