Для пользователей

Установка Бесплатной Версии

Настройки

Глобальные настройки

Стиль

WooCommerce Product Preview

Для пользователей

Установка Бесплатной Версии

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

Скачайте плагин с сайта berocket.com или wordpress.org.
Откройте админ-панель вашего сайта и проследуйте: Plugins (Плагины)→ Add new (Добавить новый)→ Upload plugin (Загрузить плагин).
Нажмите Обзор, выберите загруженный zip-файл и нажмите Установить (Install).
Нажмите Активировать плагин (Activate Plugin).

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

Скачайте плагин с сайта berocket.com или wordpress.org.
Откройте ваш сайт через FTP.
Проследуйте в папку WordPress/wp-content/plugins folder.
Извлеките файлы с загруженного zip-файла и скопируйте файлы в папку WordPress/wp-content/plugins.
Откройте админ-панель вашего сайта и проследуйте в Плагины.
Найдите Плагин и нажмите Активировать.

Настройки

Настройки WooCommerce Products Compare находятся здесь: админ-панель→ WooCommerce→ Product Preview.

Глобальные настройки
Стиль
Текст
CSS/JavaScript
Лицензия

Глобальные настройки

Использовать быстрый просмотр – включает плагин
Положение кнопки:
- Перед всем
- После изображения
- После названия
- После Цены
- После кнопки Добавить в корзину
Стиль отображения – стиль окна предпросмотра:
- Показать/Спрятать – показывает и прячет окно в блоке товара. Использует настройки кнопок и стиля текста по умолчанию.
- Копировать данные – скопировать окно превью. Не использует стили по умолчанию, но может устранить сложность с размещением окна.
Отображение на просмотре товара – то, что будет отображаться на просмотре товара, вы можете сортировать отображаемое с помощью перетаскивания, выбрать желаемый порядок.
- Изображение товара
- Название товара
- Кнопки товара – все кнопки, которые отображаются под товарами
- Описание товара
- Мета-данные товара – тэги и категории товаров
- Цена товара – актуальная цена товара и обычная цена
- Галерея товаров
- Полное описание товара
- Сопутствующие товары, Количество товара
- Кнопка BeRocket Добавить в список желаний
- Кнопка BeRocket Добавить в список ожидания
- Кнопка BeRocket Добавить в список желаний/ожидания.
Спрятать BeRocket Advanced Labels (Этикетки)

Стиль

Стиль предпросмотра

Цвет
- Цвет фона – цвет фона окна предварительного просмотра товара
- Цвет границы – цвет границы окна предварительного просмотра товара
- Цвет текста – цвет текста в окне предварительного просмотра товара
- Цвет ссылки – цвет ссылки в окне предварительного просмотра товара
- Цвет ссылки при наведении курсора мыши – цвет ссылки в окне предварительного просмотра товара при наведении курсора мыши
- Цвет цены – цвет цены в окне предварительного просмотра товара
- Цвет кнопки закрытия – цвет шрифта на кнопке закрытия
- Цвет фона кнопки закрытия – цвет фона кнопки закрытия
- Цвет кнопки закрытия при наведении курсора мыши – цвет шрифта на кнопке закрытия при наведении курсора мыши
- Цвет фона кнопки закрытия при наведении курсора мыши – цвет фона кнопки закрытия при наведении курсора мыши
- Цвет границы кнопки закрытия – цвет границы вокруг кнопки закрытия
- Цвет фона быстрого просмотра – цвет фона для кнопки предварительного просмотра товара
- Цвет фона быстрого просмотра при наведении курсора мыши – цвет фона для кнопки предварительного просмотра товара, при наведении курсора мыши
- Быстрый просмотр цвета текста – цвет шрифта для предварительного просмотра товара
- Быстрый просмотр цвета текста при наведении курсора – цвет шрифта для кнопки предварительного просмотра товара, при наведении курсора мыши
- Цвет границы быстрого просмотра – цвет границы для кнопки предварительного просмотра товара
- Цвет фона кнопок Следующая и Предыдущая – цвет фона для кнопок Следующая и Предыдущая в окне предварительного просмотра товара
- Цвет шрифта кнопок Следующая и Предыдущая – цвет шрифта для кнопок Следующая и Предыдущая на странице предварительного просмотра товара
- Цвет границы кнопок Следующая и Предыдущая – цвет границы для кнопок Следующая и Предыдущая в окне предварительного просмотра товара
- Цвет фона кнопок Следующая и Предыдущая при наведении курсора мыши – цвет фона кнопок Следующая и Предыдущая на просмотре товара, при наведении курсора мыши
- Цвет шрифта следующей и предыдущей кнопки при наведении курсора мыши – цвет шрифта для следующей и предыдущей кнопки на просмотре товара, при наведении курсора мыши
- Цвет границы кнопок Следующая и Предыдущая при наведении курсора мыши – цвет границы для кнопок Следующая и Предыдущая при наведении курсора мыши.
Размер – размер окна предварительного просмотра товара/ По умолчанию
- Размер
  - Текст – размер текста
  - Ссылка – размер текста ссылок
  - Цена – размер текста цены
  - Ширина изображения – ширина изображения товара
  - Размещение изображения – размещение изображения товара
- Отступ вокруг окна предварительного просмотра – отступ вокруг окна предварительного просмотра товара черным цветом/ По умолчанию
  - Сверху
  - Снизу
  - Слева
  - Справа
- Отступ от границы к тексту в средние – отступ внутри окна просмотра товара/ По умолчанию
  - Сверху
  - Снизу
  - Слева
  - Справа
- Граница вокруг окна предварительного просмотра – граница для окна предварительного просмотра товара/ По умолчанию
  - Сверху
  - Снизу
  - Слева
  - Справа
- Отступ вокруг изображения – отступ между изображением товара и другими элементами/ По умолчанию
  - Сверху
  - Снизу
  - Слева
  - Справа
- Размещение кнопки Закрыть – размещение кнопки Закрыть по отношению к границе окна предварительного просмотра товара/ По умолчанию
  - Сверху
  - Снизу
  - Слева
  - Справа
- Размер кнопки Закрыть – размеры кнопки закрытия/ По умолчанию
  - Ширина – ширина кнопки Закрыть
  - Высота – высота кнопки Закрыть
  - Высота линии – высота линии по умолчанию равна Высоте.
  - Размер текста – размер шрифта
  - Закругление угла – круглый для всех углов
- Граница вокруг кнопки Закрыть – ширина рамки вокруг кнопки Закрыть/ По умолчанию
  - Сверху
  - Снизу
  - Слева
  - Справа
- Кнопка быстрого просмотра – размеры для кнопок предварительного просмотра товара/ По умолчанию
  - Ширина – ширина для кнопки
  - Высота – высота для кнопки
  - Ширина границы – ширина границы кнопки
  - Размер шрифта
- Отступы кнопки быстрого просмотра – отступы внутри кнопки предварительного просмотра товара, от границы кнопки до текста кнопки/ По умолчанию
  - Сверху
  - Снизу
  - Слева
  - Справа
- Поля кнопки быстрого просмотра – поля вокруг кнопки предварительного просмотра товара/ По умолчанию
  - Сверху
  - Снизу
  - Слева
  - Справа
- Изображения галереи – размеры для изображений галереи на предварительном просмотре
  - Ширина – ширина изображения
  - Минимальная ширина – минимальная ширина изображения
  - Ширина границы – ширина границы для изображений
- Поля изображений галереи – поля вокруг изображений галереи/ По умолчанию
  - Сверху
  - Снизу
  - Слева
  - Справа
- Размещение кнопки Следующая – размещение кнопки на странице/ По умолчанию
  - Сверху
  - Снизу
  - Слева
  - Справа
- Размещение кнопки Следующая – размещение кнопки Следующая на предварительном просмотре/ По умолчанию
  - Высота – высота кнопки Следующая
  - Ширина – ширина кнопки Следующая
  - Размер шрифта – размер шрифта кнопки Следующая
  - Радиус границы – радиус границы кнопки Следующая
- Ширина границы кнопки Следующая – ширина границы кнопки/ По умолчанию
  - Сверху
  - Снизу
  - Слева
  - Справа
- Положение кнопки Предыдущая – положение кнопки на странице/ По умолчанию
  - Сверху
  - Снизу
  - Слева
  - Справа
- Размер кнопки Предыдущая – размеры для предыдущей кнопки на предварительном просмотре/ По умолчанию
  - Высота – высота для предыдущей кнопки
  - Ширина – ширина для предыдущей кнопки
  - Размер шрифта – размер шрифта для предыдущей кнопки
  - Радиус границы – радиус границы для предыдущей кнопки
- Ширина границы кнопки – ширина границы кнопки/По умолчанию
  - Сверху
  - Снизу
  - Слева
  - Справа
- Размещение иконок Следующая и Предыдущая – размещение иконки на кнопке/ По умолчанию
  - Вертикальное выравнивание кнопки Предыдущая
    - Сверху
    - Посередине
    - Снизу
  - Горизонтальное выравнивание кнопки Предыдущая
    - Слева
    - По центру
    - Справа
  - Вертикальное выравнивание кнопки Следующая
    - Сверху
    - Посередине
    - Снизу
  - Горизонтальное выравнивание кнопки Следующая
    - Сверху
    - Посередине
    - Снизу

Текст

Кнопка предварительного просмотра товара – текст на кнопке под товаром, для показа окна предварительного просмотра товара.

CSS/JavaScript

Отключить Font Awesome – не загружайте файл CSS для Font Awesome на сайт. Отключите его, только если вы не используете иконки Font Awesome в виджетах или у вас есть Font Awesome в вашей теме.
Версия Font Awesome – версия Font Awesome, которая будет использоваться в настройках и на страницах магазина. Пожалуйста, выберите версию, которая в вашей теме.
Пользовательский CSS – поле для пользовательского CSS. Содержит настройки пользовательского CSS кода, который будет отображен во внешнем интерфейсе. Пользовательский CSS – тот CSS, каким хотите его видеть вы.
Перед Открытием – поле для пользовательского Javascript, который выполнится перед открытием окна предварительного просмотра товара.
При Открытием – поле для пользовательского Javascript, который выполнится при открытии окна предварительного просмотра товара.
До Закрытия – поле для пользовательского Javascript, который выполнится до закрытия окна предварительного просмотра товара.

Настройки под тему

Divi

Настройки пользовательского CSS

Откройте панель администрирования вашего сайта и проследуйте в WooCommerce→ Product Preview→ Custom CSS/JavaScript.

Добавьте этот CSS в поле “User custom CSS style”:

.et_full_width_page.woocommerce-page ul.products li.product:nth-child(4n+1), .et_left_sidebar.woocommerce-page ul.products li.product:nth-child(3n+1), .et_right_sidebar.woocommerce-page ul.products li.product:nth-child(3n+1) 
{
    clear: none;
}

.et_full_width_page.woocommerce-page ul.products li.product:nth-child(8n+1), .et_left_sidebar.woocommerce-page ul.products li.product:nth-child(6n+1), .et_right_sidebar.woocommerce-page ul.products li.product:nth-child(6n+1) 
{
    clear: both;
}

Twenty Seventeen

Настройки пользовательского CSS

Откройте панель администрирования вашего сайта и проследуйте в WooCommerce→ Product Preview→ Custom CSS/JavaScript.

Добавьте этот CSS в поле “User custom CSS style”:

.br_product_preview_button 
{
    display: inline-block;
}

X

Настройки пользовательского CSS

Откройте панель администрирования вашего сайта и проследуйте в WooCommerce→ Product Preview→ Custom CSS/JavaScript.

Добавьте этот CSS в поле “User custom CSS style”:

.berocket_preview_content .thumbnails a.zoom
{
    display: inline-block;
    width: 25%;
}
.berocket_preview_content .images
{
    width:25%;
    float:left;
}

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

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

includes/functions.php

br_get_woocommerce_version()

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

return string. woocommerce version

br_is_plugin_active( $plugin_name, $version = ‘1.0.0.0’, $version_end = ‘9.9.9.9’ )

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

$plugin_name – список названий плагина:
- фильтры – WooCommerce AJAX Products Filter
- список-сетка – WooCommerce Grid/List View
- больше товаров – WooCommerce Load More Products
$version – минимальная версия плагина
$version_end – максимальная версия плагина

return boolean. if plugin with this version activated

product-preview.php

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

init ()

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

br_get_template_part( $name = ” )

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

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

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

get_preview_button()

Отобразить кнопку быстрого просмотра и скрытую кнопку предварительного просмотра товара в цикле товаров.

berocket_pp_before_preview_button

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

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

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

add_action( 'berocket_pp_before_preview_button', 'my_block_berocket_pp_before_preview_button' );
?>

berocket_pp_after_preview_button

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

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

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

add_action( 'berocket_pp_after_preview_button', 'my_block_berocket_pp_after_preview_button' );
?>

berocket_pp_popup_before_image

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

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

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

add_action( 'berocket_pp_popup_before_image', 'my_block_berocket_pp_popup_before_image' );
?>

berocket_pp_popup_after_image

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

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

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

add_action( 'berocket_pp_popup_after_image', 'my_block_berocket_pp_popup_after_image' );
?>

berocket_pp_popup_before_title

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

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

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

add_action( 'berocket_pp_popup_before_title', 'my_block_berocket_pp_popup_before_title' );
?>

berocket_pp_popup_after_title

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

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

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

add_action( 'berocket_pp_popup_after_title', 'my_block_berocket_pp_popup_after_title' );
?>

berocket_pp_popup_before_buttons

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

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

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

add_action( 'berocket_pp_popup_before_buttons', 'my_block_berocket_pp_popup_before_buttons' );
?>

berocket_pp_popup_after_buttons

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

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

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

add_action( 'berocket_pp_popup_after_buttons', 'my_block_berocket_pp_popup_after_buttons' );
?>

berocket_pp_popup_before_description

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

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

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

add_action( 'berocket_pp_popup_before_description', 'my_block_berocket_pp_popup_before_description' );
?>

berocket_pp_popup_after_description

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

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

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

add_action( 'berocket_pp_popup_after_description', 'my_block_berocket_pp_popup_after_description' );
?>

berocket_pp_popup_before_meta

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

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

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

add_action( 'berocket_pp_popup_before_meta', 'my_block_berocket_pp_popup_before_meta' );
?>

berocket_pp_popup_after_meta

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

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

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

add_action( 'berocket_pp_popup_after_meta', 'my_block_berocket_pp_popup_after_meta' );
?>

berocket_pp_popup_before_price

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

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

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

add_action( 'berocket_pp_popup_before_price', 'my_block_berocket_pp_popup_before_price' );
?>

berocket_pp_popup_after_price

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

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

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

add_action( 'berocket_pp_popup_after_price', 'my_block_berocket_pp_popup_after_price' );
?>

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

berocket_pp_user_func

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

Параметры

functions – массив с пользовательскими функциями

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

<?php
function change_berocket_pp_user_func ( $functions ) {
//your code here
    return $functions;
}

add_filter( 'berocket_pp_user_func', 'change_berocket_pp_user_func' );
?>

product_preview_get_template_part

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

Параметры

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

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

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

add_filter( 'product_preview_get_template_part', 'change_product_preview_get_template_part', 10, 2 );
?>

berocket_pp_preview_button_classes

Фильтр для изменения или удаления классов в окне предварительного просмотра

Параметры

classes – строка с классами

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

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

add_filter( 'berocket_pp_preview_button_classes', 'change_berocket_pp_preview_button_classes' );
?>

berocket_pp_custom_css

Фильтр для пользовательского CSS

Параметры

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

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

<?php
function change_berocket_pp_custom_css ( $css ) {
//your code here
    return $css;
}

add_filter( 'berocket_pp_custom_css', 'change_berocket_pp_custom_css' );
?>

Файлы

product-preview.php – основной файл плагина
css – стили плагина:
- admin.css – стили для настроек плагина
- colpick.css – стили для блока выбора цвета
- font-awesome.css – стандартные стили Font Awesome
- product_preview.css – стили фронт-энд
- select_fa.css – стили для селектора Font Awesome
fonts – шрифты Font Awesome
includes – папка с дополнительными файлами PHP
- functions.php – общественные функции
- updater.php – BeRocket Updater для обновления плагинов с сайта BeRocket
js – папка с файлами JavaScript
- admin.js – скрипты для настроек плагина
- admin_select_fa.js – JavaScript для селектора Font Awesome
- colpick.js – скрипты для настроек блока подборки цвета плагина
- product_preview.js – JavaScript для внешнего интерфейса
templates – шаблоны для настроек, стиля списка и кнопок
- general_settings.php – шаблон для настройки вкладки Кнопки
- javascript_settings.php – шаблон для вкладки JavaScript в настройках
- license_settings.php – шаблон для вкладки Лицензия в настройках
- preview.php – окно предварительного просмотра
- settings.php – настройки главной страницы плагина
- style_settings.php – шаблон для настройки вкладки Стиль
- text_settings.php – шаблон для настройки вкладки Текст