WooCommerce Product Preview

For Users

Installation of Free Version

Plugin installation Method 1:

Download the plugin from berocket.com or wordpress.org.
Open your website’s admin bar and follow: Plugins→ Add new → Upload plugin.
Click on Browser Dialog to open it, select the downloaded zip-file and click Install.
Click on Activate Plugin.

Plugin installation method 2 :

Download the plugin from berocket.com or wordpress.org.
Access your website using FTP.
Navigate to WordPress/wp-content/plugins folder.
Open the downloaded zip-file and unzip its content and copy the unzipped files to WordPress/wp-content/plugins folder.
Open your website’s admin bar and open Plugins.
Browse to select Plugin and click on Activate.

Settings

To find the WooCommerce Products Compare settings follow: admin bar→ WooCommerce→ Product Preview.

General
Style
Text
CSS/JavaScript
License

General

Use quick view – enables plugin
Button position:
- Before all
- After Image
- After Title
- After Price
- After Add to cart button
Display style – style of preview window
- Show/Hide – show and hide window on product block. Use default button and text styles.
- Clone from data – clone preview window to body and show it. Doesn’t use default styles, but fixes all issues with window position.
Display on product preview – decide 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 gallery
- 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
- Poduct full description
- Related Products. Amount of products: [number]
- BeRocket Compare – compares products
- BeRocket Wish Button – adds products to wish list
- BeRocket Wait Button – adds products to wait list
- BeRocket Wish/Wait Button – adds products to wish/wait list
Hide BeRocket Advanced Labels

Style

Preview Style

Color
- 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
- Size
  - 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
  - Top
  - Bottom
  - Left
  - Right
- Padding from border to text inside – padding inside product preview window
  - Top
  - Bottom
  - Left
  - Right
- Border around preview – border for product preview window
  - Top
  - Bottom
  - Left
  - Right
- Padding around image – padding between product image and other elements
  - Top
  - Bottom
  - Left
  - Right
- Close button position – close button position from product preview window border
  - Top
  - Bottom
  - Left
  - Right
- 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
  - Top
  - Bottom
  - Left
  - Right
- Quick view button – sizes for product preview buttons
  - Width – width for button
  - Height – height for button
  - Border width – border width for button
  - Font size
- Quick view button paddings – paddings inside product preview buttons, from button border to button text
  - Top
  - Bottom
  - Left
  - Right
- Quick view button margin – paddings around product preview buttons
  - Top
  - Bottom
  - Left
  - Right
- 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
  - Top
  - Bottom
  - Left
  - Right
- Next button position – position of button on page
  - Top
  - Bottom
  - Left
  - Right
- 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
  - Top
  - Bottom
  - Left
  - Right
- Previous button position – position of button on page
  - Top
  - Bottom
  - Left
  - Right
- 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
  - Top
  - Bottom
  - Left
  - Right
- Previous and next icon position – icon position on button
  - Previous vertical align
    - Top
    - Middle
    - Bottom
  - Previous horizontal align
    - Left
    - Center
    - Right
  - Next Vertical align
    - Top
    - Middle
    - Bottom
  - Next horizontal align
    - Left
    - Center
    - Right

Text

Product preview button – text on button under product to show product preview window

CSS/JavaScript

Disable Font Awesome: do not upload the CSS file for Font Awesome to the site. Disable it only if you do not use Font Awesome icons in widgets or you have Font Awesome in your theme.
Font Awesome Version – version of Font Awesome, which will be used in the settings and the front end pages of the shop. Please select the version that is in your theme.
Custom CSS – field for custom CSS; contains custom CSS code settings to be displayed on the front end pages. Custom CSS is the CSS as you want it to be.
Before Open – runs JavaScript before opening product preview window
On Open – runs JavaScript right after opening product preview window
Before Close – runs JavaScript before closing product preview window

Settings per-theme

Divi

Custom CSS Settings

Open the Admin Bar of your site and follow WooCommerce→ Product Preview→ Custom CSS/JavaScript.

Add this CSS to the field “Custom CSS”:

.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

Custom CSS Settings

Open the Admin Bar of your site and follow WooCommerce→ Product Preview→ Custom CSS/JavaScript.

Add this CSS to the field “Custom CSS”:

.br_product_preview_button 
{
    display: inline-block;
}

X

Custom CSS Settings

Open the Admin Bar of your site and follow WooCommerce→ Product Preview→ Custom CSS/JavaScript.

Add this CSS to the field “Custom CSS”:

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

For Developers

Action Hooks

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 if plugin is activated.

$plugin_name – list of plugin names:
- 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. if plugin with this version activated

product-preview.php

All of these functions are in the BeRocket_Product_Preview class as static functions.

init ()

Function for initializing scripts.

br_get_template_part( $name = ” )

Get template part (for templates like the slider).

Default templates are placed in the plugin folders 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.

berocket_pp_before_preview_button

Used for displaying information before the 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 displaying 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 displaying 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 displaying 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 displaying 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 displaying 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 displaying 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 displaying 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 displaying 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 displaying 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 displaying 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 displaying 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 displaying 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 displaying 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

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

template – link to template that will be loaded.
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 changing or removing classes on Quick View button

Parameters

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

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

Files

product-preview.php – main plugin file
css – folder with CSS files
- admin.css – styles for admin bar
- 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