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

Видео будет полезным всем, кто интересуется программированием, созданием сайтов и кастомизацией 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

 

Similar Posts

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

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

Вы можете использовать эти теги HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Например, чтобы вставить код используйте эти теги: <code>Здесь ваш код</code>