Как создать настройку отображения товара в WooCommerce на WordPress

Введение в кастомизацию отображения товара в WooCommerce

WooCommerce — самый популярный плагин для интернет-магазинов на WordPress. Однако стандартное отображение товара не всегда подходит для конкретных задач и дизайна. В этой статье мы научимся добавлять пользовательские настройки отображения товара, которые помогут сделать страницу продукта более информативной и удобной для покупателей.

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

Добавление пользовательского поля в карточку товара в админке — настройка отображения

Для начала создадим мета-бокс с пользовательской настройкой в админке товара. Это позволит включать или отключать вывод дополнительной информации.

Добавьте следующий код в файл functions.php вашей темы или в плагин:

add_action('add_meta_boxes', 'wpsell_add_custom_product_metabox');
function wpsell_add_custom_product_metabox() {
    add_meta_box(
        'wpsell_custom_display',
        'Настройка отображения товара',
        'wpsell_custom_display_callback',
        'product',
        'side'
    );
}

function wpsell_custom_display_callback($post) {
    wp_nonce_field('wpsell_custom_display_nonce', 'wpsell_custom_display_nonce');
    $value = get_post_meta($post->ID, '_wpsell_show_extra_info', true);
    ?>
    <label for="wpsell_show_extra_info">Показать дополнительную информацию</label><br>
    <input type="checkbox" id="wpsell_show_extra_info" name="wpsell_show_extra_info" value="yes" <?php checked($value, 'yes'); ?> />
    <?php
}

add_action('save_post', 'wpsell_save_custom_product_meta');
function wpsell_save_custom_product_meta($post_id) {
    if (!isset($_POST['wpsell_custom_display_nonce']) || !wp_verify_nonce($_POST['wpsell_custom_display_nonce'], 'wpsell_custom_display_nonce')) {
        return;
    }
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }
    if (isset($_POST['wpsell_show_extra_info'])) {
        update_post_meta($post_id, '_wpsell_show_extra_info', 'yes');
    } else {
        delete_post_meta($post_id, '_wpsell_show_extra_info');
    }
}

Что мы сделали:

• Добавили мета-бокс в редактор товара с чекбоксом.
• Сохраняем значение чекбокса в метаполе _wpsell_show_extra_info.

Вывод дополнительного блока с информацией на странице товара

Теперь нужно вывести дополнительный блок на фронтенде, если в настройках товара включена эта опция. Для этого используем хук WooCommerce woocommerce_single_product_summary, который отвечает за контент на странице товара.

Добавьте следующий код:

add_action('woocommerce_single_product_summary', 'wpsell_show_extra_info_block', 25);
function wpsell_show_extra_info_block() {
    global $product;
    $show = get_post_meta($product->get_id(), '_wpsell_show_extra_info', true);
    if ($show === 'yes') {
        echo '<div class="wpsell-extra-info" style="margin-top:20px;padding:10px;background:#f0f8ff;border:1px solid #cce;">';
        echo '<h3>Дополнительная информация</h3>';
        echo '<p>Здесь вы можете добавить любые данные о товаре, которые помогут покупателям принять решение.</p>';
        echo '</div>';
    }
}

Объяснение:

• Функция wpsell_show_extra_info_block проверяет, установлена ли галочка в метаполе.
• Если да, то выводит блок с дополнительной информацией после стандартного описания товара.

Дополнительные возможности: добавление текстового поля для произвольной информации

Чекбокс — это только начало. Чтобы дать больше гибкости, можно добавить текстовое поле, куда администратор сможет вписать любую информацию.

Изменим мета-бокс так, чтобы он содержал текстовое поле:

function wpsell_custom_display_callback($post) {
    wp_nonce_field('wpsell_custom_display_nonce', 'wpsell_custom_display_nonce');
    $show = get_post_meta($post->ID, '_wpsell_show_extra_info', true);
    $text = get_post_meta($post->ID, '_wpsell_extra_info_text', true);
    ?>
    <label for="wpsell_show_extra_info">Показать дополнительную информацию</label><br>
    <input type="checkbox" id="wpsell_show_extra_info" name="wpsell_show_extra_info" value="yes" <?php checked($show, 'yes'); ?> />
    <br><br>
    <label for="wpsell_extra_info_text">Текст дополнительной информации</label><br>
    <textarea id="wpsell_extra_info_text" name="wpsell_extra_info_text" rows="5" style="width:100%;"><?php echo esc_textarea($text); ?></textarea>
    <?php
}

function wpsell_save_custom_product_meta($post_id) {
    if (!isset($_POST['wpsell_custom_display_nonce']) || !wp_verify_nonce($_POST['wpsell_custom_display_nonce'], 'wpsell_custom_display_nonce')) {
        return;
    }
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }
    if (isset($_POST['wpsell_show_extra_info'])) {
        update_post_meta($post_id, '_wpsell_show_extra_info', 'yes');
    } else {
        delete_post_meta($post_id, '_wpsell_show_extra_info');
    }
    if (isset($_POST['wpsell_extra_info_text'])) {
        update_post_meta($post_id, '_wpsell_extra_info_text', sanitize_textarea_field($_POST['wpsell_extra_info_text']));
    } else {
        delete_post_meta($post_id, '_wpsell_extra_info_text');
    }
}

Изменим вывод на фронтенде:

function wpsell_show_extra_info_block() {
    global $product;
    $show = get_post_meta($product->get_id(), '_wpsell_show_extra_info', true);
    $text = get_post_meta($product->get_id(), '_wpsell_extra_info_text', true);
    if ($show === 'yes' && !empty($text)) {
        echo '<div class="wpsell-extra-info" style="margin-top:20px;padding:10px;background:#f0f8ff;border:1px solid #cce;">';
        echo '<h3>Дополнительная информация</h3>';
        echo wpautop(esc_html($text));
        echo '</div>';
    }
}

Использование плагинов для кастомизации отображения товаров

Если вы не хотите писать код самостоятельно, можно использовать плагины, которые расширяют возможности WooCommerce без программирования.

Вот несколько полезных плагинов:

• Advanced Custom Fields (ACF) — позволяет создавать любые пользовательские поля и легко выводить их на сайте с помощью шаблонов.
• WooCommerce Customizer — добавляет простые настройки для изменения текста, кнопок и элементов оформления.
• WooCommerce Product Add-Ons — добавляет дополнительные опции и поля для товаров, удобен для настройки сложных вариантов продукта.

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

Оптимизация и безопасность при работе с пользовательскими полями

При добавлении пользовательских данных важно не забывать об оптимизации и безопасности:

• Используйте wp_nonce_field и проверяйте nonce при сохранении данных, чтобы защититься от CSRF-атак.
• Сохраняйте и выводите данные с использованием функций sanitize_textarea_field, esc_html и других для предотвращения XSS-уязвимостей.
• Не перегружайте страницу лишними запросами — используйте get_post_meta с кешированием.
• Тестируйте работу на разных устройствах и с разными темами, чтобы избежать конфликтов.

Соблюдение этих правил позволит сделать ваш магазин безопасным и удобным для пользователей.