For Users

Installation

First way to install plugin:

  1. Download plugin from your BeRocket account
  2. Open your site admin panel and go to Plugins -> Add New -> Upload Plugin
  3. Click Browse and select downloaded zip file and click Install Now
  4. Click Activate Plugin

 

Second way to install plugin:  

  1. Download plugin from your BeRocket account
  2. Open your site via FTP
  3. Go to WordPress folder/wp-content/plugins
  4. Extract files from downloaded zip file and copy extracted folders to plugins folder
  5. Open your site admin panel and go to Plugins
  6. Find WooCommerce Product Preview and click Activate under it

Setup

Account/Product Key

BeRocket Account and Product key uses for auto update plugins from BeRocket site.

Where can you find Account Key?

  1. Open BeRocket site and Login (The Login button you can find in header menu)
  2. Go to My Account (The My Account button you can find in header menu)
  3. From right side on page you can find all information about your BeRocket account including Account Key

  4. You can click on account key and copy it
  5. What can you do with Account Key?

Where can you find Product Key?

  1. Open BeRocket site and Login (The Login button you can find in header menu)
  2. Go to My Account (The My Account button you can find in header menu)
  3. Click on key icon on right side from plugin name WooCommerce Pagination Styler

  4. You can click on Product key and copy it
  5. In left field you can type any notice for this key and click DONE to save
  6. What can you do with Product Key?

Settings

WooCommerce Products Compare have settings in Admin Panel -> WooCommerce -> Pagination Styler

General

  • Use quick view - enable plugin
  • Display style - style of preview window
    • Show/Hide - show and hide window on product block. Use default button and text styles.
    • Clone - clone preview window to body and show. Didn't use default styles, but fix all issue with window position.
  • Display on product preview - what will be displayed on product preview, you can sort it with help of drag and drop
    • Product image - image of product.
    • Product title - name of product
    • Product buttons - all buttons that displayed under products
    • Product description - product description
    • Product meta - product tags and categories
    • Product price - product current price and regular price

Style

  • Background color - product preview window background color
  • Border color - product preview window border color
  • Text color - text color on product preview window
  • Link color - link color on product preview window
  • Link color when mouse over - link color on product preview window when mouse over link
  • Price color - price color on product preview window
  • Close button color - font color on close button
  • Close button background color - close button background color
  • Close button color when mouse over - font color on close button when mouse over button
  • Close button background color when mouse over - close button background color when mouse over button
  • Close button border color - border color around close button
  • Quick view background color - background color for product preview button
  • Quick view background color when mouse over - background color for product preview button, when mouse over button
  • Quick view text color - font color for product preview button
  • Quick view text color when mouse over - font color for product preview button, when mouse over button
  • Quick view border color - border color for product preview button
  • Next and Previous button background color - background color for next and previous button on products preview
  • Next and Previous button font color - font color for next and previous button on products preview
  • Next and Previous button border color - border color for next and previous button on products preview
  • Next and Previous button background color when mouse over - background color for next and previous button on products preview, when mouse over button
  • Next and Previous button font color when mouse over - font color for next and previous button on products preview, when mouse over button
  • Next and Previous button border color when mouse over - border color for next and previous button on products preview, when mouse over button
  • Size - sizes for product preview window
    • Text - text size
    • Link - text size on links
    • Price - text size on price
    • Image width - width of product image
    • Image position - position of product image
  • Padding around preview - padding around product preview window with black color
  • Padding from border to text inside - padding inside product preview window
  • Border around preview - border for product preview window
  • Padding around image - padding between product image and other elements
  • Close button position - close button position from product preview window border
  • Close button size - sizes for close button
    • Width - close button width
    • Height - close button height
    • Line Height - line height same as height by default
    • Text size - font size
    • Corner round - round for all corners
  • Border around close button - border width around close button
  • Quick view button - sizes for product preview buttons
    • Width - width for button
    • Height - height for button
    • Border width - border width for button
  • Quick view button paddings - paddings inside product preview buttons, from button border to button text
  • Quick view button margin - paddings around product preview buttons
  • Gallery images - sizes for gallery images on preview
    • Width - image width
    • Minimum width - image minimum width
    • Border width - border width for images
  • Gallery images margin - paddings around gallery images
  • Next button position - position of button on page
  • Next button size - sizes for next button on preview
    • Height - height for next button
    • Width - width for next button
    • Font size - font size for next button
    • Border radius - border corner radius for next button
  • Next border width - next button border width
  • Previous button position - position of button on page
  • Previous button size - sizes for previous button on preview
    • Height - height for previous button
    • Width - width for previous button
    • Font size - font size for previous button
    • Border radius - border corner radius for previous button
  • Previous border width - previous button border width
  • Previous and next icon position - icon position on button

Text

  • Product preview button - text on button under product to show product preview window

CSS / JavaScript

  • Custom CSS - Custom CSS that adds to pages
  • Before Open - JavaScript that execute before open product preview window
  • On Open - JavaScript that execute right after open product preview window
  • After Close - JavaScript that execute after product preview window close

License

Plugin key - uses for updates plugin from BeRocket site. You can get this on BeRocket site -> My Account page on click key icon

BeRocket Account

BeRocket account settings are in Admin Panel -> Settings -> BeRocket Account.

Contains field for place BeRocket Account Key

Where can you find Account Key?

  1. Copy Account Key from BeRocket site
  2. Paste this key to Account key field
  3. Press Test button
  4. If you use right Account Key you will see

  5. Then press Save button

For Developers

Action hooks

berocket_pp_before_preview_button

Used for display information before Quick View button

Usage

<?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

Used for display information after Quick View button

Usage

<?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

Used for display information before image on product preview window

Usage

<?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

Used for display information after image on product preview window

Usage

<?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

Used for display information before product title on product preview window

Usage

<?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

Used for display information after product title on product preview window

Usage

<?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

Used for display information before buttons on product preview window

Usage

<?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

Used for display information after buttons on product preview window

Usage

<?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

Used for display information before product description on product preview window

Usage

<?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

Used for display information after product description on product preview window

Usage

<?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

Used for display information before product meta on product preview window

Usage

<?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

Used for display information after product meta on product preview window

Usage

<?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

Used for display information before product price on product preview window

Usage

<?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

Used for display information after product price on product preview window

Usage

<?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' );
?>

Filter hooks

berocket_pp_user_func

Filter for user functions

Parameters

  1. functions - array with user functions

Usage

<?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 that uses in plugin.

Parameters

  1. template - link to template that will be loaded.
  2. name - template name.

Usage

<?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

Filter for change or remove classes on Quick View button

Parameters

  1. classes - string with classes

Usage

<?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

Filter for user custom CSS

Parameters

  1. css - string with user custom CSS code

Usage

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

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

Functions

includes/functions.php

br_get_woocommerce_version()

Public function to get WooCommerce version

return string. woocommerce version

br_is_plugin_active( $plugin_name, $version = '1.0.0.0', $version_end = '9.9.9.9' )

Public function to check is plugin activated.

  • $plugin_name - list of plugin name:
    • filters - WooCommerce AJAX Products Filter
    • list-grid - WooCommerce Grid/List View
    • more-products - WooCommerce Load More Products
  • $version - minimum plugin version
  • $version_end - maximum plugin version

 return boolean. is plugin with this version activated

product-preview.php

All of these functions is in class BeRocket_Product_Preview as static functions.

init ()

Function for initialize scripts.

br_get_template_part( $name = '' )

Get template part (for templates like the slider).

Default templates places in plugins folder woocommerce-product-preview/templates.

To rewrite the template in your theme folder create folder with name woocommerce-product-preview and places new template with identical name in this folder.

get_preview_button()

Display Quick View button and hidden product preview window in products loop.

Options

All settings you can find in BeRocket_Product_Preview class in static variables $defaults.

    public static $defaults = array(
        'br_product_preview_general_settings'       => array(
            'use'                                       => '1',
            'style'                                     => 'show',
            'show'                                      => array(
                'image'                                     => '1',
                'title'                                     => '1',
                'buttons'                                   => '1',
                'description'                               => '1',
                'meta'                                      => '1',
                'price'                                     => '1',
            ),
        ),
        'br_product_preview_style_settings'         => array(
            'block'                                     => array(
                'background-color'                          => 'ffffff',
                'border-color'                              => '000000',
                'margin-top'                                => '20',
                'margin-bottom'                             => '20',
                'margin-left'                               => '5%',
                'margin-right'                              => '5%',
                'border-top-width'                          => '0',
                'border-bottom-width'                       => '0',
                'border-left-width'                         => '0',
                'border-right-width'                        => '0',
            ),
            'content'                                   => array(
                'padding-top'                               => '20',
                'padding-bottom'                            => '20',
                'padding-left'                              => '20',
                'padding-right'                             => '20',
            ),
            'text'                                      => array(
                'color'                                     => '000000',
                'font-size'                                 => '1em',
            ),
            'link'                                      => array(
                'color'                                     => '000000',
                'font-size'                                 => '1em',
            ),
            'link_hover'                                => array(
                'color'                                     => '555555',
            ),
            'price'                                     => array(
                'font-size'                                 => '1em',
                'color'                                     => '77a464',
            ),
            'image'                                     => array(
                'width'                                     => '35%',
                'float'                                     => 'left',
                'margin-top'                                => '10',
                'margin-bottom'                             => '10',
                'margin-left'                               => '10',
                'margin-right'                              => '10',
            ),
            'close'                                     => array(
                'color'                                     => '000000',
                'background-color'                          => 'ffffff',
                'border-color'                              => '000000',
                'top'                                       => '-1em',
                'bottom'                                    => '',
                'left'                                      => '',
                'right'                                     => '1em',
                'width'                                     => '2em',
                'height'                                    => '2em',
                'line-height'                               => '2em',
                'font-size'                                 => '1em',
                'border-top-width'                          => '0',
                'border-bottom-width'                       => '0',
                'border-left-width'                         => '0',
                'border-right-width'                        => '0',
                'border-radius'                             => '20',
            ),
            'close_hover'                               => array(
                'color'                                     => '000000',
                'background-color'                          => 'ffffff',
            ),
        ),
        'br_product_preview_text_settings'          => array(
            'button_text'                               => 'Quick View',
        ),
        'br_product_preview_javascript_settings'    => array(
            'css'                                       => '',
            'before_open'                               => '',
            'on_open'                                   => '',
            'after_close'                               => '',
        ),
        'br_product_preview_license_settings'       => array(
            'plugin_key'                                => '',
        ),
    );

Files

  • product-preview.php - main plugin file
  • css - folder with CSS files
    • admin.css - styles for admin panel
    • colpick.css - styles for color picker block
    • font-awesome.css - standard Font Awesome styles
    • product_preview.css - front end styles
    • select_fa.css - styles for Font Awesome selector
  • fonts - Font Awesome fonts
  • includes - folder with additional PHP files
    • functions.php - public functions
    • updater.php - BeRocket Updater for plugins update from BeRocket site
  • js - folder with JavaScript files
    • admin.js - JavaScript for admin panel settings
    • admin_select_fa.js - JavaScript for Font Awesome selector
    • colpick.js - JavaScript for color picker in admin panel settings
    • product_preview.js - JavaScript for front end
  • templates - templates for settings, list style and buttons
    • general_settings.php - template for Buttons tab in settings
    • javascript_settings.php - template for JavaScript tab in settings
    • license_settings.php - template for License tab in settings
    • preview.php - product preview window
    • settings.php - main plugin settings page
    • style_settings.php - template for Style tab in settings
    • text_settings.php - template for Text tab in settings