Блог

Как изменить компоновку контента на странице товара в WooCommerce

Страница товара в WooCommerce обычно содержит детальную информацию о продукте, определенным образом рассортированную для отображения. Некоторые темы сайтов, совместимые с WooCommerce, используют собственный порядок для отображения деталей товара. Скажем, к примеру, описание продукта может показываться в отдельной вкладке, рядом с обзорами и отзывами, вместо того, чтобы указывать их под названием товара.
Однако, это максимум, который можно ожидать от стандартных тем. Порядок отображения характеристик предопределен. А что, если пользователю нужно что-то другое? А ведь WooCommerce — это хороший плагин. Поэтому он предполагает несколько команд для изменения порядка отображения контента на странице товара. Эти изменения могут быть сделаны в файле functions.php либо в самой теме, либо в дочерней теме.
Покажите нам деньги: приемы WooCommerce для изменения страницы характеристик товара=
Отображение содержимого на странице характеристик товара, вызывается тремя действиями. Эти действия можно найти в файле: “woocommerce/templates/content-single-page.php”.
/**
* woocommerce_before_single_product_summary hook
*
* @hooked woocommerce_show_product_sale_flash - 10
* @hooked woocommerce_show_product_images - 20
*/
do_action( 'woocommerce_before_single_product_summary' );
/**
* woocommerce_single_product_summary hook
*
* @hooked woocommerce_template_single_title - 5
* @hooked woocommerce_template_single_price - 10
* @hooked woocommerce_template_single_excerpt - 20
* @hooked woocommerce_template_single_add_to_cart - 30
* @hooked woocommerce_template_single_meta - 40
* @hooked woocommerce_template_single_sharing - 50
*/
do_action( 'woocommerce_single_product_summary' );
/**
* woocommerce_after_single_product_summary hook
*
* @hooked woocommerce_output_product_data_tabs - 10
* @hooked woocommerce_output_related_products - 20
*/
do_action( 'woocommerce_after_single_product_summary' );

Каждый товар отображается по определенной команде. Числом, ассоциируемым с каждой командой, по сути устанавливается приоритет исполнения той или иной команды. Таким образом, по “woocommerce_single_product_summary” порядок отображения будет таким: название товара, цена, краткое описание, кнопка добавления в корзину, meta и кнопки шеринга — все это будет следствием назначения каждому пункту соответствующего веса.
Для изменения порядка необходимо изменить приоритет, и порядок отображания в WordPress автоматически изменится согласно указанному. Чтобы изменить приоритет пункта, нужно удалить команду с ним и вставить новую с новым числом.
Таким образом, если вы хотите, чтоб краткое описание было отображалось ниже, чем кнопка добавления продукта в корзину, его вес должен быть больше, чем вес добавления в корзину, что будет означать более низкий приоритет.
/** to change the position of excerpt **/
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 31 );

Сделай все по своему: отображение кастомных полей
Дополнительная информация может быть добавлена в WooCommerce при помощи специальной формы в разделе “Продукты”, используя meta формы или при помощи плагина для кастомных полей (Advanced Custom Fields Plugin). Для настройки отображения нестандартных полей на странице характеристик товара необходимо создать функцию, которая отображает поля и командой связать её с действиями в WooCommerce, в соответствии с желаемым приоритетом.
К примеру, если вы хотите, чтоб кастомные поля отображались после описания продукта, но до кнопки добавления в корзину, вам будет необходимо написать функцию, подобную изображенной ниже.
function wdm_add_custom_fields()
{
/** if your have added information using a metabox **/
echo 'ABC'.get_post_meta(get_the_ID(), "ABC", true);
/** if you have used ACF to add custom fields **/
echo 'XYZ'.get_field(“XYZ”);
}
add_action( 'woocommerce_single_product_summary', 'wdm_add_custom_fields', 21 );

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

Поделиться постом

7
Оставить комментарий

avatar
5 Цепочка комментария
2 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
7 Авторы комментариев
Юрий СоколовРусланВадимКонстантинВиталий Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
Наталья
Гость
Наталья

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

Виталий
Гость
Виталий

Денис, спасибо огромное. Это невероятно ценный пост.
Наконец-то сделаю так, как надо)

Константин
Гость
Константин

Добрый день! Делаю кабинет партнера на Woocommerce. есть вопросы;

1. как в личном кабинете показать заказы сделанные по купону
2. как организовать баланс пользователя и списание с него

Вадим
Гость
Вадим

здравствуйте, в сгруппированном товаре, товар входящий в сгруппированный выводиться с права от картинки, а можно сделать так чтоб он вводился под картинкой да ещё и в два столбца?

Руслан
Гость
Руслан

Добрый вечер! Спасибо за полезные советы. Пожалуйста, подскажите как поменять местами (swap) описание товара и картинку товара. Стандартно — описание справа, а картинка слева. А как сделать наоборот? Где это определено (если что тема Avada)