Настройка WooCommerce: лучшие практики

Главное преимущество WordPress и WooCommerce — это возможность полностью менять код и контент под свои задачи и настраивать сайт так, как вам нужно.

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

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

Почему стоит следовать лучшим практикам

Многие пользователи меняют внешний вид темы: цвета ссылок, структуру страниц и общий стиль. Часто изменения вносят прямо в код темы — это кажется самым быстрым способом.

Но у такого подхода есть проблема: при обновлении темы все изменения могут быть перезаписаны и потеряны.

Поэтому цель этого руководства — показать безопасные способы настройки сайта, которые сохраняются при обновлениях и не ломают структуру проекта.

Есть два основных подхода:

  • Плагин — для небольших изменений
  • Дочерняя тема — для крупных доработок

Использование плагина

Если нужно внести небольшие изменения в стили (CSS), лучше использовать плагин для добавления пользовательских стилей.

Jetpack для CSS и Sass

Один из популярных вариантов — использовать Jetpack для работы с CSS или Sass.

Установите Jetpack. Затем перейдите в панель управления сайта: Консоль → Jetpack → Настройки и включите Пользовательский CSS.

Далее откройте раздел Внешний вид → Редактировать CSS, где можно добавлять собственные стили.

Пример

Рассмотрим простой пример. Через инструменты разработчика Chrome можно найти стиль элемента навигации в теме Storefront (правый клик → Просмотреть код).

Исходный CSS:

.main-navigation ul li a {
  color: #ffffff;
}
.main-navigation ul li a:hover {
  color: #e6e6e6;
}

Мы можем изменить цвета, например, на красный и белый при наведении:

.main-navigation ul li a {
  color: red;
}
.main-navigation ul li a:hover {
  color: white;
}

После сохранения файла и обновления страницы изменения будут применены.

Такой способ удобен тем, что при обновлении темы ваши стили сохраняются.

Кодовые сниппеты для PHP

Плагин Code Snippets позволяет добавлять PHP-код без редактирования файла functions.php.

Вы можете добавлять отдельные сниппеты, описывать их назначение и включать или отключать при необходимости.

Использование дочерней темы

Если вы планируете серьёзно менять стили или структуру темы, лучше использовать дочернюю тему. Это позволяет сохранить изменения при обновлениях основной темы.

Готовые дочерние темы

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

Важно помнить: если в такой теме есть обновления, пользовательские изменения могут быть перезаписаны.

Создание собственной дочерней темы

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

Подробнее о создании можно узнать в документации WordPress:

Дополнительные ресурсы

Поделиться с друзьями
Документация WooCommerce