Итак, в прошлой статье мы узнали, как создать рабочую среду для внесения изменений в woocommerce и установили все необходимые плагины. Сегодня узнаем, как правильно вносить изменения в шаблон на небольшом примере.
Добавить иконку Font Awesome
Допустим, мы хотим добавить иконку корзины рядом с надписью «добавить в корзину» на странице товара.
Для этого нам нужно открыть шаблон, который отвечает за отображение товара в родительской теме и скопировать его в дочернюю (в папку woocommerce), сохраняя путь.
Обычно все шаблоны woocommerce находятся в папке по адресу wp-content/plugins/woocommerce/templates
Шаблон, который отвечает за отображение кнопки «добавить в корзину» находится в папке
Templates /single-product/add-to-cart/simple.php
Открыв файл вверху можно увидеть следующее
Нас интересует строка «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 в нашей дочерней теме в точности повторив указанный путь
Вставим содержимое, скопированное ранее.
Теперь можно менять данные, не боясь, что они потеряются с очередным обновлением woocommerce.
Как добавить иконку перед надписью
Мы уже установили плагин Better Font Awesome (если нет, см. здесь), поэтому осталось немного подправить шаблон. Находим строчку
И добавим класс 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;
}
Сохраним и откроем страницу товара.
В следующей статье рассмотрим, как пользоваться action hooks и filter hooks.
Когда мы создаем свою тему, в файле functions.php мы регистрируем Read more
Стандартная страница входа на сайт wordPress выглядит не очень привлекательно. Read more
В одной из статей мы добавили баннер на главную страницу Read more
В одной из статей мы создали записи блога и добавили Read more
После того, как мы внесли изменения на страницу корзины, пришло Read more
Зная, как пользоваться action hook и filter hook можно с Read more