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

Автор: | 12.04.2020

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

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

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

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

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

изменить Woocommerce с помощью дочерей темы
изменить Woocommerce с помощью дочерей темы

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

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

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

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

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

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

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

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

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

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

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

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

  1. Advanced Custom Fields
  2. Advanced Custom Fields: Font Awesome
  3. Better Font Awesome
  4. Cyr to Lat enhanced
  5. Mailchimp for WooCommerce
  6. Query Monitor
  7. Regenerate Thumbnails
  8. Simply Show Hooks
  9. WooCommerce Template Hints

Примечание: некоторые из этих плагинов можно деактивировать после окончания работ над сайтом.

В следующей статье я расскажу, как вносить изменения в шаблон темы.

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

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

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

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

18 − 11 =