For Users
Settings
To find the WooCommerce Products Compare settings follow: admin bar→ WooCommerceProducts→ Compare.
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
Popup Templates
- 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
- 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
- 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
- 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
- Button type – table has styles for button in two states
- 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
- Button type – table has styles for button in two states
- 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
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
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
- template – link to template that will be loaded.
- 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
- 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
- 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
- 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