Обратите внимание, что данное учебное пособие предназначено для разработчиков тем. Если вы хотите настроить существующую тему, см. раздел Настройка темы: Лучшие практики.
Структура
Внутри каталога assets/css/ вы найдете таблицы стилей, отвечающие за стили компоновки WooCommerce по умолчанию.
Файлы для поиска: woocommerce.scss и woocommerce.css.
- woocommerce.css — это минифицированная таблица стилей — это CSS без пробелов, отступов и т.п. Это делает файл очень быстрым для загрузки. На этот файл ссылается плагин и декларирует все стили WoCommerce.
- woocommerce.scss напрямую используется не плагином, а командой разработчиков WooCommerce. Мы используем SASS в этом файле, чтобы скрипт CSS в первом файле был проще и быстрее.
CSS написан для того, чтобы сделать макет по умолчанию совместимым с как можно большим количеством тем, используя ширину % для всех стилей макета. Однако, скорее всего, вы захотите сделать свои собственные настройки.
Модификации
Примечание: Мы не можем обеспечить поддержку настроек в соответствии с нашей Политикой поддержки. Если вы не знакомы с кодом / шаблонами и решения потенциальных конфликтов, выберите WooExpert или разработчика для помощи.
Чтобы избежать проблем с обновлением, мы советуем не редактировать эти файлы, а использовать их в качестве точки отсчета.
Если вы просто хотите внести изменения, мы рекомендуем добавить некоторые переопределяющие стили в таблицу стилей вашей темы. Например, добавьте следующее в таблицу стилей тем, чтобы кнопки WooCommerce стали черными вместо цвета по умолчанию:
a.button,
button.button,
input.button,
#review_form #submit {
background: black;
}WooCommerce также выводит имя темы (плюс другую полезную информацию, например, какой тип страницы просматривается) в качестве класса в теге тела, что может быть полезно для переопределения стилей.
Отключение стилей WooCommerce
Если вы планируете сделать серьезные изменения, то вы можете предпочесть, чтобы ваша тема не ссылалась на таблицу стилей WooCommerce вообще. Вы можете попросить WooCommerce не использовать woocommerce.css по умолчанию. Смотрите следующее руководство для отключения таблиц стилей WooCommerce.
Участие в разработке
Если вы вносите свой вклад в ядро WooCommerce и вам необходимо отредактировать стиль, пожалуйста, отредактируйте файлы Sass, а затем скомпилируйте их с помощью Grunt. Чтобы узнать больше о том, какие задачи Grunt мы используем, посмотрите файл Gruntfile.js в корневой части WooCommerce. Вы можете прочитать больше о Grunt здесь.