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 Products Compare 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 Products Compare

  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 -> Compare Products

General

Contains general settings for Products Compare page.

  • Fast compare - Open compare table in popup
  • Hide attributes with same value - display only attributes with difference
    • Disaplay button to hide/show attributes - button on compare page to hide or show attributes without difference
    • Hide attributes by default - hide attributes without difference on compare table load
  • Compare Page - page for display products for compare
  • AddThis ID - Your ID from AddThis site. Clear this field to hide AddThis buttons
  • Uses Attributes - attributes that will be display in compare table
  • Full screen button on compare page - button on compare page that display compare table in all page size

Style

Contains settings for compare buttons and page visual customization.

  • Compare Button - custom style for compare button in widget
    • Border color - color for border around button
    • Border width - width for border around button
    • Border radius - corner rounding for button
    • Size - text size on button
    • Font color - text color on button
    • Background - background color for button
  • Toolbar Button - custom style for button that open widget toolbar
    • Border color - color for border around button
    • Border width - width for border around button
    • Border radius - corner rounding for button
    • Size - text size on button
    • Font color - text color on button
    • Background - background color for button
  • Table - custom style for table.
    • Column minimum width - minimum column width in compare table.
    • Image width - product image width in compare table
    • Padding top - padding from top for top fixed part of table
    • Background color - background color for parts of table that fixed on top and right side. Also uses for table in full page mode.
    • Background color for attributes with same value - background color for lines with attributes, that is same for all products
    • Padding outside - padding outside of the table 
    • Padding outside full size - padding outside of the table in full screen mode
  • Table full size - custom style for table in full screen mode.
    • Close button size - close button size in pixels
    • Close button color - close button color
    • Close button position - close button position from window border in pixels. Use only one value for horizontal and ona value for vertical positions
    • Background color - background color for block behind the table
    • Background opacity - opacity for block behind the table. Value from 0.0 to 0.1
  • Hide attributes with same value button - style for button to hide or show attributes with same values, that displayed in table left-top cell
    • Button type - table has styles for button in two states normal and on mouse over button
    • Font size - font size in pixels
    • Padding from top - padding from top of cell
    • Padding from bottom - padding from bottom of cell
    • Font color - font color for button
    • Background color - background color for button
  • "Add to compare" button - style for "Compare" button
    • Button type - table has styles for button in three states normal, on mouse over button, button for added product
    • Font size - font size in pixels
    • Width - button width in pixels
    • Font color - font color for button
    • Background color - background color for button

Text

Contains settings for setup custom text on buttons and in tables.

  • Text on compare button - text on compare button in widgets
  • Add to compare button - text on add to compare button under products
  • Add to compare button if product added - text on add to compare button under products if products added to compare list
  • Text on button for toolbar open - button to show products in widgets setted as toolbar
  • Attribute text - text for attributes in compare tables
  • Custom taxonomies text - text for Custom Taxonomies in compare tables
  • Availability text - text for availability status in compare table

JavaScript

Contains setting to set JavaScript code that will be executed on some actions.

  • Before products load - before load products for compare widgets
  • After products load - after load products for compare widgets
  • Before remove product - before products remove from widgets
  • After remove product - after products remove from widgets

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

Widget

The widget from plugin called WooCommerce Products Compare. You can place this widget tto any widget area like other widgets.

When you place widget it will be looks like this

  • Fast compare to load compare table via AJAX - display compare table in popup
  • Title - Widget title
  • Type - Image or Text. Image type uses products image and title in widget. Text type uses only products title in widget.
  • Is Toolbar - display widget as fixed toolbar on the bottom of the page.

For Developers

Filter hooks

compare_products_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_compare_products_get_template_part ( $template, $name ) {
//your code here
    return $template;
}

add_filter( 'compare_products_get_template_part', 'change_compare_products_get_template_part', 10, 2 );
?>

compare_products_widget_title

Filter for widget title.

Parameters

  1. title - widget title.

Usage

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

add_filter( 'compare_products_widget_title', 'change_compare_products_widget_title' );
?>

compare_products_widget_type

Filter for widget type.

Parameters

  1. type - widget type can be 'image' or 'text'.

Usage

<?php
function change_compare_products_widget_type ( $type ) {
//your code here
    return $type;
}

add_filter( 'compare_products_widget_type', 'change_compare_products_widget_type' );
?>

compare_products_widget_toolbar

Filter for widget is toolbar.

Parameters

  1. istoolbar - widget will be toolbar or not ( used 1 or 0 values ).

Usage

<?php
function change_compare_products_widget_toolbar ( $istoolbar ) {
//your code here
    return $istoolbar;
}

add_filter( 'compare_products_widget_toolbar', 'change_compare_products_widget_toolbar' );
?>

Functions

includes/functions.php

br_get_woocommerce_version()

Public function to get WooCommerce version

return string. woocommerce version

products-compare.php

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

activation()

Public function that create compare page.

init ()

Function for initialize scripts.

admin_init ()

Function for initialize scripts and settings page in admin panel.

options ()

Add option page to admin menu.

br_get_template_part( $name = '' )

Get template part (for templates like the slider).

  • $name - template name

Default templates places in plugins folderwoocommerce-products-compare/templates.

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

get_compare_button ()

Display compare button, that places under products.

get_all_compare_products ()

Get all products that added to compare list.

return array. array with products id

is_set_cookie( $id )

Public function to check is product in compare list

  • $id - product id

return boolean.

wp_head_style ()

Set customization for buttons and compare table.

Options

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

    public static $defaults = array(
        'br_compare_products_general_settings'  => array(
            'compare_page'                          => '',
            'attributes'                            => array(),
            'use_full_screen'                       => '',
        ),
        'br_compare_products_style_settings'    => array(
            'button'                                => array(
                'bcolor'                                => '999999',
                'bwidth'                                => '0',
                'bradius'                               => '0',
                'fontsize'                              => '16',
                'fcolor'                                => '333333',
                'backcolor'                             => '9999ff',
            ),
            'toolbutton'                            => array(
                'bcolor'                                => '999999',
                'bwidth'                                => '0',
                'bradius'                               => '0',
                'fontsize'                              => '16',
                'fcolor'                                => '333333',
                'backcolor'                             => '9999ff',
            ),
            'table'                                 => array(
                'colwidth'                              => '200',
                'imgwidth'                              => '',
                'toppadding'                            => '0',
                'backcolor'                             => 'ffffff',
            ),
        ),
        'br_compare_products_text_settings'     => array(
            'compare'                               => 'Compare',
            'add_compare'                           => 'Compare',
            'added_compare'                         => 'Added',
            'toolbar'                               => 'Products For Compare',
            'attribute'                             => 'Attributes',
            'custom'                                => 'Other attributes',
            'availability'                          => 'Availability',
        ),
        'br_compare_products_javascript_settings'   => array(
            'before_load'                               => '',
            'after_load'                                => '',
        ),
        'br_compare_products_license_settings'  => array(
            'plugin_key'                            => '',
        ),
    );

Files

  • products_compare.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
    • products_compare.css - front end styles
  • fonts - Font Awesome fonts
  • includes - folder with additional PHP files
    • functions.php - public functions
    • updater.php - BeRocket Updater for plugins update from BeRocket site
    • widget.php - widget for products that added to compare list
  • js - folder with JavaScript files
    • admin.js - JavaScript for admin panel settings
    • colpick.js - JavaScript for color picker in admin panel settings
    • jquery.cookie.js - jQuery plugin for cookie
    • jquery.mousewheel.min.js - jQuery plugin for take control over mouse wheel
    • products_compare.js - JavaScript for front end
  • templates - templates for settings, list style and buttons
    • compare.php - template for compare page
    • general_settings.php - template for General tab in settings
    • Javascript_settings.php - template for JavaScript tab in settings
    • license_settings.php - template for License tab in settings
    • selected_products.php - template for widget with products in compare list
    • settings.php - main plugin settings page
    • style_settings.php - template for Style tab in settings
    • text_settings.php - template for Text tab in settings