Как изменить Woocommerce с помощью дочерей темы. Часть 2 — как вносить изменения в шаблон

Автор: | 13.04.2020

Итак, в прошлой статье мы узнали, как создать рабочую среду для внесения изменений в woocommerce и установили все необходимые плагины. Сегодня узнаем, как правильно вносить изменения в шаблон на небольшом примере.

Добавить иконку Font Awesome

Допустим, мы хотим добавить иконку корзины рядом с надписью «добавить в корзину» на странице товара.
Для этого нам нужно открыть шаблон, который отвечает за отображение товара в родительской теме и скопировать его в дочернюю (в папку woocommerce), сохраняя путь.
Обычно все шаблоны woocommerce находятся в папке по адресу wp-content/plugins/woocommerce/templates
Шаблон, который отвечает за отображение кнопки «добавить в корзину» находится в папке
Templates /single-product/add-to-cart/simple.php
Открыв файл вверху можно увидеть следующее
add-to card templates

Нас интересует строка «This template can be overridden by copying it to yourtheme/woocommerce/single-product/add-to-cart/simple.php.» То есть этот шаблон можно переопределить, скопировав его в carolinaspa /woocommerce/single-product/add-to-cart/simple.php
Скопируем все содержимое файла родительской темы и создадим файл simple.php в нашей дочерней теме в точности повторив указанный путь
carolinaspa add-to card templates
Вставим содержимое, скопированное ранее.
Теперь можно менять данные, не боясь, что они потеряются с очередным обновлением woocommerce.

Как добавить иконку перед надписью

Мы уже установили плагин Better Font Awesome (если нет, см. здесь), поэтому осталось немного подправить шаблон. Находим строчку

add-to card templates button
И добавим класс fa fa-shopping-cart

<button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="single_add_to_cart_button button alt fa fa-shopping-cart"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>

В файле style.css дочерней темы можно добавить margin

.single_add_to_cart_button::before{
margin-right: 10px;
}

Сохраним и откроем страницу товара.
icon add to card

В следующей статье рассмотрим, как пользоваться action hooks и filter hooks.

Похожие записи
Как изменить Woocommerce с помощью дочерей темы. Часть 12 — настройка страницы входа в систему

Стандартная страница входа на сайт wordPress выглядит не очень привлекательно. Read more

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

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

11 + двенадцать =