Как добавить элементы в карточку товара WooCommerce: хуки, поля и плагины

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

1. Стандартная структура карточки товара

Карточка товара в WooCommerce по умолчанию включает следующие элементы:

Название товара.
Галерея изображений товара.
Цена товара.
Краткое описание товара.
Кнопка "Добавить в корзину".
Описание и вкладки с дополнительной информацией (например, описание, характеристики, отзывы).
Связанные товары.

Вы можете изменить, удалить или добавить новые элементы в карточку товара с помощью кастомного кода или плагинов.

2. Добавление пользовательских элементов с помощью хуков

WooCommerce предоставляет большое количество хуков (actions и filters), которые можно использовать для добавления или удаления элементов на странице товара.

Пример: Добавление пользовательского текста после кнопки "Добавить в корзину"

Вы можете добавить текст или элемент после кнопки "Добавить в корзину", используя хук woocommerce_after_add_to_cart_button.

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

add_action( 'woocommerce_after_add_to_cart_button', 'custom_message_after_add_to_cart' );

function custom_message_after_add_to_cart() {
  echo '<p class="custom-message">Бесплатная доставка при заказе от 5000 рублей!</p>';
}

Этот код добавит сообщение под кнопкой "Добавить в корзину".

Пример: Добавление информации о доставке под ценой товара

Если вы хотите добавить текст или информацию под ценой товара, используйте хук woocommerce_single_product_summary с приоритетом. Например, приоритет 15 > это место сразу после цены:

add_action( 'woocommerce_single_product_summary', 'custom_shipping_info_under_price', 15 );

function custom_shipping_info_under_price() {
  echo '<p class="shipping-info">Доставка по всей России за 2-3 дня</p>';
}

3. Добавление пользовательских вкладок на страницу товара

Вы можете добавить свои пользовательские вкладки на страницу товара с помощью хуков. WooCommerce использует вкладки для отображения описания, характеристик и отзывов. Для добавления своей вкладки можно использовать фильтр woocommerce_product_tabs.

Пример: Добавление вкладки с дополнительной информацией

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

add_filter( 'woocommerce_product_tabs', 'custom_product_tab' );

function custom_product_tab( $tabs ) {
  // Добавляем новую вкладку
  $tabs['custom_tab'] = array(
    'title' => __( 'Дополнительно', 'woocommerce' ),
    'priority' => 50, // Порядок отображения
    'callback' => 'custom_product_tab_content'
  );
  return $tabs;
}

function custom_product_tab_content() {
  echo '<h2>Дополнительная информация</h2>';
  echo '<p>Здесь можно добавить любую информацию о товаре, например, условия возврата или гарантию.</p>';
}

Этот код добавляет новую вкладку "Дополнительно" с пользовательским контентом на страницу товара.

4. Добавление пользовательских полей (метаполей) для товара

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

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

1. Добавляем пользовательское поле на страницу редактирования товара:

add_action( 'woocommerce_product_options_general_product_data', 'custom_product_field' );

function custom_product_field() {
  woocommerce_wp_text_input( array(
    'id' => 'custom_text_field',
    'label' => __( 'Номер партии', 'woocommerce' ),
    'placeholder' => 'Введите номер партии',
    'desc_tip' => 'true',
    'description' => __( 'Введите номер партии товара.', 'woocommerce' ),
  ));
}

2. Сохранение данных пользовательского поля:

add_action( 'woocommerce_process_product_meta', 'save_custom_product_field' );

function save_custom_product_field( $post_id ) {
  $custom_field_value = isset( $_POST['custom_text_field'] ) ? sanitize_text_field( $_POST['custom_text_field'] ) : '';
  update_post_meta( $post_id, 'custom_text_field', $custom_field_value );
}

3. Вывод пользовательского поля на странице товара:

add_action( 'woocommerce_single_product_summary', 'display_custom_product_field', 20 );

function display_custom_product_field() {
  global $post;
  $custom_field_value = get_post_meta( $post->ID, 'custom_text_field', true );
  if ( ! empty( $custom_field_value ) ) {
    echo '<p class="custom-product-field">Номер партии: ' . esc_html( $custom_field_value ) . '</p>';
  }
}

Этот код добавляет поле "Номер партии" на страницу редактирования товара в админке и выводит его на страницу товара.

5. Плагины для добавления элементов в карточку товара

Если вы не хотите использовать кастомный код, существуют плагины, которые позволяют легко добавлять элементы в карточку товара:

5.1 WooCommerce Custom Product Addons (бесплатный и платный)

Этот плагин позволяет добавлять дополнительные опции и поля на страницу товара, такие как текстовые поля, выпадающие списки, чекбоксы и загрузку файлов.

? Добавление полей для персонализации товаров.
? Легкая настройка через интерфейс.
? Поддержка нескольких типов полей (текстовые, числовые, чекбоксы).

5.2 YITH WooCommerce Product Add-ons (бесплатный и платный)

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

? Добавление дополнительных опций к товарам.
? Создание вариативных полей.
? Простой интерфейс для управления.

5.3 WooCommerce Tab Manager (платный)

Этот плагин позволяет легко добавлять и управлять вкладками на странице товара. Вы можете добавлять текстовые вкладки, видео, изображения и другие элементы.

? Добавление неограниченного числа вкладок.
? Управление стандартными и кастомными вкладками.
? Настройка вкладок для отдельных товаров или всех товаров в магазине.

6. Стилизация элементов карточки товара

Чтобы изменить внешний вид элементов, добавленных в карточку товара, вы можете использовать CSS. Например, можно изменить цвет текста, размеры элементов или их расположение.

Пример CSS для стилизации:

.custom-message {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 10px;
  font-size: 14px;
  margin-top: 15px;
  color: #333;
}

.shipping-info {
  color: #e74c3c;
  font-weight: bold;
}

.custom-product-field {
  font-size: 16px;
  color: #0073aa;
  margin-top: 10px;
}

Добавление пользовательских элементов в карточку товара WooCommerce позволяет вам персонализировать страницы продуктов и улучшить взаимодействие с покупателями. Вы можете использовать хуки для добавления элементов, такие как текст, дополнительные поля или вкладки. Если вы не хотите писать код, плагины, такие как WooCommerce Custom Product Addons или WooCommerce Tab Manager, могут помочь вам легко добавить необходимые функции.

Добавить в карточку товара WooCommerce