Як додати іконки до товарів у WooCommerce без плагінів (код для функційної гнучкості)

Шукаєте спосіб додати іконки з коротким текстом до товарів у WooCommerce без встановлення зайвих плагінів? Лови готове рішення на чистому коді! 👇

Ось робочий PHP-код, який додає мета-бокс для іконок у редакторі товару та автоматично відображає їх у товарних картках WooCommerce:

// Додаємо мета-бокс для іконок та тексту
function add_icons_meta_box() {
    add_meta_box('product_icons', 'Product Icons', 'render_icons_meta_box', 'product', 'side', 'default');
}
add_action('add_meta_boxes', 'add_icons_meta_box');

// Відображення полів у редакторі товару
function render_icons_meta_box($post) {
    for ($i = 1; $i <= 3; $i++) {
        $icon = get_post_meta($post->ID, "_icon$i", true);
        $text = get_post_meta($post->ID, "_text$i", true);
        echo "<p><strong>Icon $i URL:</strong></p>
              <input type='text' name='icon$i' value='" . esc_attr($icon) . "' style='width:100%;'/>
              <p><strong>Text $i:</strong></p>
              <input type='text' name='text$i' value='" . esc_attr($text) . "' style='width:100%;'/>";
    }
}

// Збереження мета-даних
function save_icons_meta_box($post_id) {
    for ($i = 1; $i <= 3; $i++) {
        if (isset($_POST["icon$i"])) {
            update_post_meta($post_id, "_icon$i", $_POST["icon$i"]);
        }
        if (isset($_POST["text$i"])) {
            update_post_meta($post_id, "_text$i", $_POST["text$i"]);
        }
    }
}
add_action('save_post', 'save_icons_meta_box');

// Виведення іконок у товарній картці каталогу
add_action('woocommerce_after_shop_loop_item', 'add_icons_to_product_card', 15);
function add_icons_to_product_card() {
    global $post;
    echo '<div class="product-icons">';
    for ($i = 1; $i <= 3; $i++) {
        $icon = get_post_meta($post->ID, "_icon$i", true);
        $text = get_post_meta($post->ID, "_text$i", true);
        if ($icon) {
            echo "<div class='icon-column'><img src='" . esc_url($icon) . "' alt='Icon $i' />";
            if ($text) echo "<span>" . esc_html($text) . "</span>";
            echo "</div>";
        }
    }
    echo '</div>';
}

// Приховуємо іконки на сторінці одного товару
add_action('wp_footer', 'hide_icons_on_single_product_page', 100);
function hide_icons_on_single_product_page() {
    if (is_product()) :
        echo "<style>.product-icons { display: none; }</style>";
    endif;
}

Що робить цей код?

• Додає до кожного продукту 3 іконки з підписами, які ви можете налаштувати прямо в адмінці товару 🛒.

• Виводить ці іконки у каталозі товарів (shop page) — там, де вони реально продають.

• Приховує іконки на сторінці одного товару, щоб уникнути дублювання.

Які переваги цього рішення?

✅ Без плагінів — швидше завантаження сайту, менше ризиків конфліктів.
✅ Гнучкість — ви можете додати не тільки іконки, а й будь-який додатковий текст чи навіть рейтинг.
✅ СЕО-дружнє рішення — покращує UX (юзерський досвід), що впливає на поведінкові фактори й ранжування 🏆.
✅ Легко кастомізується — хочеш 5 іконок? Просто змінюй цифри в циклі!

Навіщо це використовувати?

Такі іконки чудово підвищують довіру до товарів: можна показати переваги (безкоштовна доставка, гарантія, екопродукт), не перевантажуючи опис. А ще це виглядає сучасно і красиво 💪