Как изменять WooCommerce. Эпизод #2. Страница товара

  Как изменять WooCommerce 13 комментариев

Страница товара разбита на несколько файлов. Каждый файл отвечает за вывод определенного контента.

Структура файлов страницы товара

Вся структура дана от основной папки /templates/

  • templates/
  • single-product.php
    • content-single-product.php
      • single-product/
        • sale-flash.php — вывод фразы «Распродажа»
        • product-image.php — вывод изображения и галереи товара
        • title.php — вывод заголовка товара
        • rating.php — вывод рейтинга товара
        • price.php — вывод цены товара
        • short-description.php — вывод краткого товара
        • meta.php — вывод метаданных (категория, теги и тд) товара
        • share.php — вывод кнопок поделиться (технически пустой файл, можно использовать для вывода любого контента)
        • add-to-cart/
          • external.php — кнопка «Добавить в корзину» для внешних товаров
          • grouped.php — кнопка «Добавить в корзину» для сгруппированных товаров
          • simple.php — кнопка «Добавить в корзину» для простых товаров
          • variation-add-to-cart-button.php — кнопка «Добавить в корзину» для вариативных товаров
          • variation.php — вывод значения выбранной вариации
          • variable.php — вывод вариаций
        • tabs/
          • tabs.php — вывод вкладок
          • description.php — вывод полного описания товара
          • additional-information.php — вывод деталей товара (вес, габариты, атрибуты)
к содержанию

Визуализация хуков страницы товара

  • woocommerce_before_single_product
    Хуки по умолчанию:
    						
							add_action( 'woocommerce_before_single_product', 'wc_print_notices', 10 );
    Удаление хуков по умолчанию:
    						
							remove_action( 'woocommerce_before_single_product', 'wc_print_notices', 10 );
  • woocommerce_before_single_product_summary
    Хуки по умолчанию:
    						
							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 );
    Удаление хуков по умолчанию:
    						
							remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );

Распродажа!
Как изменять WooCommerce. Эпизод #2. Страница товара • 1 • Финты WordPress
  • woocommerce_product_thumbnails
    Хуки по умолчанию:
    								
									/*
									* Вывод миниатюр галлереи товара
									*/
									add_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );
    Удаление хуков по умолчанию:
    								
		remove_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );
    Пример использования хука:
    								
		add_action( 'woocommerce_product_thumbnails' , 'woocust_after_product_gallery', 30 );

function woocust_after_product_gallery() {
   echo 'Тут выводим нужный текст с нужными тегами, при необходимости';
}
  • woocommerce_single_product_summary
    Хуки по умолчанию:
    								
									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 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_sharing', 50 );
    Удаление хуков по умолчанию:
    								
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_sharing', 50 );
Заголовок товара

€554,00–€6.565,00 €44,00–€665,00

Краткое описание товара.
  • woocommerce_before_add_to_cart_form
    Пример использования хука:
    								
									add_action( 'woocommerce_before_add_to_cart_form', 'woocust_custom_action', 5 );

function woocust_custom_action() {
echo 'TEST';
}
  • woocommerce_before_variations_form
    Пример использования хука:
    								
									add_action( 'woocommerce_before_variations_form', 'woocust_custom_action', 5 );

function woocust_custom_action() {
echo 'TEST';
}
Очистить
  • woocommerce_before_add_to_cart_button
    Пример использования хука:
    								
									add_action( 'woocommerce_before_add_to_cart_button', 'woocust_custom_action', 5 );

function woocust_custom_action() {
echo 'TEST';
}
  • woocommerce_before_single_variation
    Пример использования хука:
    								
									add_action( 'woocommerce_before_single_variation', 'woocust_custom_action', 5 );

function woocust_custom_action() {
echo 'TEST';
}
  • woocommerce_single_variation
    Хуки по умолчанию:
    								
									add_action( 'woocommerce_single_variation', 'woocommerce_single_variation', 10 );
									add_action( 'woocommerce_single_variation', 'woocommerce_single_variation_add_to_cart_button', 20 );
    Удаление хуков по умолчанию:
    								
		remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation', 10 );
									remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation_add_to_cart_button', 20 );
€554,00 €44,00

На складе

  • woocommerce_after_single_variation
    Пример использования хука:
    								
									add_action( 'woocommerce_after_single_variation', 'woocust_custom_action', 5 );

function woocust_custom_action() {
echo 'TEST';
}
  • woocommerce_after_add_to_cart_button
    Пример использования хука:
    								
									add_action( 'woocommerce_after_add_to_cart_button', 'woocust_custom_action', 5 );

function woocust_custom_action() {
echo 'TEST';
}
  • woocommerce_after_variations_form
    Пример использования хука:
    								
									add_action( 'woocommerce_after_variations_form', 'woocust_custom_action', 5 );

function woocust_custom_action() {
echo 'TEST';
}
  • woocommerce_after_add_to_cart_form
    Пример использования хука:
    								
									add_action( 'woocommerce_after_add_to_cart_form', 'woocust_custom_action', 5 );

function woocust_custom_action() {
echo 'TEST';
}
  • woocommerce_product_meta_start
    Пример использования хука:
    								
									add_action( 'woocommerce_product_meta_start', 'woocust_custom_action', 5 );

function woocust_custom_action() {
echo 'TEST';
}

Артикул: htr554yn
Категория: одежда
Метки: метка1, метка2
  • woocommerce_product_meta_end
    Пример использования хука:
    								
									add_action( 'woocommerce_product_meta_end', 'woocust_custom_action', 5 );

function woocust_custom_action() {
echo 'TEST';
}
  • woocommerce_share
    Пример использования хука:
    								
									add_action( 'woocommerce_share', 'woocust_custom_action', 5 );

function woocust_custom_action() {
echo 'TEST';
}
  • woocommerce_after_single_product_summary
    Хуки по умолчанию:
    								
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
    Удаление хуков по умолчанию:
    								
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
Описание

Тут длинное описание товара

Детали
Вес 546 кг
Размеры 546 x 456 x 456 см
Аттрибуты Аттрибут 1, Аттрибут 2
Отзывы

Отзывов пока нет.

Будьте первым, кто оставил отзыв на “Тут указано название товара”

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

1 2 3 4 5

Похожие товары
  • woocommerce_after_single_product
    Пример использования хука:
    								
									add_action( 'woocommerce_after_single_product', 'woocust_custom_action', 5 );

function woocust_custom_action() {
echo 'TEST';
}
к содержанию

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

Отключение всех функций с хука

/**
 * @snippet       Удаление всех функций с хука
 * @how-to-woo    https://wpruse.ru/courses/how-to-change-woocommerce/
 * @sourcecode    https://wpruse.ru/?p=3439
 * @author        Artem Abramovich
 * @testedwith    WooCommerce 3.6
 */
remove_all_actions( 'woocommerce_single_product_summary' );

Замена надписи «Добавить в корзину»

/**
 * @snippet       Замена надписи на кнопке Добавить в корзину
 * @how-to-woo    https://wpruse.ru/courses/how-to-change-woocommerce/
 * @sourcecode    https://wpruse.ru/?p=3439
 * @author        Artem Abramovich
 * @testedwith    WooCommerce 3.6
 */
add_filter( 'woocommerce_product_single_add_to_cart_text', 'woocust_change_label_button_add_to_cart_single' );
function woocust_change_label_button_add_to_cart_single( $label ) {

	$label = 'Просто купить';

	return $label;
}

Управление вкладками на странице товара

Удаление вкладок

/**
 * @snippet       Удаление вкладок
 * @how-to-woo    https://wpruse.ru/courses/how-to-change-woocommerce/
 * @sourcecode    https://wpruse.ru/?p=3439
 * @testedwith    WooCommerce 3.6
 */
add_filter( 'woocommerce_product_tabs', 'woocust_remove_product_tabs', 99 );
function wdm_remove_product_tabs( $tabs ) {

	unset( $tabs['description'] ); // Удаление вкладки Описание
	unset( $tabs['reviews'] ); // Удаление вкладки Отзывы
	unset( $tabs['additional_information'] ); // Удаление вкладки Детали

	return $tabs;

}

Переименование вкладок

/**
 * @snippet       Переименование вкладок
 * @how-to-woo    https://wpruse.ru/courses/how-to-change-woocommerce/
 * @sourcecode    https://wpruse.ru/?p=3439
 * @testedwith    WooCommerce 3.6
 */
add_filter( 'woocommerce_product_tabs', 'woocust_rename_tabs', 98 );
function woocust_rename_tabs( $tabs ) {

	$tabs['description']['title']            = 'Другое Описание'; // Переименование вкладки Описание
	$tabs['reviews']['title']                = 'Другие Отзывы'; // Переименование вкладки Отзывы
	$tabs['additional_information']['title'] = 'Другие детали'; // Переименование вкладки Детали

	return $tabs;

}

Упорядочивание вкладок

/**
 * @snippet       Упорядочивание вкладок
 * @how-to-woo    https://wpruse.ru/courses/how-to-change-woocommerce/
 * @sourcecode    https://wpruse.ru/?p=3439
 * @testedwith    WooCommerce 3.6
 */
add_filter( 'woocommerce_product_tabs', 'woocust_reorder_tabs', 98 );
function woocust_reorder_tabs( $tabs ) {

	$tabs['reviews']['priority']                = 5; // Отзывы первые
	$tabs['description']['priority']            = 10; // Описание вторые
	$tabs['additional_information']['priority'] = 15; // Детали третьи

	return $tabs;
}

Кастомизация вкладок

/**
 * @snippet       Кастомизация вкладок
 * @how-to-woo    https://wpruse.ru/courses/how-to-change-woocommerce/
 * @sourcecode    https://wpruse.ru/?p=3439
 * @testedwith    WooCommerce 3.6
 */
add_filter( 'woocommerce_product_tabs', 'woocust_custom_description_tab', 98 );
function woocust_custom_description_tab( $tabs ) {

	$tabs['description']['callback'] = 'woocust_custom_description_tab_content';

	return $tabs;
}

function woocust_custom_description_tab_content() {

	echo '<h2>Произвольное описание</h2>';
	echo '<p>Тут можно добавить произвольное описание</p>';
}

Добавление вкладок

/**
 * @snippet       Добавление произвольной вкладки
 * @how-to-woo    https://wpruse.ru/courses/how-to-change-woocommerce/
 * @sourcecode    https://wpruse.ru/?p=3439
 * @testedwith    WooCommerce 3.6
 */
add_filter( 'woocommerce_product_tabs', 'woocust_new_product_tab' );
function woocust_new_product_tab( $tabs ) {

	$tabs['custom_tab'] = array(
		'title'    => 'Новая вкладка',
		'priority' => 50,
		'callback' => 'woocust_new_product_tab_content',
	);

	return $tabs;

}

function woocust_new_product_tab_content() {

	echo '<h2>Новая вкладка</h2>';
	echo '<p>Тут контент новой вкладки</p>';

}
к содержанию

Заключение

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

5 6 голоса
Рейтинг статьи

Подписаться
Уведомить о
guest
13 комментарев
Новые
Старые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
13
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x