Скачайте плагин с вашего BeRocket аккаунта.
Деактивируйте БЕСПЛАТНУЮ версию этого плагина.
Откройте панель администрирования вашего сайта и проследуйте в Плагины→ Добавить новый→ Загрузить плагин.
Нажмите Обзор, выберите загруженный zip-файл и нажмите Установить.
Нажмите Активировать.

Второй способ установки плагина:

Скачайте плагин с вашего BeRocket аккаунта.
Деактивируйте БЕСПЛАТНУЮ версию этого плагина.
Откройте ваш сайт через FTP.
Проследуйте в папку WordPress/wp-content/plugins.
Извлеките файлы из загруженного zip-файла и скопируйте файлы в папку WordPress/wp-content/plugins.
Откройте панель администрирования вашего сайта и проследуйте в Плагины.
Найдите Плагин и нажмите Активировать.

Ключ Аккаунта/Плагина

Ключ Аккаунта BeRocket и Ключ Плагина используются для автообновления плагинов сайта BeRocket.

Где найти Ключ Аккаунта?

Откройте сайт BeRocket и войдите в аккаунт (нажмите кнопку Login, которая находится в верхнем меню).
Перейдите в My Account (нажмите кнопку My Account, которая находится в верхнем меню).
В правой части страницы вы можете найти всю информацию о вашей учетной записи BeRocket, включая Ключ Аккаунта:
.
Вы можете нажать на Ключ Аккаунта и скопировать его.

Где найти Ключ Плагина?

Откройте сайт BeRocket и войдите в аккаунт (нажмите кнопку Login, которая находится в верхнем меню).
Перейдите в My Account (нажмите кнопку My Account, которая находится в верхнем меню).
Нажмите на значок ключа справа от имени плагина WooCommerce Advanced Product Labels:
Вы можете нажать на Ключ Аккаунта и скопировать его.
В левом поле введите любое уведомление для этого ключа и нажмите кнопку Готово, чтобы сохранить.

Активация Ключа Аккаунта/Плагина

Для введения Ключа Аккаунта/Плагина откройте панель администрирования вашего сайта и нажмите BeRocket → Ключ Аккаунта.

Как активировать Ключ Аккаунта?

Скопируйте Ключ Аккаунта с сайта BeRocket.
Вставьте этот ключ в поле Ключ Аккаунта.
Нажмите кнопку Тест.
Если вы используете правильный Ключ Аккаунта, вы увидите:
Нажмите кнопку Сохранить изменения.

Как активировать Ключ Плагина?

Скопируйте ключ плагина с сайта BeRocket.
Вставьте этот ключ в поле WooCommerce Advanced Product Labels.
Нажмите кнопку Тест.
Если вы используете правильный ключ плагина, вы увидите:
Нажмите кнопку Сохранить изменения.

Настройки

Для настройки WooCommerce Grid/List View проследуйте: Admin Bar→ WooCommerce→ Grid/List View.

Кнопки
Количество товара
Стиль списка
Пользовательский CSS/Javascript

Кнопки

Содержит настройки для кнопок сетки/списка.

Стиль по умолчанию:
- Сетка
- Список
Стиль по умолчанию (на мобильных):
- Сетка
- Список
Выбранный стиль для страниц:
- Страница
  - [SITE HOME]
  - [WOO SHOP]
  - [WOO CATEGORIES]
  - [WOO PRODUCTS]
  - Блог
  - Корзина
  - Страница заказа
  - Страница сравнение
  - База Знаний
  - Мой аккаунт
  - Экземпляр страницы
  - Магазин
  - Страница приветствия
- Вид
  - Сетка
  - Список
- На:
  - Мобильных и ПК
  - Мобильных
  - ПК
- Добавить страницу (добавить страницу, учитывая настройки выше).
Максимальная ширина на мобильных – ширина сетки/списка в пикселях.
Пользовательский класс – эта функция убирает все настройки с кнопок и добавляет этот класс.
Вывод кнопок – место, где будут показаны кнопки.
- Над сортировкой меню
- Под сортировкой меню
- Над пагинацией
Размещение кнопок – кнопки будут показаны слева/справа.
Отступы – отступы для кнопок сетки/списка в пикселях:
- Под кнопками (px)
- Над кнопками (px)
- Перед кнопками (px)
- После кнопок (px)
Шорткод:
- [br_grid_list]
  - title – название перед сеткой/списком
  - position – размещение слева или справа.
  - all_page – 1 или 0, отображается на любой странице или только странице магазина и категорий товаров.

Пресеты – содержит готовые стили для кнопок.

Пресеты с дополнительными настройками– содержит предопределенные настройки для стилей кнопок.

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

Для более детализированных настроек используйте следующие опции.

Стиль кнопок

Стили для кнопок: в обычном состоянии, при наведении и нажатии (px/em/%/initial/inherit).

Кнопки в обычном состоянии, при наведении и нажатии имеют подобные настройки.

Цвет фона

Ширина и цвет границы

Тень блока – применяйте эти настройки только если вы знаете как работает тень блока CSS3.

Все настройки можно сбросить к настройкам по умолчанию.

Количество товаров

Содержит опции для настройки количества товаров на страницу ссылки.

Использовать количество товаров – использовать ссылки для изменение количества товаров на страницу.
Пользовательский класс для кнопок – эта опция убирает все настройки с кнопок и добавляет этот класс.
Товары по умолчанию на страницу – количество товаров по умолчанию на страницу.
Значение количества товаров – список ссылок количества товаров (возможно использовать цифры и “все” (пример: “12,24,48,все”); максимальное количество товаров для “все” равно 400. Если у вас больше товаров, то “все” все равно будет 400).
Значение разделителя – знак или строка между ссылками количества товаров.
Текст – текст до или после ссылок количества товаров.
Вывод кнопок – место, где показаны ссылки:
- Над сортировкой меню
- Под сортировкой меню
- Над пагинацией
- Перед кнопками сетки/списка
- После кнопок сетки/списка
- Под кнопками сетки/списка
Размещение количества товаров – ссылка будет размещена справа или слева.

Стиль списка

Вы можете использовать Просто или Продвинутый стили списка.

Простой стиль списка

Вы можете редактировать только дополнительную информацию, которая размещена справа от изображения.
Изображение и кнопка “Добавить в корзину” используются по умолчанию в списке.

Превью стиля списка дополнительно информации находится справа на странице.

Вы можете редактировать любой элемент, выделенный желтым цветом при наведении мыши.

Нажмите на выделенный элемент для редактирования.

Продвинутый список стиля

Вы можете редактировать любой элемент списка этого стиля.
Выбирайте предопределенные шаблоны для облегчения работы со стилизацией списка.

Превью для стиля списка показано справа на странице.

Вы можете редактировать любой элемент, выделенный желтым цветом при наведении мыши.

Редактируемые единицы размещены слева.

CSS/JavaScript

Содержит настройки для пользовательского CSS/JavaScript кода, который будет добавлен на внешние страницы.

Отключить Font Awesome – не загружайте файл CSS для Font Awesome на сайт. Отключите его, только если вы не используете иконки Font Awesome в виджетах или у вас есть Font Awesome в вашей теме.
Версия Font Awesome – версия Font Awesome, которая будет использоваться в настройках и на страницах магазина. Пожалуйста, выберите версию, которая в вашей теме.
Пользовательский CSS – поле для пользовательского CSS. Содержит настройки пользовательского CSS кода, который будет отображен во внешнем интерфейсе. Пользовательский CSS – тот CSS, каким хотите его видеть вы.
JavaScript before list or grid style set
JavaScript after list or grid style set
JavaScript after list style set
JavaScript after grid style set
JavaScript before cookies get
JavaScript after cookies get
JavaScript before selected buttons Grid/List changed
JavaScript after selected buttons Grid/List changed
JavaScript before selected product count links changed
JavaScript after selected product count links changed
JavaScript before page reload on product count change
JavaScript before AJAX page reload on product count change
JavaScript after AJAX page reload on product count change (работает только с установленными WooCommerce AJAX Products Filter)

Для разработчиков

Хуки-события

includes/functions.php

br_get_woocommerce_version()

Общественная функция для получения версии WooCommerce.

return string. woocommerce version

br_lgv_get_cookie($position)

Общественная функция для получения версии WooCommerce.

$position – 0 или 1. 0 – список/сетка, 1 – количество товаров на страницу.

возвращаемая строка.

woocommerce-list-grid-view.php

Все эти функции находятся в классе BeRocket_LGV в качестве статических функций.

init ()

Функция инициализации скриптов и добавления кнопок.

set_styles ()

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

additional_product_data ()

Функция добавления дополнительных настроек страницы для использования в стиле списка.

br_get_template_part( $name = ” )

Получить часть шаблона (для шаблонов типа слайдера).

Шаблоны по умолчанию помещаются в папку плагинов woocommerce-grid-list-view/templates.

Для перезаписи шаблона в папке темы создайте папку с именем woocommerce-list_grid и поместите новый шаблон с таким же именем в эту папку.

show_buttons_fix ()

Отобразить кнопку Сетка/Список.

show_product_count_fix ()

Отобразить ссылки количества товара.

register_lgv_options ()

Добавить страницу параметров в админ-меню.

activation ()

Добавить настройки для активации плагина.

deactivation ()

Снять все настройки в плагине.

lgv_simple_before

Используется для отображения информации до списка простого стиля.

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

<?php
function my_block_lgv_simple_before () {
//your code here
}

add_action( 'lgv_simple_before', 'my_block_lgv_simple_before' );
?>

lgv_simple_after_product_name

Используется для отображения информации после списка простого стиля.

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

<?php
function my_block_lgv_simple_after_product_name () {
//your code here
}

add_action( 'lgv_simple_after_product_name', 'my_block_lgv_simple_after_product_name' );
?>

lgv_simple_after_description

Используется для отображения информации после описания товара в списке простого стиля.

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

<!-- wp:paragraph -->
<p><strong>Usage</strong></p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code><?php
function my_block_lgv_simple_after_description () {
//your code here
}

add_action( 'lgv_simple_after_description', 'my_block_lgv_simple_after_description' );
?></code></pre>
<!-- /wp:code -->

lgv_simple_after_meta

Используется для отображения информации перед мета данными товара в списке простого стиля.

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

<?php
function my_block_lgv_simple_after_meta () {
//your code here
}

add_action( 'lgv_simple_after_meta', 'my_block_lgv_simple_after_meta' );
?>

lgv_simple_after

Используется для отображения информации после списка простого стиля.

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

<?php
function my_block_lgv_simple_after () {
//your code here
}

add_action( 'lgv_simple_after', 'my_block_lgv_simple_after' );
?>

lgv_advanced_before

Используется для отображения информации до списка продвинутого списка.

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

<?php
function my_block_lgv_advanced_before () {
//your code here
}

add_action( 'lgv_advanced_before', 'my_block_lgv_advanced_before' );
?>

lgv_advanced_before_img

Используется для отображения информации перед изображением товара в списке продвинутого стиля.

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

<?php
function my_block_lgv_advanced_before_img () {
//your code here
}

add_action( 'lgv_advanced_before_img', 'my_block_lgv_advanced_before_img' );
?>

lgv_advanced_after_img

Используется для отображения информации после изображения товара в списке продвинутого стиля.

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

<?php
function my_block_lgv_advanced_after_img () {
//your code here
}

add_action( 'lgv_advanced_after_img', 'my_block_lgv_advanced_after_img' );
?>

lgv_advanced_before_product_name

Используется для отображения информации до названия товара в списке продвинутого стиля.

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

<?php
function my_block_lgv_advanced_before_product_name () {
//your code here
}

add_action( 'lgv_advanced_before_product_name', 'my_block_lgv_advanced_before_product_name' );
?>

lgv_advanced_before_description

Используется для отображения информации до описания товара в списке продвинутого стиля.

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

<?php
function my_block_lgv_advanced_before_description () {
//your code here
}

add_action( 'lgv_advanced_before_description', 'my_block_lgv_advanced_before_description' );
?>

lgv_advanced_before_meta

Используется для отображения информации перед мета данными товара в списке с продвинутым стилем.

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

<?php
function my_block_lgv_advanced_before_meta () {
//your code here
}

add_action( 'lgv_advanced_before_meta', 'my_block_lgv_advanced_before_meta' );
?>

lgv_advanced_before_price

Используется для отображения информации перед ценой товара в списке с продвинутым стилем.

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

<?php
function my_block_lgv_advanced_before_price () {
//your code here
}

add_action( 'lgv_advanced_before_price', 'my_block_lgv_advanced_before_price' );
?>

lgv_advanced_after

Используется для отображения информации после списка продвинутого стиля.

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

<?php
function my_block_lgv_advanced_after () {
//your code here
}

add_action( 'lgv_advanced_after', 'my_block_lgv_advanced_after' );
?>

br_lgv_before_list_grid_buttons

Используется для отображения информации перед кнопкой Изменить стиль Сетка/Список.

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

<?php
function my_block_br_lgv_before_list_grid_buttons () {
//your code here
}

add_action( 'br_lgv_before_list_grid_buttons', 'my_block_br_lgv_before_list_grid_buttons' );
?>

br_lgv_after_list_grid_buttons

Используется для отображения информации после кнопки Изменить стиль Сетка/Список.

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

<?php
function my_block_br_lgv_after_list_grid_buttons () {
//your code here
}

add_action( 'br_lgv_after_list_grid_buttons', 'my_block_br_lgv_after_list_grid_buttons' );
?>

lgv_before_product_count_links

Используется для отображения информации перед ссылками, чтобы изменить количество товара.

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

<?php
function my_block_lgv_before_product_count_links () {
//your code here
}

add_action( 'lgv_before_product_count_links', 'my_block_lgv_before_product_count_links' );
?>

lgv_after_product_count_links

Используется для отображения информации после ссылок, чтобы изменить количество товара.

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

<?php
function my_block_lgv_after_product_count_links () {
//your code here
}

add_action( 'lgv_after_product_count_links', 'my_block_lgv_after_product_count_links' );
?>

Хуки-фильтры

berocket_lgv_user_func

Вы можете изменить или добавить Javascript к особым действиям. Все эти функции могут быть добавлены пользователями в настройках плагина.

Параметры

user_func – массив с пользовательскими Javascript функциями, которые можно установить в настройках плагина.
- before_style_set – скрипт до набора стилей списка или сети
- after_style_set – скрипт после набора стилей списка или сети
- after_style_list – скрипт после набора стилей списка
- after_style_grid – скрипт после набора стилей сети
- before_get_cookie – скрипт до получения cookies
- after_get_cookie – скрипт после получения cookies
- before_buttons_reselect – скрипт до кода изменения кнопок Сетка/Список
- after_buttons_reselect – скрипт после кода изменения кнопок Сетка/Список
- before_product_reselect – скрипт до изменения ссылок на количество товара
- after_product_reselect – скрипт после изменения ссылок на количество товара
- before_page_reload – скрипт до перезагрузки страницы при изменении количества товара
- before_ajax_product_reload – скрипт до перезагрузки AJAX страницы при изменении количества товара
- after_ajax_product_reload – скрипт после перезагрузки AJAX страницы при изменении количества товара

lgv_product_data_template

Название шаблона для стиля списка.

Параметры

template_name – текущее название шаблона, используемое по умолчанию: ‘additional_product_data_advanced’ and ‘additional_product_data’

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

<?php
function change_lgv_product_data_template ( $template_name ) {
//your code here
    return $template_name;
}

add_filter( 'lgv_product_data_template', 'change_lgv_product_data_template' );
?>

lgv_product_classes

Классы для товаров, которые содержат стиль списка.

Параметры

classes – все классы, которые будут добавлены к товару.

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

<?php
function change_lgv_product_classes ( $classes ) {
//your code here
    return $classes;
}

add_filter( 'lgv_product_classes', 'change_lgv_product_classes' );
?>

lgv_get_template_part

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

Параметры

template – ссылка на шаблон, который будет загружен.
name – название шаблона.

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

<?php
function change_lgv_get_template_part ( $template, $name ) {
//your code here
    return $template;
}

add_filter( 'lgv_get_template_part', 'change_lgv_get_template_part', 10, 2 );
?>

lgv_buttons_position

Размещение кнопки для изменения стиля Сетка/Сетка, может быть “слева” или ”справа”.

Параметры

position – текущее размещение в настройках плагина.

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

<?php
function change_lgv_buttons_position ( $position ) {
//your code here
    return $position;
}

add_filter( 'lgv_buttons_position', 'change_lgv_buttons_position' );
?>

lgv_buttons_padding

Отступы вокруг кнопки для изменения стиля Сетка/Список.

Параметры

paddings – array with paddings:
- top – padding from top
- bottom – padding from bottom
- left – padding from left
- right – padding from right

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

<?php
function change_lgv_buttons_padding ( $paddings ) {
//your code here
    return $paddings;
}

add_filter( 'lgv_buttons_padding', 'change_lgv_buttons_padding' );
?>

lgv_buttons_custom_class

Пользовательский класс для кнопки изменения стиля Сетка/Список.

Параметры

класс – строка с пользовательским классом.

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

<?php
function change_lgv_buttons_custom_class ( $class ) {
//your code here
    return $class;
}

add_filter( 'lgv_buttons_custom_class', 'change_lgv_buttons_custom_class' );
?>

lgv_buttons_template

Название шаблона для кнопки изменения стиля Сетка/Список.

Параметры

шаблон – строка с названием шаблона.

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

<!-- wp:paragraph -->
<p><strong>Usage</strong></p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code><?php
function change_lgv_buttons_template ( $template ) {
//your code here
    return $template;
}

add_filter( 'lgv_buttons_template', 'change_lgv_buttons_template' );
?></code></pre>
<!-- /wp:code -->

lgv_product_count_position

Размещение для ссылок на количество товаров, может быть размещено “слева” или “справа”.

Параметры

размещение – текущее положение в настройках плагина.

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

<?php
function change_lgv_product_count_position ( $position ) {
//your code here
    return $position;
}

add_filter( 'lgv_product_count_position', 'change_lgv_product_count_position' );
?>

lgv_product_count_custom_class

Пользовательский класс для ссылок на количество товаров.

Параметры

класс – строка с пользовательским классом.

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

<?php
function change_lgv_product_count_custom_class ( $class ) {
//your code here
    return $class;
}

add_filter( 'lgv_product_count_custom_class', 'change_lgv_product_count_custom_class' );
?>

lgv_product_count_template

Название шаблона для ссылок на количество продуктов.

Параметры

шаблон – строка с названием шаблона.

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

<?php
function change_lgv_product_count_template ( $template ) {
//your code here
    return $template;
}

add_filter( 'lgv_product_count_template', 'change_lgv_product_count_template' );
?>

lgv_product_count_values

Значения для ссылок на количество товаров.

Параметры

значение – значения строки (Разделитель: , ). Например: “12,24,48,все”.

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

<?php
function change_lgv_product_count_values ( $values ) {
//your code here
    return $values;
}

add_filter( 'lgv_product_count_values', 'change_lgv_product_count_values' );
?>

lgv_widget_title

Название для виджетов с кнопками.

Параметры

title – строка с названием.

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

<?php
function change_lgv_widget_title ( $title ) {
//your code here
    return $title;
}

add_filter( 'lgv_widget_title', 'change_lgv_widget_title' );
?>

lgv_widget_custom_class

Пользовательский класс для кнопки изменения стиля Сетка/Список в виджетах.

Параметры

class – строка с пользовательским класс.

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

<?php
function change_lgv_widget_custom_class ( $class ) {
//your code here
    return $class;
}

add_filter( 'lgv_widget_custom_class', 'change_lgv_widget_custom_class' );
?>

lgv_widget_template

Название шаблона для кнопки изменения стиля Сетка/Список в виджетах.

Параметры

template – строка с названием шаблона.

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

<?php
function change_lgv_widget_template ( $template ) {
//your code here
    return $template;
}

add_filter( 'lgv_widget_template', 'change_lgv_widget_template' );
?>

Файлы

woocommerce-list-grid-view.php – основной файл плагина
css – стили плагина:
- admin_lgv.css – стили для настроек плагина
- colpick.css – стили для блока выбора цветов
- font-awesome.css – стандартные стили Font Awesome
- shop_lgv.css – стили внешнего интерфейса
fonts – шрифты Font Awesome
includes – папка с дополнительными файлами PHP
- functions.php – общественные функции
- updater.php – BeRocket Updater для обновления плагинов с сайта BeRocket
- widget.php – виджет для кнопок Сетка/Список
js – папка с файлами Javascript
- admin_lgv.js – скрипты для настроек плагина
- colpick.js – скрипты для настроек блока выбора цвета плагина
- grid_view.js – скрипты для внешнего интерфейса
- jquery.cookie.js – jQuery плагин для cookie-файлов
templates – шаблоны для настроек, стиля списка и кнопок
- additional_product_data.php – шаблоны для простого стиля списка
- additional_product_data_advanced.php – шаблоны для стиля продвинутого списка
- buttons_settings.php – шаблон для вкладки “Кнопки” в настройках
- css_settings.php – шаблон для вкладки CSS в настройках
- javascript_settings.php – шаблон для вкладки Javascript в настройках
- license_settings.php – шаблон для вкладки License в настройках
- list-grid.php – шаблон для изменения кнопок Сетка/Список
- liststyle_settings.php – шаблон для вкладки Стиль/Список в настройках
- product_count.php – шаблон ссылок на количество товара
- product_count_settings.php – шаблон для вкладки Количество товара в настройках
- settings.php – настройки главной страницы плагина