Настройка внешнего вида каталога
Goods Catalog

Внешний вид каталога, создаваемого плагином Goods Catalog, очень легко настроить при помощи CSS. Стили для каталога лучше всего прописывать в файле стилей вашей темы.

Обычно стили темы хранятся в файле style.css. В некоторых темах в настройках есть поле для ввода произвольного CSS-кода.

Также, можно создать отдельный css-файл для стилей каталога в папке темы, и импортировать его в основной файл style.css при помощи следующего кода:

@import "gc-style.css";

Если в вашей теме нет файла style.css или поля для ввода дополнительного кода, то можно подключить файл со стилями каталога напрямую в файл темы header.php, внутри тега head:

<link rel="stylesheet" href="gc-style.css">

Менять файлы плагина не рекомендуется, так как изменения в них пропадут при обновлении.

Ниже перечислены классы CSS, которые используются плагином.

Стили главной страницы и страниц категорий

Некоторые классы используются только для оформления главной страницы каталога и страниц категорий. Другие используются также на странице продукта, об этом написано в описании класса.

Разметка страницы

Расположение слоев в каталоге изображено на скриншоте ниже:

разметка страницы Goods Catalog

.goods-catalog-container

Контейнер, внутри которого находятся сайдбар каталога и сам каталог.

Следующие свойства можно изменить через Консоль на стрнаице настроек плагина:

.goods-sidebar

Класс сайдбара

Следующие свойства можно изменить через Консоль на стрнаице настроек плагина:

.goods-catalog

Класс каталога

Следующие свойства можно изменить через Консоль на стрнаице настроек плагина:

.catalog-inner

Вспомогательный класс для контейнера с каталогом

.goods-categories-container

Контейнер, в котором находятся все категории в виде сетки.

.goods-catalog .grid

Ячейка сетки, в которой выводится категория или продукт.

Следующие свойства можно изменить через Консоль на стрнаице настроек плагина:

Элементы каталога

.goods-category-list-title

Название категории (в сетке)

.goods-category-thumb-container

Контейнер для миниатюры категории

.goods-item-thumb-container

Контейнер для миниатюры продукта

.goods-item-thumb

Класс изображения-миниатюры (одинаковый для продуктов и категорий)

.goods-item-title

Название продукта (в сетке)

.goods-price-single

Класс цены

.goods-sku

Класс артикула (одинаковый в сетке и на странице продукта)

.goods-descr

Класс короткого описания продукта (одинаковый в сетке и на странице продукта)

Вспомогательные элементы

.goods-catalog .breadcrumbs

Хлебные крошки

.goods-pagination

Постраничная навигация

Стили страницы продукта

.goods-single-thumb-container

Контейнер миниатюры продукта на странице продукта

.goods-single-thumb

Изображение-миниатюра продукта на странице продукта

.goods-info

Контейнер, где находятся заголовок, цена, артикул, короткое описание товара, категории и метки.

Следующие свойства можно изменить через Консоль на стрнаице настроек плагина:

.goods-price-single

Цена продукта на странице продукта