Как изменить расположение элементов в краткой карточке товара (категория)? ➤ Хуки WooCommerce

Как изменить расположение элементов в краткой карточке товара на странице категории?

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

Задача: разместить цену над названием товара в краткой карточке товара.

Для выполнения этой задачи мы будем использовать хуки WooCommerce.

Содержание видео:

• Вступление.
• Определяем какие хуки используются в краткой карточке товара.
• Ищем файл в шаблоне WordPress, который выводит категории товаров. Ищем хуки, на которых висят функции вывода названия и цены.
• Деактивируем функцию и порядок вывода цены на хуке. Метод remove_action.
• Активируем функцию вывода цены на другом хуке и задаем нужный порядок отображения. Метод add_action.
• Меняем стиль CSS для элемента цены.
• Выводы.

Функции (вставляем в файл functions.php дочерней темы):

remove_action ('woocommerce_after_shop_loop_item_title','woocommerce_template_loop_price', 10);
add_action ('woocommerce_shop_loop_item_title', 'woocommerce_template_loop_price', 5);

Стили CSS:

.product-grid-item .price {
    margin-bottom: 5px!important;
}

Плагин Simply Show Hooks