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 Grid/List View 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 Grid/List View

  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 Grid/List View have settings in Admin Panel -> WooCommerce -> Grid/List View

  • Buttons
  • Product Count
  • List Style
  • CSS
  • JavaScript
  • License

Buttons

Contains settings for customization grid / list buttons.

  • Custom class - custom class remove all style from grid/list button and add this class
  • Buttons display - where buttons will be displayed
  • Buttons position - buttons will be on the left side or right side
  • Paddings - paddings from grid/list buttons
Presets

First block of presets contains ready to use styles for buttons.

Second block of presets contains some predefined settings styles for buttons.

All changes you can see in right bottom corner in preview for normal, mouse over and selected buttons.

For more specific stylization, use blocks under the blocks of presets.

Buttons style

Styles for all buttons type( normal, mouse over, selected ).

  • Button width

  • Button height

  • Text size

  • Line height

  • Text color

  • Rounded border corners

Normal buttons style, Mouse over buttons style and Selected buttons style

Have same fields but for buttons with different state.

  • Background color

  • Border width and color

  • Box shadow

    Change this only if you now how CSS3 box-shadow is work

Product Count

Contains settings for customization product count per page links.

  • Use products count - show links for change products count per page
  • Custom class for buttons - custom class remove all style from products count links and add this class
  • Default Products Per Page - default products count per page
  • Product count value - list of products count links
  • Spliter value - symbol or string between products count links
  • Text - text before and after products count links
  • Buttons display - where links will be displayed
  • Buttons position - links will be on the left side or right side
Buttons style
  • Button width - width for every product count link
  • Button height - height for every product count link
  • Text size - text size for links
  • Line height - line height for links
Normal buttons style, Mouse over buttons style and Selected buttons style

Have same fields but for links with different state.

  •  Text color - text color for link with this state
  • Border width - border width fo link with this state
  • Border color - border color fo link with this state
Spliter style 

Stylization for spliter.

  • Text color - color of spliter between links
  • Border width - spliter border width
  • Border color - spliter border color
  • Padding before - padding between left side link and spliter
  • Padding after - padding between right side link and spliter
Text style 

Stylization for text before and after links.

  • Text color - color of text
  • Border width - border width for before and after links text
  • Border color - color of the border
  • Padding before - padding before text
  • Padding after - padding after text

List Style

You can use Simple style of list or Advanced style.

Simple list style
  • You can edit only additional information that placed on right side from image.
  • Image and add to cart button uses from default grid view.

On page right side shown preview for list style additional information.

You can edit any elements that highlight with yellow color when mouse over element.

Click on highlighted element to edit.

Advanced list style
  • You can edit any elements of list style
  • Have predefined templates for more easier list stylization

 On page right side shown preview for list style.

You can edit any elements that highlight with yellow color when mouse over element.

All that you can edit will be display on left side.

CSS

You can add custom CSS to you site.

JavaScript

You can add custom JavaScript code before or after some actions.

 

License

You can add you product key from BeRocket site.

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

Where can you find Product Key (Plugin key)?

For example: if you set right plugin key and press Test button

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

lgv_simple_before

Used for display information before list with simple style.

Usage

<?php
function my_block_lgv_simple_before () {
//your code here
}

add_action( 'lgv_simple_before', 'my_block_lgv_simple_before' );
?>

lgv_simple_after_product_name

Used for display information after product name in list with simple style.

Usage

<?php
function my_block_lgv_simple_after_product_name () {
//your code here
}

add_action( 'lgv_simple_after_product_name', 'my_block_lgv_simple_after_product_name' );
?>

lgv_simple_after_description

Used for display information after product description in list with simple style.

Usage

<?php
function my_block_lgv_simple_after_description () {
//your code here
}

add_action( 'lgv_simple_after_description', 'my_block_lgv_simple_after_description' );
?>

lgv_simple_after_meta

Used for display information after product meta data in list with simple style.

Usage

<?php
function my_block_lgv_simple_after_meta () {
//your code here
}

add_action( 'lgv_simple_after_meta', 'my_block_lgv_simple_after_meta' );
?>

lgv_simple_after

Used for display information after list with simple style.

Usage

<?php
function my_block_lgv_simple_after () {
//your code here
}

add_action( 'lgv_simple_after', 'my_block_lgv_simple_after' );
?>

lgv_advanced_before

Used for display information before list with advanced style.

Usage

<?php
function my_block_lgv_advanced_before () {
//your code here
}

add_action( 'lgv_advanced_before', 'my_block_lgv_advanced_before' );
?>

lgv_advanced_before_img

Used for display information before product image in list with advanced style.

Usage

<?php
function my_block_lgv_advanced_before_img () {
//your code here
}

add_action( 'lgv_advanced_before_img', 'my_block_lgv_advanced_before_img' );
?>

lgv_advanced_after_img

Used for display information after product image in list with advanced style.

Usage

<?php
function my_block_lgv_advanced_after_img () {
//your code here
}

add_action( 'lgv_advanced_after_img', 'my_block_lgv_advanced_after_img' );
?>

lgv_advanced_before_product_name

Used for display information before product name in list with advanced style.

Usage

<?php
function my_block_lgv_advanced_before_product_name () {
//your code here
}

add_action( 'lgv_advanced_before_product_name', 'my_block_lgv_advanced_before_product_name' );
?>

lgv_advanced_before_description

Used for display information before product description in list with advanced style.

Usage

<?php
function my_block_lgv_advanced_before_description () {
//your code here
}

add_action( 'lgv_advanced_before_description', 'my_block_lgv_advanced_before_description' );
?>

lgv_advanced_before_meta

Used for display information before product meta data in list with advanced style.

Usage

<?php
function my_block_lgv_advanced_before_meta () {
//your code here
}

add_action( 'lgv_advanced_before_meta', 'my_block_lgv_advanced_before_meta' );
?>

lgv_advanced_before_price

Used for display information before product price in list with advanced style.

Usage

<?php
function my_block_lgv_advanced_before_price () {
//your code here
}

add_action( 'lgv_advanced_before_price', 'my_block_lgv_advanced_before_price' );
?>

lgv_advanced_after_price

Used for display information after product price in list with advanced style.

Usage

<?php
function my_block_lgv_advanced_after_price () {
//your code here
}

add_action( 'lgv_advanced_after_price', 'my_block_lgv_advanced_after_price' );
?>

lgv_advanced_after

Used for display information after list with advanced style.

Usage

<?php
function my_block_lgv_advanced_after () {
//your code here
}

add_action( 'lgv_advanced_after', 'my_block_lgv_advanced_after' );
?>

br_lgv_before_list_grid_buttons

Used for display information before button for change grid/list style.

Usage

<?php
function my_block_br_lgv_before_list_grid_buttons () {
//your code here
}

add_action( 'br_lgv_before_list_grid_buttons', 'my_block_br_lgv_before_list_grid_buttons' );
?>

br_lgv_after_list_grid_buttons

Used for display information after button for change grid/list style.

Usage

<?php
function my_block_br_lgv_after_list_grid_buttons () {
//your code here
}

add_action( 'br_lgv_after_list_grid_buttons', 'my_block_br_lgv_after_list_grid_buttons' );
?>

Filter hooks

berocket_lgv_user_func

You can change or add JavaScript to specific actions. All this functions can be added by users in plugin settings.

Parameters

  1. user_func - array with users JavaScript functions, that can be set in plugin settings
    • before_style_set - Script before list or grid style set
    • after_style_set - Script after list or grid style set
    • after_style_list - Script after list style set
    • after_style_grid - Script after grid style set
    • before_get_cookie - Script before cookies get
    • after_get_cookie - Script after cookies get
    • before_buttons_reselect - Script before selected buttons List/Grid changed
    • after_buttons_reselect - Script after selected buttons List/Grid changed
    • before_product_reselect - Script before selected product count links changed
    • after_product_reselect - Script after selected product count links changed
    • before_page_reload - Script before page reload on product count change
    • before_ajax_product_reload - Script before AJAX page reload on product count change
    • after_ajax_product_reload - Script after AJAX page reload on product count change

Usage

<?php
function change_berocket_lgv_user_func ( $user_func ) {
//your code here
    return $user_func;
}

add_filter( 'berocket_lgv_user_func', 'change_berocket_lgv_user_func' );
?>

lgv_product_data_template

Template name for list style.

Parameters

  1. template_name - current template name, by default uses: 'additional_product_data_advanced' and 'additional_product_data'

Usage

<?php
function change_lgv_product_data_template ( $template_name ) {
//your code here
    return $template_name;
}

add_filter( 'lgv_product_data_template', 'change_lgv_product_data_template' );
?>

lgv_product_classes

Classes for products with that contains list style.

Parameters

  1. classes - all classes that will be added to product.

Usage

<?php
function change_lgv_product_classes ( $classes ) {
//your code here
    return $classes;
}

add_filter( 'lgv_product_classes', 'change_lgv_product_classes' );
?>

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

add_filter( 'lgv_get_template_part', 'change_lgv_get_template_part', 10, 2 );
?>

lgv_buttons_position

Position for button for change grid/list style, can be 'left' or 'right'.

Parameters

  1. position - current position from plugin settings.

Usage

<?php
function change_lgv_buttons_position ( $position ) {
//your code here
    return $position;
}

add_filter( 'lgv_buttons_position', 'change_lgv_buttons_position' );
?>

lgv_buttons_padding

Paddings around the button for change grid/list style.

Parameters

  1. paddings - array with paddings.
    • top - padding from top
    • bottom - padding from bottom
    • left - padding from left
    • right - padding from right

Usage

<?php
function change_lgv_buttons_padding ( $paddings ) {
//your code here
    return $paddings;
}

add_filter( 'lgv_buttons_padding', 'change_lgv_buttons_padding' );
?>

lgv_buttons_custom_class

Custom class for button for change grid/list style.

Parameters

  1. class - string with custom class.

Usage

<?php
function change_lgv_buttons_custom_class ( $class ) {
//your code here
    return $class;
}

add_filter( 'lgv_buttons_custom_class', 'change_lgv_buttons_custom_class' );
?>

lgv_buttons_template

Template name for button for change grid/list style.

Parameters

  1. template - string with template name.

Usage

<?php
function change_lgv_buttons_template ( $template ) {
//your code here
    return $template;
}

add_filter( 'lgv_buttons_template', 'change_lgv_buttons_template' );
?>

lgv_product_count_position

Position for product count links, can be 'left' or 'right'.

Parameters

  1. position - current position from plugin settings.

Usage

<?php
function change_lgv_product_count_position ( $position ) {
//your code here
    return $position;
}

add_filter( 'lgv_product_count_position', 'change_lgv_product_count_position' );
?>

lgv_product_count_custom_class

Custom class for product count links.

Parameters

  1. class - string with custom class.

Usage

<?php
function change_lgv_product_count_custom_class ( $class ) {
//your code here
    return $class;
}

add_filter( 'lgv_product_count_custom_class', 'change_lgv_product_count_custom_class' );
?>

lgv_product_count_template

Template name for product count links.

Parameters

  1. template - string with template name.

Usage

<?php
function change_lgv_product_count_template ( $template ) {
//your code here
    return $template;
}

add_filter( 'lgv_product_count_template', 'change_lgv_product_count_template' );
?>

lgv_product_count_values

Values for product count links.

Parameters

  1. values - string values(Delimiter: , ). Example: "12,24,48,all".

Usage

<?php
function change_lgv_product_count_values ( $values ) {
//your code here
    return $values;
}

add_filter( 'lgv_product_count_values', 'change_lgv_product_count_values' );
?>

lgv_widget_title

Title for widget with buttons.

Parameters

  1. title - string with title.

Usage

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

add_filter( 'lgv_widget_title', 'change_lgv_widget_title' );
?>

lgv_widget_custom_class

Custom class for button for change grid/list style in widget.

Parameters

  1. class - string with custom class.

Usage

<?php
function change_lgv_widget_custom_class ( $class ) {
//your code here
    return $class;
}

add_filter( 'lgv_widget_custom_class', 'change_lgv_widget_custom_class' );
?>

lgv_widget_template

Template name for button for change grid/list style in widget.

Parameters

  1. template - string with template name.

Usage

<?php
function change_lgv_widget_template ( $template ) {
//your code here
    return $template;
}

add_filter( 'lgv_widget_template', 'change_lgv_widget_template' );
?>

Functions

includes/functions.php

br_get_woocommerce_version()

Public function to get WooCommerce version

return string. woocommerce version

br_lgv_get_cookie($position)

Public function to get WooCommerce version

  • $position - 0 or 1. 0 - list/grid, 1 - product count per page

return string.

woocommerce-list-grid-view.php

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

init ()

Function for initialize scripts and add buttons.

set_styles ()

Function for set user styles from plugin settings.

additional_product_data ()

Function to add additional settings for page for using in list style.

br_get_template_part( $name = '' )

Get template part (for templates like the slider).

Default templates places in plugins folder woocommerce-grid-list-view/templates.

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

show_buttons_fix ()

Display Grid/List button.

show_product_count_fix ()

Display product count links.

register_lgv_options ()

Add option page to admin menu.

activation ()

Add settings on plugin activation.

deactivation ()

Remove all settings on plugin remove.

Options

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

public static $defaults = array(
        'br_lgv_buttons_page_option'    => array(
            'custom_class'                  => '',
            'above_order'                   => '',
            'under_order'                   => '1',
            'above_paging'                  => '',
            'position'                      => 'left',
            'padding'                       => array(
                'top'                           => '5',
                'bottom'                        => '5',
                'left'                          => '0',
                'right'                         => '0',
            ),
        ),
        'br_lgv_product_count_option'   => array(
            'use'                           => '1',
            'custom_class'                  => '',
            'products_per_page'             => '24',
            'value'                         => '12,24,48,all',
            'explode'                       => '/',
            'text_before'                   => '',
            'text_after'                    => '',
            'above_order'                   => array( 'is' => '', 'after' => '' ),
            'under_order'                   => array( 'is' => '', 'after' => '' ),
            'above_paging'                  => array( 'is' => '', 'after' => '' ),
            'before_grid_list'              => '1',
            'after_grid_list'               => '',
            'position'                      => 'left',
        ),
        'br_lgv_liststyle_option'       => array(),
        'br_lgv_css_option'             => array(
            'css_style'                     => '',
        ),
        'br_lgv_javascript_option'      => array(
            'script'                        => array(
                'before_style_set'              => '',
                'after_style_set'               => '',
                'after_style_list'              => '',
                'after_style_grid'              => '',
                'before_get_cookie'             => '',
                'after_get_cookie'              => '',
                'before_buttons_reselect'       => '',
                'after_buttons_reselect'        => '',
                'before_product_reselect'       => '',
                'after_product_reselect'        => '',
                'before_page_reload'            => '',
                'before_ajax_product_reload'    => '',
                'after_ajax_product_reload'     => '',
            ),
        ),
        'br_lgv_license_option'         => array(
            'plugin_key'                    => '',
        ),
    );

Files

  • woocommerce-list-grid-view.php - main plugin file
  • css - folder with CSS files
    • admin_lgv.css - styles for admin panel
    • colpick.css - styles for color picker block
    • font-awesome.css - standard Font Awesome styles
    • shop_lgv.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 Grid/List buttons
  • js - folder with JavaScript files
    • admin_lgv.js - JavaScript for admin panel settings
    • colpick.js - JavaScript for color picker in admin panel settings
    • grid_view.js - JavaScript for front end
    • jquery.cookie.js - jQuery plugin for cookie
  • templates - templates for settings, list style and buttons
    • additional_product_data.php - templates for simple list style
    • additional_product_data_advanced.php - templates for advanced list style
    • buttons_settings.php - template for Buttons tab in settings
    • css_settings.php - template for CSS tab in settings
    • javascript_settings.php - template for JavaScript tab in settings
    • license_settings.php - template for License tab in settings
    • list-grid.php - template for button for change grid/list style
    • liststyle_settings.php - template for List Style tab in settings
    • product_count.php - template for product count links
    • product_count_settings.php - template for Product Count tab in settings
    • settings.php - main plugin settings page