Select Page

WooCommerce Products Compare

For Users

Settings

To find the WooCommerce Products Compare settings follow: admin barWooCommerceProductsCompare.

General

Contains general settings for Products Compare page.

  • Fast comparison – open comparison table in popup
  • Hide attributes with same value – display only attributes with difference
    • Display button to hide/show attributes – button on comparison page to hide or show attributes without difference
    • Hide attributes by default – hide attributes without difference on comparison table load
  • Clear comparison list – display button to remove all products from comparison
  • Button position – 
    • Before All
    • After Image
    • After Title
    • After Price
    • After Add to cart button
  • Comparison Page – page for displaying products for comparison
    • Blog
    • Cart
    • Checkout
    • Compare
    • Knowledge Base
    • My account
    • Sample Page
    • Shop
    • Welcome
  • Remove comparison table – remove comparison table on “Comparison page”
  • AddThis ID – your ID from AddThis site. Clear this field to hide AddThis buttons https://www.addthis.com/
  • Full screen button on  comparison page – button on  comparison page that displays  comparison table in all page sizes
  • Uses Attributes – attributes that will be display in comparison table
    • Price
    • Add To Cart Button
    • Short Description
    • Availability
    • Image
    • Action Group
    • Tag
    • Category
    • Tag
  • Full Footer Buttons
  • Grey Gradient 
  • Nice Blue
  • Nice Green
  • Separate Footer
  • Simple & Nice
  • Simple Shadow
  • Sweet Alert

Style

Contains settings for comparison buttons and page visual customization.

  • Compare Button on Widgets – 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

Set all to theme default

  • Toolbar Button – custom style for button that open widget toolbar
    • Border color – color for border around button/ Default
    • Border width – width for border around button
    • Border radius – corner rounding for button
    • Size – text size on button
    • Font color – text color on button/ Default 
    • Background – background color for button/ Default

Set all to theme default

  • Table – custom style for table.
    • Column minimum width – minimum column width in compare table.
    • Image width – product image width in  comparison table
    • Padding top – padding from top for top fixed part of table
    • Background color – background color for parts of table that are fixed on top and right side. Also used for table in full page mode/ Default
    • Background color for attributes with same value – background color for lines with attributes, same for all products/ Default
    • Padding outside – padding outside of the table 
      • Top
      • Bottom
      • Left
      • Right 
    • Padding outside full size – padding outside of the table in full screen mode
      • Top
      • Bottom
      • Left
      • Right
    • Same value from for attributes/ Default
    • Same value from for attributes on mouse over/ Default

Set all to theme default

  • 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 are displayed in table left-top cell
    • Button type – table has styles for button in two states 
      • Normal 
      • On mouse over
    • 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/ Default
    • Background color – background color for button/ Default

Set all to theme default

  • Clear comparison list button
    • Button type – table has styles for button in two states 
      • Normal 
      • On mouse over
    • 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/ Default
    • Background color – background color for button/ Default

Set all to theme default

  • Add to comparison 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/ Default
    • Background color – background color for button/ Default

Set all to theme default

Text

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

  • Text on Compare button – text on Compare button in widgets
  • Add to comparison button – text on Add to comparison button under products
  • Add to comparison button if product added – text on Add to comparison button under products if products added to comparison list
  • Text on button to open toolbar – button to show products in widgets set 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
  • Description text
  • Clear comparison list button text
  • Hide attributes with same value Button text
  • Show attributes with same value Button text

Custom CSS/JavaScript

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

  • 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 products load – before load products for comparing widgets
  • After products load – after load products for comparing widgets
  • Before remove product – before products remove from widgets
  • Before remove product – after products remove from widgets
  • After remove product – after products remove from widgets

Widgets

This is the widget from the WooCommerce Products Compare plugin. You can place this widget to any widget area like other widgets. When you place the widget it will look like this:

  • Fast compare to load compare table via AJAX – display compare table in popup
  • Title – widget title
  • Type – Image or Text. Image type is used in products images and titles in the widget. Text type is used only in products title in the widget.
  • Is Toolbar – displays the widget as a fixed toolbar on the bottom of the page.

For Developers

Action Hooks

includes/functions.php

br_get_woocommerce_version()

Public function to get WooCommerce version

return string. woocommerce version

products-compare.php

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

activation()

Public function to create comparison page.

init ()

Function for initializing scripts.

admin_init ()

Function for initializing scripts and settings page in the Admin Bar.

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 are placed in plugins folderwoocommerce-products-compare/templates.

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

get_compare_button ()

Display Compare button, that is placed under products.

get_all_compare_products ()

Get all products that are added to comparison list.

return array. array with products id

is_set_cookie( $id )

Public function to check if product is on comparison list

  • $id – product id

return boolean.

wp_head_style ()

Set customization for buttons and comparison table.

Filter Hooks

compare_products_get_template_part

Template that is used 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 (values 0/1).

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

Files

  • products_compare.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
    • 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 are added to comparison list
  • js – folder with Javascript files
    • admin.js – Javascript for admin bar settings
    • colpick.js – Javascript for color picker in admin bar settings
    • jquery.cookie.js – jQuery plugin for cookie
    • jquery.mousewheel.min.js – jQuery plugin for gaining control over mouse wheel
    • products_compare.js – Javascript for front end
  • templates – templates for settings, list style and buttons
    • compare.php – template for comparison 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