Карточка товара в WooCommerce

Карточка товара в WooCommerce — это страница, на которой пользователи могут увидеть все детали и характеристики конкретного товара. WooCommerce автоматически создает страницу карточки товара для каждого добавленного товара, включая его изображение, описание, цену, наличие на складе, а также кнопку «Добавить в корзину».

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

1. Основные элементы карточки товара

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

2. Настройка элементов карточки товара

Чтобы изменить содержимое карточки товара (например, описание, цену или изображения), выполните следующие шаги:

1. Перейдите в «Товары» > «Все товары».
2. Найдите товар, который хотите изменить, и нажмите «Редактировать».
3. На странице редактирования товара можно изменить следующие элементы:
   • Название: Введите новое название товара.
   • Описание: В поле для основного описания введите или отредактируйте описание товара.
   • Краткое описание: В нижней части страницы отредактируйте краткое описание.
   • Изображение товара: Загрузите или измените основное изображение и изображения в галерее товара.
   • Цена: В разделе данных товара можно изменить цену (регулярную и цену распродажи).
   • Атрибуты и вариации: В разделе данных товара можно настроить атрибуты и варианты для товара (например, различные цвета и размеры).

3. Кастомизация карточки товара с помощью CSS

Для изменения внешнего вида карточки товара можно использовать кастомные стили CSS. Например, вы можете изменить размер шрифта, цвет кнопки или отступы между элементами.

Пример CSS для изменения стиля карточки товара:

/* Изменение стиля названия товара */
.woocommerce div.product .product_title {
  font-size: 28px;
  color: #333;
  text-transform: uppercase;
}

/* Стилизация цены */
.woocommerce div.product p.price {
  font-size: 24px;
  color: #ff6600;
}

/* Стилизация кнопки "Добавить в корзину" */
.woocommerce div.product form.cart .button {
  background-color: #0073aa;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  text-transform: uppercase;
}

.woocommerce div.product form.cart .button:hover {
  background-color: #005a8c;
}

/* Изменение стиля описания товара */
.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 16px;
  color: #666;
  margin-bottom: 20px;
}

Добавьте этот CSS-код в «Внешний вид» > «Настроить» > «Дополнительные стили CSS», чтобы стилизовать карточку товара.

4. Кастомизация карточки товара с помощью хуков

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

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

add_action( 'woocommerce_after_add_to_cart_button', 'custom_message_after_add_to_cart_button' );

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

Добавьте этот код в файл functions.php вашей темы, чтобы выводить сообщение под кнопкой «Добавить в корзину».

Пример удаления вкладок с описанием товара:

Чтобы удалить вкладки Описание и Отзывы, можно использовать следующий код:

// Удаляем вкладку описания
add_filter( 'woocommerce_product_tabs', 'remove_description_tab', 98 );
function remove_description_tab($tabs) {
  unset($tabs['description']); // Удаляем описание
  return $tabs;
}

// Удаляем вкладку с отзывами
add_filter( 'woocommerce_product_tabs', 'remove_reviews_tab', 98 );
function remove_reviews_tab($tabs) {
  unset($tabs['reviews']); // Удаляем отзывы
  return $tabs;
}

Этот код уберет вкладки с описанием и отзывами на странице карточки товара.

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

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

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

1. WooCommerce Product Add-Ons:
   • Позволяет добавлять дополнительные опции к товарам, такие как поля ввода текста, выпадающие списки и чекбоксы.
2. WooCommerce Customizer:
   • Позволяет изменять текст кнопок, размер изображений, вкладки продукта и другие элементы карточки товара через интерфейс, без написания кода.
3. Elementor Pro:
   • Позволяет создавать кастомные макеты карточек товаров с помощью конструктора страниц Elementor. С помощью виджетов WooCommerce можно добавить и настроить различные элементы товара.

6. Добавление дополнительных полей в карточку товара

Вы можете добавить дополнительные поля для товара (например, поле для ввода текста или выбора варианта) с помощью плагинов или кастомного кода.

Способ 1: Использование плагина WooCommerce Product Add-Ons

1. Установите и активируйте плагин WooCommerce Product Add-Ons.
2. Перейдите в «Товары» > «Все товары» и выберите товар, для которого хотите добавить дополнительные поля.
3. В разделе «Данные товара» появится вкладка Дополнительные опции, где можно добавить различные поля, такие как:
   • Поля ввода текста.
   • Выпадающие списки.
   • Чекбоксы.
   • Поля выбора файла.
4. Настройте параметры полей и сохраните изменения.

Способ 2: Добавление поля с помощью кода

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

// Добавление текстового поля на страницу товара
add_action( 'woocommerce_before_add_to_cart_button', 'add_custom_text_field' );
function add_custom_text_field() {
  echo '<div class="custom-text-field"><label for="custom_text">Введите ваше сообщение: </label>';
  echo '<input type="text" id="custom_text" name="custom_text" placeholder="Ваше сообщение" /></div>';
}

// Сохранение введенного значения
add_action( 'woocommerce_add_cart_item_data', 'save_custom_text_field', 10, 2 );
function save_custom_text_field( $cart_item_data, $product_id ) {
  if( isset( $_POST['custom_text'] ) ) {
    $cart_item_data['custom_text'] = sanitize_text_field( $_POST['custom_text'] );
  }
  return $cart_item_data;
}

// Отображение введенного значения в корзине
add_filter( 'woocommerce_get_item_data', 'display_custom_text_in_cart', 10, 2 );
function display_custom_text_in_cart( $item_data, $cart_item ) {
  if ( isset( $cart_item['custom_text'] ) ) {
    $item_data[] = array(
      'name' => 'Сообщение',
      'value' => $cart_item['custom_text']
    );
  }
  return $item_data;
}

Этот код добавляет текстовое поле на страницу товара и сохраняет введенное значение в корзине.

7. Использование шаблонов для кастомизации

Если вам нужно изменить структуру карточки товара более глобально, вы можете создать свои шаблоны страниц товара.

1. Откройте папку с вашей темой: /wp-content/themes/ваша_тема/.
2. Найдите папку woocommerce. Если её нет, создайте папку и скопируйте туда файлы шаблонов из /wp-content/plugins/woocommerce/templates/.
3. Отредактируйте файл single-product.php для изменения структуры карточки товара.

Карточка товара в WooCommerce — это ключевая страница для ваших покупателей, и WooCommerce предоставляет много возможностей для её кастомизации. Вы можете изменять внешний вид