Как изменить Woocommerce с помощью дочерей темы (на примере Storefront). Часть 1

Несмотря на обилие бесплатных и премиум тем, разработанных специально под woocommerce, многие владельцы интернет-магазинов хотят внести какие-либо изменения во внешний вид темы, добавить новый функционал, убрать лишнее и так далее. Чтобы это сделать необходимо вносить изменения в существующую тему, а точнее нужно немного покопаться в ее коде, ведь плагины не всегда помогут, да и большое количество плагинов очень негативно сказывается на скорости работы сайта.

Для того, чтобы изменить что-либо во внешнем виде магазина, самым правильным решением будет создание дочерней темы. В этой серии статей я покажу как это сделать на примере темы Storefront, самой популярной темы от разработчиков woocommerce.

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

Для начала, убедитесь, что у вас готова рабочая среда, а именно:

установлен WordPress (локально или на хостинге) и подключена БД.
установленная тема storefront.
установлен и настроен плагин Woocommerce (как это сделать узнайте здесь).
добавлены товары для демонстрации (минимум 4-5 товаров) с описанием и миниатюрами.
создана дочерняя тема (как это сделать узнайте здесь).

В итоге в папке с темой storefront у вас появится папка с дочерней темой, в которой нужно создать файлы style.css и function.php. Тему вы можете назвать как угодно, я назову ее carolinaspa.

Также внутри папки темы carolinaspa для дальнейшей работы нам понадобятся папки img (для изображений) и woocommerce (для добавления изменений в шаблоны темы).

Как изменить внешний вид вашего интернет-магазина?

Есть 3 способа, с помощью которых можно изменить внешний вид любого магазина, созданного с помощью woocommerce:

— используем css, если нужно изменить размер элементов, цвет, добавить анимацию, изменить шрифт, цвет ссылок и так далее.

— переписываем шаблон, если нужно поменять что-то в верстке. Чтобы внести изменения в шаблон, следует сделать его копию и добавить в дочернюю тему (подробнее об этом далее)

— используем хуки. Это самый мощный способ модифицировать сайт woocommerce. Можно менять экшены (actions) и фильтры (filters).

Actions позволяют вставлять пользовательский код в различных точках (везде, где выполняется action). Например, вывести картинку или слайдер на главной странице.

Фильтры всегда возвращают какое-либо значение (с их помощью можно изменить или переопределить какой-либо существующий код). Например, помять название кнопки «добавить в корзину» или поменять количество товаров на странице.

Мы будем использовать все эти 3 способа для того, чтобы вносить изменения в сайт на woocommerce.

Как изменить Woocommerce с помощью дочерей темы – устанавливаем плагины

Я не буду подробно рассказывать, зачем нам понадобятся те или иные плагины, это станет понятно по ходу работы. Итак, установите и активируйте следующие плагины (помимо Woocommerce):