WordPress лаборатория
Навигация
  • Главная
  • Как создать
    • Персональный Блог
    • Полноценный Сайт
    • Интернет-магазин
  • Блог
    • Инструкции
    • Электронная коммерция
    • Плагины
    • Заметки
  • Инструменты
    • Шаблон плагина
  • Премиум
    • Купец – WP + Woo
Присоединяйся
WordPress лаборатория
WordPress лаборатория
  • Главная
  • Как создать
    • Персональный Блог
    • Полноценный Сайт
    • Интернет-магазин
  • Блог
    • Инструкции
    • Электронная коммерция
    • Плагины
    • Заметки
  • Инструменты
    • Шаблон плагина
  • Премиум
    • Купец – WP + Woo
Профессиональная помощь экспертов
Мы можем помочь с любой задачей, так или иначе связанной с WordPress!
Создайте заявку
Бесплатная оценка стоимости без обязательств.

Создать заявку
🧒 Мой Аккаунт

Главная → Блог → Электронная коммерция WordPress

Хуки страницы товара в WooCommerce – визуальная карта с примерами редактирования!

  • 21 января, 2023
Хуки страницы товара в WooCommerce. Визуальная карта с примерами
Total
3
Репостов
0
3
0
0
0
Содержание
  1. Карта хуков страницы товара в WooCommerce
  2. События (actions) и хуки страницы товара в WooCommerce срабатывающие по умолчанию
    1. События до начала вывода информации о товаре
    2. События в левой колонке
    3. Правая колонка
    4. Вкладки (tabs) и сопутствующие товары
    5. События в блоке отзывов и после вывода основного контента
  3. Заключение

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

  1. Модифицировать саму страницу, опираясь на официальное руководство.
  2. Использовать, доступные для страницы товары, хуки.

Если вы когда-либо работали с кодом WordPress сайта, то наверняка, много раз встречали слово «Хук» или «Зацепка», а если вы разработчик, то использование хуков должно стать вашим основным методом.

Купец - WordPress шаблон
Купец
WordPress шаблон
Купец - WordPress шаблон

Наш премиальный шаблон для создания сайта компании или интернет-магазина с высокой конверсией на базе WordPress и WooCommerce, раскрывающий всю мощь плагина Elementor, как лучшего визуального редактора!

  • Хедер и Футер билдер
  • 60+ блоков для Elementor и 200+ настроек
  • Прокаченный WooCommerce и мега-меню
  • Списки желаний и образцы вариаций
Посмотреть демо
Подробнее о шаблоне

Плагин WooCommerce, как и сам WordPress, имеет огромное количество предопределенных функций. С помощью хуков вы можете кардинально изменить поведение этих функций и заменить существующее значение, тем самым настроив WooCommerce в соответствии с вашими потребностями!

В рамках этого руководства и опираясь на то, что 99% посетители этой страницы являются разработчиками, мы не будет описывать все преимущества работы хуками по сравнению с шаблонами, а будем редактировать страницу товара и рассмотрим все доступные для этой страницы WooCommerce хуки.


Карта хуков страницы товара в WooCommerce

На карте показаны все доступные для редактирования страницы товара хуки. Актуально если у вас WooCommerce версии 4.4+.

woocommerce_before_main_content (Подробнее →)

Магазин → Майки → Футболка

woocommerce_before_single_product (Подробнее →)
woocommerce_sidebar
woocommerce_output_all_notices
woocommerce_before_single_product_summary
woocommerce_before_single_product_summary

Распродажа↓

woocommerce_show_product_sale_flash
woocommerce_show_product_images
Изображение товара в WooCommerce

Дополнительные изображения ↓

woocommerce_show_product_thumbnails
woocommerce_single_product_summary

Название товара ↓

woocommerce_template_single_title

★★★★★(2 отзыва клиентов)↓

woocommerce_template_single_rating

500,00₽ – 700,00₽ ↓

woocommerce_template_single_price

Короткое описание товара ↓

woocommerce_template_single_excerpt
woocommerce_before_add_to_cart_form
woocommerce_before_add_to_cart_button
woocommerce_template_single_add_to_cart
woocommerce_simple_add_to_cart
woocommerce_grouped_add_to_cart
woocommerce_variable_add_to_cart
woocommerce_external_add_to_cart
woocommerce_before_variations_form

Атрибут: ↻ Очистить

woocommerce_before_add_to_cart_button
woocommerce_before_single_variation
woocommerce_single_variation

Мужская футболка с логотипом

500,00₽

☻XXX в наличии

woocommerce_single_variation_add_to_cart_button
woocommerce_before_quantity_input_field

woocommerce_after_quantity_input_field

В корзину

woocommerce_after_single_variation
woocommerce_after_add_to_cart_button
woocommerce_after_variations_form
woocommerce_after_add_to_cart_form

woocommerce_product_meta_start

Артикул: Ф1

Категория:Название

Метки:Один,Два

woocommerce_product_meta_end
woocommerce_share

woocommerce_after_single_product_summary
woocommerce_output_product_data_tabs

Детали

Отзывы

woocommerce_product_additional_information
Вес0.5 kg
Размер

M, L, XL

Цвет

Красный, Зеленый, Синий


Детали

Отзывы

woocommerce_review_before
Аватар ↓
woocommerce_review_display_gravatar
woocommerce_review_before_comment_meta

★★★★★ ↓

woocommerce_review_display_rating
woocommerce_review_meta

(проверенный владелец) 21.08.2020 ↓

woocommerce_review_before_comment_text
woocommerce_review_comment_text

Спасибо огромное, товар отличный! ↓

woocommerce_review_display_comment_text
woocommerce_review_after_comment_text
woocommerce_product_after_tabs
woocommerce_after_single_product_summary

Возможно Вас также заинтересует… ↓

woocommerce_upsell_display
woocommerce_output_related_products
Товар

В корзину

Товар

В корзину

Товар

В корзину

Товар

В корзину


woocommerce_after_single_product
woocommerce_after_main_content

События, помеченные синим и зеленым цветом можно хукать, а вот помеченные желтым – нет. Но это не значит, что на эти события нельзя повлиять. Их можно переписать, удалить или заменить своими собственными событиями.

В качестве примера давайте выведем дополнительный HTML в woocommerce_single_product_summary:

add_action( 'woocommerce_single_product_summary', 'wpbl_exmaple_hook', 20);
function wpbl_exmaple_hook(){
	echo '<div class="wbpl_share">Рассказать друзьям нашу майку и получите купон на 5% скидку!<br><strong>Поделиться:</strong> <a href="https://vk.com/share.php?url=https://wordpresslab.ru/">Вконтакте</a>, <a href="https://connect.ok.ru/offer?url=https://wordpresslab.ru/">Одноклассники</a></div>';
} 

И в результате получим:

Хуки страницы товара в WooCommerce - добавляем HTML
Хуки страницы товара в WooCommerce – добавляем HTML

Как видно из кода, использовался приоритет равный 20, если значение изменить, то можно поменять позицию.

Указав для хука приоритет, равный 10, мы сдвинем наш блок под заголовок товара:

Хуки страницы товара в WooCommerce - меняем приоритет
Хуки страницы товара в WooCommerce – меняем приоритет

А установив значение 0, блок будет самым первым:

Хуки страницы товара в WooCommerce - устанавливаем нулевой приоритет
Хуки страницы товара в WooCommerce – устанавливаем нулевой приоритет

Двигаемся дальше и давайте рассмотрим все хуки, которые могут пригодится при редактировании страницы товара в WooCommerce.


События (actions) и хуки страницы товара в WooCommerce срабатывающие по умолчанию

Давайте рассмотрим события (actions), которые вы можете отключить или модифицировать используя файл functions.php.

Как вы уже поняли, WooCommerce использует свои собственные события, например, woocommerce_before_single_product_summary, используются для вывода базовой информации о товаре, состоящей из нескольких отдельных частей, которые можно модифицировать или удалять. И так с каждым, отдельно взятым, информационным блоком!

Давайте рассмотрим весь список!

События до начала вывода информации о товаре

// Первое событие - это вывод хлебных крошек:
add_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );

// Второе событие вывод боковой панели (Sidebar):
add_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );

//  И последнее зарегистрированные событие в этом блоке - это создание области для отображения ошибок:
add_action( 'woocommerce_before_single_product', 'woocommerce_output_all_notices', 10 );

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

Хлебные крошки в WooCommerce
Хлебные крошки в WooCommerce – хуки страницы товара в WooCommerce

Давайте их хукнем ?

/**
 * Меняем вывод хлебных крошек
 */
add_filter( 'woocommerce_breadcrumb_defaults', 'wpbl_breadcrumbs' );
function wpbl_breadcrumbs() {
	return array(
		'delimiter' => ' → ', // Меняем разделитель
		'wrap_before' => '<nav class="woocommerce-breadcrumb wpbl_custom" itemprop="breadcrumb">', // Добавляем CSS класс wpbl_custom
		'wrap_after' => '</nav>',
		'before' => '<span>',
		'after' => '</span>',
		'home' => _x( 'Магазин', 'breadcrumb', 'woocommerce' ) // Меняем "Главная" на "Магазин"
	);
}

/**
 * При нажатии на ссылку "Магазин" покупатель перейдет на страницу магазина, а не на главную страницу сайта.
 */
add_filter( 'woocommerce_breadcrumb_home_url', 'wpbl_breadcrumb_home_url' );
function wpbl_breadcrumb_home_url() {
    return wc_get_page_permalink( 'shop' );
}

И чуть-чуть стилизуем добавленный CSS класс wpbl_custom:

.wpbl_custom span {
	padding: 0px 3px
}
.wpbl_custom > span > a {
	border-bottom: 1px dashed #999;
	color: #333 !important;
}
.wpbl_custom span:last-child {
	padding: 5px 7px;
	border-radius: 3px;
	margin-left: 7px;
	background-color: #dff0d8;
	border-color: #d0e9c6;
	color: #3c763d;
}

В итоге наши хлебные крошки будут выглядеть более презентабельно:

Хуки страницы товара в WooCommerce - модифицируем хлебные крошки
Хуки страницы товара в WooCommerce – модифицируем хлебные крошки

События в левой колонке

// Первым событием будет вывод значка "Распродажа"
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );

// Второе событие отвечает за отображение товара
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );

// Последнее зарегистрированное событие выводит галерею дополнительных изображений
add_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );

Для примера давайте добавим HTML блок под галерею изображений:

add_action( 'woocommerce_product_thumbnails', 'wpbl_thumbs', 30  );
function wpbl_thumbs() {
    echo '<div class="wpbl_woo_need_help"><em>А вы знали, что мы можем помочь вам с выбором совершенно бесплатно? Звоните из любой точки России - <strong>8(800)123-45-67</strong></em></div>';
}

И как результат:

Хуки страницы товара в WooCommerce - редактируем вывод изображений
Хуки страницы товара в WooCommerce – редактируем вывод изображений

На этом этапе, скорее всего уже понятен принцип работы с хуками в WooCommerce.

Дальше просто перечислим оставшиеся события, а если будет нужно дополним статью примерами.


Правая колонка

События и хуки страницы товара в WooCommerce в правой колонке:

/**
 * Права колонка. Базовая информация о товаре
**/

// Вывод заголовка товара
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );

// Вывод рейтинга
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );

// Отображение цены
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );

// Короткое описание
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
 

/**
 * Права колонка. Процесс добавления в корзину
**/

// Событие срабатывает до отображение формы
do_action( 'woocommerce_before_add_to_cart_form' );

// Событие ДО кнопки "В корзину"
do_action( 'woocommerce_before_add_to_cart_button' );

// Запуск событие по добавлению простого товара в корзину.
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

// Выводит область добавления "Простого" товара в корзину
add_action( 'woocommerce_simple_add_to_cart', 'woocommerce_simple_add_to_cart', 30 );

// Выводит область добавления "Сгруппированного" товара в корзину
add_action( 'woocommerce_grouped_add_to_cart', 'woocommerce_grouped_add_to_cart', 30 );

// Выводит область добавления "Вариативного" товара в корзину
add_action( 'woocommerce_variable_add_to_cart', 'woocommerce_variable_add_to_cart', 30 );

// Выводит область добавления "Внешнего/Партнёрского" товара в корзину
add_action( 'woocommerce_external_add_to_cart', 'woocommerce_external_add_to_cart', 30 );

// Отображает информацию о выбранной вариации
add_action( 'woocommerce_single_variation', 'woocommerce_single_variation', 10 );

// Выводит область добавления "Вариации" в корзину
add_action( 'woocommerce_single_variation', 'woocommerce_single_variation_add_to_cart_button', 20 );

// Событие ДО вывода поля кол-во
do_action( 'woocommerce_before_quantity_input_field' );

// Событие ПОСЛЕ вывода поля кол-во
do_action( 'woocommerce_after_quantity_input_field' );

// Событие ПОСЛЕ кнопки "В корзину"
do_action( 'woocommerce_after_add_to_cart_button' );

// Событие ПОСЛЕ формы  добавления товара в корзину
do_action( 'woocommerce_after_add_to_cart_form' );
 
/**
 * Права колонка. Мета данные
**/

// События отображения мета данных товара
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
do_action( 'woocommerce_product_meta_start' );
do_action( 'woocommerce_product_meta_end' );

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

Хуки страницы товара в WooCommerce - работаем с событиями для которых нет хуков
Хуки страницы товара в WooCommerce – работаем с событиями, для которых нет хуков

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

// Удаляем вызываемое по умолчанию событие
remove_action('woocommerce_single_product_summary','woocommerce_template_single_rating', 10);

//// Добавляем новое событие, меняя приоритет
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 0 );

И как ожидалось:

Хуки страницы товара в WooCommerce - сортировка событий
Хуки страницы товара в WooCommerce – сортировка событий

Вкладки (tabs) и сопутствующие товары

// Событие вывода табов
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );

// Вывод атрибутов товара
add_action( 'woocommerce_product_additional_information', 'wc_display_product_attributes', 10 );

// Событие срабатывает после вывода табов
do_action( 'woocommerce_product_after_tabs' );

// Событие вывода Апсейл товаров
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );

// Событие вывода похожих товаров
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

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

Но, что еще можно сделать с событиями, у которых нет хуков? Ответ простой – сами события можно удалить, а на их место поставить что-то своё!

Вот так сейчас выглядит страница простого товара в нашем экспериментальном WooCommerce магазине:

Страница простого товара в WooCommerce
Страница простого товара в WooCommerce

Давайте кардинально изменим положение блока похожих товаров и изменим их количество:

// Меняем кол-во вывода похожих товаров
add_filter( 'woocommerce_output_related_products_args', 'wplb_rp', 20 );
function wplb_rp( $args ) {
	$args[ 'posts_per_page' ] = 3; // Сколько выводить
	$args[ 'columns' ] = 3; // Сколько колонок использовать
	return $args;
}

// Удаляем событие по умолчанию
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

// Создаем свое событие и меняем местоположение похожих товаров
add_action( 'woocommerce_share', 'woocommerce_output_related_products', 100 );

И как результат:

WooCommerce страница товара - работаем с событиями
WooCommerce страница товара – работаем с событиями

Тут стоит сказать что, использовав фильтр, мы изменили так же CSS класс списка похожих товаров. Было – ul.columns-4, а стало ul.columns-3, если в вашей теме этот класс не описан то вот:

@media (min-width: 1120px) {
	.wc-col-4.woocommerce ul.products.columns-3 li.product,
	.columns-4.woocommerce ul.products.columns-3 li.product {
		flex: 0 0 33%;
		max-width: 33%;
	}
}

Не забудьте прописать стили для мобильных устройств!


События в блоке отзывов и после вывода основного контента

Работа с стольными событиями на странице товара ничем не отличается от вышеописанных методов. Давайте просто перечислим и укажем приоритеты.

// Отображает граватар авторов обзора
add_action( 'woocommerce_review_before', 'woocommerce_review_display_gravatar', 10 );

// Вывод рейтинга
add_action( 'woocommerce_review_before_comment_meta', 'woocommerce_review_display_rating', 10 );

// Отображение мета данные авторов обзора (имя, дата отзыва...)
add_action( 'woocommerce_review_meta', 'woocommerce_review_display_meta', 10 );

// Срабатывает до вывода комментария
do_action( 'woocommerce_review_before_comment_text', $comment );

// Вывод текста комментария
add_action( 'woocommerce_review_comment_text', 'woocommerce_review_display_comment_text', 10 );

// Срабатывает после вывода комментария
do_action( 'woocommerce_review_after_comment_text', $comment );
// Событие срабатывает после вывода информации о товаре
do_action( 'woocommerce_after_single_product' );

// Событие после вывода всего тела контента
do_action( 'woocommerce_after_main_content' );

Заключение

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

Купец - WordPress шаблон
Купец
WordPress шаблон
Купец - WordPress шаблон

Наш премиальный шаблон для создания сайта компании или интернет-магазина с высокой конверсией на базе WordPress и WooCommerce, раскрывающий всю мощь плагина Elementor, как лучшего визуального редактора!

  • Хедер и Футер билдер
  • 60+ блоков для Elementor и 200+ настроек
  • Прокаченный WooCommerce и мега-меню
  • Списки желаний и образцы вариаций
Посмотреть демо
Подробнее о шаблоне

Если у вас есть вопросы – спрашивайте в комментариях.

Спасибо.

Поделиться 0
Твитнуть 0
Похожие Темы
  • WordPress для разработчиков
Читайте так же
Редактируем поля оформления заказа в WooCommerce
Читать

Редактируем поля оформления заказа в WooCommerce

Как создать интернет-магазин на WordPress
Читать

Как создать интернет-магазин на WordPress и WooCommerce в 2023 году (Пошаговое руководство)

Вариативные товары в WooCommerce Руководство по созданию
Читать

Вариативные товары в WooCommerce – Руководство по созданию 2023

27 комментариев
  1. Алина:
    14 октября, 2020 в 01:13

    Очень полезная статья, как вывести хлебные крошки как у вас перед началом товара? У меня они справа(над названием товара). Подскажите пожалуйста

    Ответить
    1. Редакция:
      3 декабря, 2020 в 09:49

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

      Ответить
  2. Андрей:
    6 декабря, 2020 в 00:43

    Добрый вечер. Подскажите, как вывести корзину в нужном месте? Что бы красиво оформить и обновлялась автоматически. Заранее спасибо. Что бы при наведении показывалась вся корзина с товарами

    Ответить
    1. Редакция:
      6 декабря, 2020 в 09:35

      Тут всё зависит от того, где и как нужно вывести корзину, самый простой метод – это написать свой мини плагин, но также в репозитории можно найти уже полно готовых плагинов.

      Ответить
  3. Иван:
    3 февраля, 2021 в 16:36

    Спасибо за полезный пост.

    А как заменить диапазон цен вариативного товара ценой выбранной вариации?

    Хорошо бы добавить этот рецепт в пост. Или отдельным написать. Задача логичная и потому частовостребуемая, и странно что в WC это сделано через Ж.

    Ответить
    1. Редакция:
      3 февраля, 2021 в 17:07

      Обычно цена выбранной вариации появляется после выбора самой вариации. Большинство это устраивает, но если уж так хочется, то обратите внимание на этот пост или на этот плагин. Чуть-чуть JS и всё получится 🙂

      Ответить
      1. Иван:
        3 февраля, 2021 в 17:33

        Спасибо за ссылки. Но в аглицком я не силён, а плагин хорош, я его юзал. Но в нём лишнее – он показывает только минимальную цену. К тому же не локализован нормально и его “From” не переводится. Его я сейчас и юзаю подпилив ненужное, но это мне не нравится.

        А так собсно я предложил тему для ещё одного поста, а там вам решать – надо ли такой полезный контент вашему сайту.

        Ответить
        1. Редакция:
          3 февраля, 2021 в 17:35

          Хорошо, спасибо. Опишем этот процесс.

          Ответить
  4. Ирина:
    27 февраля, 2021 в 23:45

    Здравствуйте! Подскажите, пожалуйста, как убрать лишние надписи на странице товара
    (-Free global shipping on all orders
    -30 days easy returns if you change your mind
    -Order before noon for same day dispatch)
    и
    (Guaranteed Safe Checkout)

    Ответить
    1. Редакция:
      28 февраля, 2021 в 11:02

      Здравствуйте.

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

      Ответить
  5. Илья:
    7 марта, 2021 в 20:28

    Добрый день! Скажите пожалуйста, чтобы создать полностью своё отображение товара – хуки закидывать в спаны, или р… Вот например вывод рейтинга в спан? Или по другому как то составляется свой шаблон?

    Ответить
    1. Редакция:
      7 марта, 2021 в 20:37

      Вы слегка запутались.

      Все хуки (зацепки) — это чисто PHP и место им в файле functions.php от вашей дочерней темы, соответственно оборачивать их в какие-либо элементы разметки – не нужно. Зачастую, хуки сами по себе влияют на HTML разметку страницы.

      Ответить
  6. Илья:
    8 марта, 2021 в 07:48

    Хорошо, так как мне перелопатить вуу, чтобы отображение товара, категории, были в моей вёрстке? Могу я создать своё html css представление этого, и оживить функциями, или только готовый вывод, через f12 вычислять классы и из пытаться править… Это уж совсем сотону вызывать… Может путь проще есть?

    Ответить
    1. Редакция:
      8 марта, 2021 в 09:45

      1 Вариант – Разобраться, как работают работают хуки – ими можно сделать всё.

      2 Вариант – Переписать шаблоны страниц WooCommerce. Для этого просто из папки “wp-content/plugins/woocommerce/templates/” копируете нужный вам файл в “wp-content/themes/ВАША_ТЕМА/woocommerce/” и редактируете его как угодно.

      Обязательно сохраняйте структуру папок:
      Например, чтобы переписать шаблон письма с информацией о заказе, которое получает администратор, скопируйте: “wp-content/plugins/woocommerce/templates/emails/admin-new-order.php” в “wp-content/themes/ВАША_ТЕМА/woocommerce/emails/admin-new-order.php” и редактируйте верстку как угодно.

      Ответить
  7. Илья:
    8 марта, 2021 в 11:37

    С хуками я понял – это грубо говоря методы… ТАк вот и эти хуки можно вставлять в php. , а дальше в дивы.

    А есть полный список, за что отвечают файлы woocommerce, и где прописаны методы, которые исполняют эти хуки?

    Ответить
    1. Редакция:
      8 марта, 2021 в 11:55

      Обычно из названия файла ясно за что он отвечает, а какого-то древа, с описанием каждого файла не встречали. Хуки можно посмотреть тут.

      Ответить
  8. Илья:
    10 марта, 2021 в 17:34

    Хрень вообщем ваш вордпресс….
    Взять готовую тему и править ее… может быть.
    Но внедрить свой дизайн… Подобно вызову дьявола

    Ответить
    1. Редакция:
      11 марта, 2021 в 12:32

      Обратите внимание на Elementor (условно бесплатный плагин для WordPress), всё редактируется мышкой и не требует ни каких знаний программирования, правда для работы с WooCommerce придется купить PRO версию за $49, а познакомиться с основами работы плагина можно, прочитав нашу статью.

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

      Ответить
  9. Илья:
    11 марта, 2021 в 22:46

    Да я отлично верстаю странички на HTML, мне конструкторы не нужны.
    Но вот чтобы совместить вукоммерц и свою страницу – это просто анриал… Вукомерц насыщен кучей не нужных css… а весь исходный код настолько спрятан…
    Было бы просто, на ссылку в корзину – кладешь функцию соответствующую через php, вывод каталога – как то по проще, чтобы можно было по своему замутить…

    Ответить
  10. Дима:
    5 апреля, 2021 в 17:26

    Подскажите пожалуйста. Нужно сделать чтоб при добавлении товаров в корзину на не перезагружалась страница. Я нашел способ говорят что можно хуками сделать.
    Хуком поменять кнопку в карте товара на кнопку от loop:
    Подскажите не пойму куда этот код нужно вставлять ? В function.php или куда ?
    remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_add_to_cart’, 30 );
    add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_loop_add_to_cart’, 30 );

    Ответить
    1. Редакция:
      5 апреля, 2021 в 17:32

      Да, вставлять в functions.php темы (дочерней если таковая установлена).

      Ответить
  11. Дима:
    5 апреля, 2021 в 22:18

    Блин у меня на сайте ни как не работает ни в файле fuction.php не в wc-template-hooks.php не работает и там написано вот single_product_summary и single_add_to_cart я так понял что это для страницы именно с товаром отдельно если ее смотреть а не в каталоге товаров как у меня Да ? как сделать мне подскажите пожалуйста ?

    Ответить
    1. Редакция:
      6 апреля, 2021 в 08:50

      В настройках WooCommerce уже давно интегрирована опция для добавления товаров в корзину на основе AJAX (Панель управления -> WooCoommerce -> Товары -> Включить Ajax для кнопки добавления в корзину в архивах). Если опция не срабатывает, то либо мы говорим не про страницу архива, либо в вашей теме переписаны файлы шаблонов, а тема давно вами (автором) не обновлялась.

      Ответить
  12. Yauheni:
    18 апреля, 2021 в 11:37

    А как можно вывести блок “цена и добавить в корзину” вместо основной цены сверху?
    То есть та цена, которая меняется в зависимости от вариаций товара, а рядом с ней кнопка “добавить в корзину”, этот блок вывести вместо основной цены под названием товара…

    Ответить
    1. Lex:
      22 мая, 2021 в 23:26

      add_action(‘woocommerce_before_add_to_cart_form’, ‘selected_variation_price_replace_variable_price_range’);
      function selected_variation_price_replace_variable_price_range(){
      global $product;

      if( $product->is_type(‘variable’) ):
      ?> .woocommerce-variation-price {display:none;}

      jQuery(function($) {
      var p = ‘p.price’
      q = $(p).html();

      $(‘form.cart’).on(‘show_variation’, function( event, data ) {
      if ( data.price_html ) {
      $(p).html(data.price_html);
      }
      }).on(‘hide_variation’, function( event ) {
      $(p).html(q);
      });
      });

      <?php
      endif;
      }

      Ответить
  13. Eugene:
    27 мая, 2021 в 19:39

    Подскажите пожалуйста как подключить свой шаблон карточки товара к WooCommerce?

    Ответить
  14. alekseji21:
    2 октября, 2021 в 15:24

    Привет, подскажите, как вывести хук на странице определенного товара или категории?

    Ответить

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Что еще почитать?
  • Сброс постоянных ссылок на всех сайтах в сети WordPress (Multisite)

    Сброс постоянных ссылок на всех сайтах в сети WordPress (Multisite)

    Читать
  • Как создать сайт на WordPress

    Как создать сайт на WordPress с нуля – Пошаговая инструкция (2023)

    Читать
  • WordPress Cron - Планировщик заданий

    WordPress Cron – Планировщик заданий

    Читать
  • Как выбрать лучшей WordPress шаблон - советы по выборы WordPress темы

    Лучшая тема для WordPress и как ее выбрать – 9 советов, к которым стоит прислушаться!

    Читать
  • Пошаговая настройка WordPress сайта

    Пошаговая настройка сайта на WordPress после установки. Методы правильной персонализации

    Читать
Инструменты разработчика
  • Шаблон WordPress плагина (генератор)
Нужна помощь?
Мы можем помочь с любой задачей, так или иначе связанной с WordPress!
Создайте заявку
Бесплатная оценка стоимости без обязательств.

Создать заявку
WordPress лаборатория - Еще один сайт на WP 💛
  • Обратная cвязь
  • Оплата и возврат
  • Пользовательское соглашение
  • Договор-оферта
  • Политика конфиденциальности

Введите ключевое слово и нажмите Ввод