#Intro

Product Variation Table 1.0

Product Variation Table gives the functionality to your WooCommerce variable products single page.There will have a table of every individual variation of that product. User will be able to select as much quantity they want and purchase easily. Fully responsive and mobile friendly variation table.

Created:01/13/2020

Last updated:01/13/2020

Author name:Saiful

Author user:Codeastrology

Email:codersaiful@gmail.com

Thank you for purchasing my plugin. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here or you can contact with plugin Support page Product Variation Table Support. Thanks so much.

#Installation

Step 1 First extract your zip file, what you have downloaded from Codecanyon. And enter to extracted folder. up to -> inside [Main Files] folder.

Step 2 Choose the right plugin file. Like following screenshot:

Step 3 In your WordPress Admin Panel, go to Plugins > Installed Plugins

Step 4 Click on the Add New button

Step 5 Click on the Upload Plugin button

Step 6 Activate the newly installed Plugin

#Getting Start

Variation Table settings page

If you properly install Product Variation Table then this plugin will work properly. The plugin settings page (Dashboard > Variation Table) includes a range of options for setting the configuration in your variation table. You will have settings to control your Variation Table.

Create a New Variation Table

Go to ( Dashboard-> VARIATION TABLE-> Add New ) Then will see lot of options to create and configure you variation table. After configure according to your need click publish button. You can choose if that table will show or not. Always will be shown your last enabled table in your single product page.

Enable/Disable

After publish your table you can enable or disable the table. If you enable then it will appear on your single product page.

You can check also which table is enabled for the single product page.

Here is your newly created Product Variation Table.

Product Variation Table in Dashboard.

Variation Table list in Variation Table page

Column : From the "Column" tab you can check/uncheck your table column. If you don't want to show any column just uncheck that and hit publish/update button.

Basic : From here you will have some option to control your variation table like "Ajax Add To cart enable/disable" , Setting up a class name of the table,Changing the add to cart text etc.

Table Design Customizer from Dashboard

From the design tab you will be able to change and apply custom design to the table. Just add your own color , background etc and click publish/update.

Mobile Issue: From this tab you will have option to control the responsiveness of your table. Also you can hide or show some specific column in the mobile devices.

Configuration: From this tab you will have option to control so many things related to your table. Such as add to cart icon, thumb image size,add to cart popup notice,All the message related to the variation table,Quick buy,Direct checkout etc.

#Plugin Features

All the individual variation in a single product page

If you have variations in your products user can easily purchase all variation with different quantity.

All at once purchase

All the variations of your variable product will be in a table. So user can choose which they want to purchase and how much they want to.

Include Specific Variable Products

You have the option to include specific Variable product. You just need to place your product IDs by comma. Ex. 11,12,13

Exclude Specific Variation Products

You have the option to exclude specific variation product too. You just need to place your product IDs by comma. Ex. 8,9,10

Table Design Customizer

Customize your Table's design by our Table Design Customizer.

Keep saved table data

All table will manage from variation table custom_post_type. So you can edit your existing table anytime you want.

Enable/Disable Feature

You can enable or disable any table you want. No hassle just check -uncheck.

WooCommerce Product Variations as Table

With Product Variation Table you can show all your Product variation as a table on the single product page.

WooCommerce Product Variation Custom Field supported

If you have already created varition custom field in your products then you can show those values inside your variation table. You just need to place your custom field key associated with your products.

Fully Mobile Responsive

Product Variation Table comes with a responsive design that is compatible with mobile(any display resolutions). You can add or remove columns as you want for mobile users.

Select your column with Checkbox To Make Your Table:

You can choose what to show in your table. To choose an info, like Product Name/Categories just tick the checkbox, or keep untick otherwise.

Drag and drop feature to arrange tables column position

By this feature, tables column position can easily be set as you need, and you can do it for individual table.

All Message customizable

You may need to change pop-up messages. In this plugin, all messages are customizable.

Custom Taxonomy Support as column in Table

This plugin supports custom taxonomy, that assigned to products as a column in a table.

Custom Fields Support as column in Table

Enabling WCK or ACF plugin, custom fields can be added that are shown in table as a row.

Thumbs image LightBox

Thumbs image lightbox is already added in this plugin. So you don't need additional plugin to add the feature.

Able to Add/Remove Product link from Table

You may want to show the product link to the visitors or hide this. Both is possible in Product Variation Table. Just enable/disable the product link upon your demand from the configure tab option.

Able to Add/Remove Product category/tag’s link from the Table

You can add product category/tag’s link or remove it in the table as you want.

Thumbs image LightBox

Thumbs image lightbox is already added in this plugin. So you needn't additional plugin to add the feature.

Table Headers Are Customizable

All the table headers in the table can be edited, needs no coding. Just input the preferred text in Table Configuration panel.

Best Customer Support

If you face any problem, don't hesitate to connect at our support. We are here to help you.

#FAQ

Can I customize my table's design?

Ans:Yes, You are able to customize your table design.

Is my table's configuration is saved for using future?

Ans:Yes, Each table's configuration is saved as Table ID. You can edit any Table from the Table ID where your pre used table configuration remain same as before.

How does Product Variation Table work?

Ans:The plugin lets you add product variation table to your variable single product page. To create a WooCommerce Variation table view on the single product page, simply choose the options for your product variation tables on the settings page( Dashboard -> Variation Table->Add New ) and Publish it.
You will have an option to enable or disable the table to show in your variable product's single page.

Can I customize the column headings?

Ans:Yes, you can customize heading of all the columns in the table. Also you can hide the table header if you want.

Will it work with my theme?

Ans:We have tested Product Variation Table with a range of free and premium themes and are confident that it will work perfectly with your theme.

Which version of WordPress is supported?

Ans:Product Variation Table is fully tested with the latest version of WordPress. We always recommend running the most up-to-date version of WordPress, but this plugin supports older installations too.

How to set a custom class name in the table, so that, I can apply custom design on the product variation table?

Ans:Yes. You can set a class name for the table. For this Go to Variation Table (Dashboard->Variation Table->Edit Table). Click on the Basics tab and find a field named "Set a Class name for Table" . Set your desired class name in the field. That's it.

How to install the update?

Ans:You can easily update our plugin. First, you've to deactivate old version. Then delete it. Now reinstall our latest version Variation Table and activate it.

Is it possible to add some custom fields in the Variation table?

Ans:Yes, it is. In the bottom side of Column there is option to add your custom field and taxonomy.

Is "Product Variation Table" plugin mobile friendly? Is it responsive?

Ans:Yes. It's 100% responsive. Even you can disable the responsive option from the Mobile Issue, if you want.

There are many message shown in the table, from where can I change it?

Ans: You can change all types of messages from plugin's Configuration Tab. Just Edit or Add new variation table and then go to Configuration tab. From here you can change all the table related messages.

Variation table is working automatically responsive, any way to disable it?

Ans:Yes, there is. Go to "Mobile Issue" tab in Table settings. You will get a drop-down named "Mobile Responsive" . You can Enable/Disable it by "Yes/No

I don't want to show thumb image in the table. What to do in that case?

Ans:Very easily, just avoid adding Thumbnails column. I mean, when you choose column to create variation table, choose your necessary column instead Thumbnails column and hit update/publish. That's it.

Is Thumbnails image re-sizable?

Ans:Yes, you're able to customize thumbs image for your variation table. Go to Configuration tab of our plugin (Dashboard->Variation Table->Edit Your table->Configuration Tab). Over there, you will find a input box called "Thumbs Image Size". Set your image size's dimension. Remember, here supports only int/numeric number. So don't insert px or inch etc. Only number. For example if you input 100 then image size will be 100px x 100px.

Why showing - "Sorry, this product cannot be purchased"?

Ans: It's happening because you haven't set your variation product price.You have to set the price for every variation product you created.

#Screenshots

Product table screenshots

live demo

These screenshots show some of the different uses of our WooCommerce product variation table by Plugin - Product Variation Table. The exact styling will depend on your theme.

Table Configuration Panel

Mobile Responsive Layout

Variation Table View

Design Customizer Panel

#Files Structure

Product Variation Table
  • admin
    • includes
      • right_side.php
    • tabs
      • basics.php
      • column_settings.php
      • config.php
      • table_style.php
      • mobile.php
    • faq_support_page.php
    • menu_plugin_setting_link.php
    • configuration_page.php
    • post_metabox.php
    • post_metabox_form.php
    • style_js_adding_admin.php
    • variation_table_post.php
  • css
    • admin.css
    • alpha-color-picker.css
    • select2.css
    • template.css
    • universal.css
  • images
    • arrow.png
    • arrow_down.png
    • arrow_top.png
    • arrow_ps.psd
  • includes
    • ajax_add_to_cart.php
    • functions.php
    • no_woocommerce.php
    • shortcode.php
    • style_js_adding.php
  • js
    • admin.js
    • custom.js
    • select2.js
  • index.php
  • readme.txt

#html css js structure

HTML Structure


        
        
        <tr class="pvt_table_style_title">
            <th colspan="6"><?php esc_html_e( 'Table Body', 'wspvt' ); ?></th>
        </tr>
        
        <tr>
            <th scope="row">
               <?php esc_html_e( 'Background Color', 'wspvt' ); ?> 
            </th>
            <th>
                <input class="regular-text  pvt_color_picker" type="text" id="" name="table_style[tbody tr td][background-color]" value="<?php echo $meta_table_style['tbody tr td']['background-color']; ?>">
            </th>
            
            <th scope="row">
               <?php esc_html_e( 'Background Hover Color', 'wspvt' ); ?> 
            </th>
            <th>
                <input class="regular-text  pvt_color_picker" type="text" id="" name="table_style[tbody tr td:hover][background-color]" value="<?php echo $meta_table_style['tbody tr td:hover']['background-color']; ?>">
            </th>
            
            <th scope="row">
               <?php esc_html_e( 'Border Color', 'wspvt' ); ?> 
            </th>
            <th>
                <input class="regular-text  pvt_color_picker" type="text" id="" name="table_style[tbody tr td][border-color]" value="<?php echo $meta_table_style['tbody tr td']['border-color']; ?>">
            </th>     
        </tr>
                                    

PHP Structure

<?php

      public static function getInstance() {
           if ( ! ( self::$_instance instanceof self ) ) {
                   self::$_instance = new self();
           }

           return self::$_instance;
   }
   
   
   public function __construct() {

       $dir = dirname( __FILE__ ); //dirname( __FILE__ )
       
       /**
        * See $path_args for Set Path and set Constant
        * 
        * @since 1.0.0
        */
       $path_args = array(
           'PLUGIN_BASE_FOLDER' =>  plugin_basename( $dir ),
           'PLUGIN_BASE_FILE' =>  plugin_basename( __FILE__ ),
           'BASE_URL' =>  plugins_url() . '/'. plugin_basename( $dir ) . '/', //using plugins_url() instead of WP_PLUGIN_URL
           'BASE_DIR' =>  str_replace( '\\', '/', $dir . '/' ),
       );
       /**
        * Set Path Full with Constant as Array
        * 
        * @since 1.0.0
        */
       $this->setPath($path_args);

       /**
        * Set Constant
        * 
        * @since 1.0.0
        */
       $this->setConstant($path_args);
       
       //Load File
       if( is_admin() ){
            require_once $this->path('BASE_DIR','admin/variation_table_post.php');
            require_once $this->path('BASE_DIR','admin/post_metabox.php');
            
            require_once $this->path('BASE_DIR','admin/menu_plugin_setting_link.php');
            require_once $this->path('BASE_DIR','admin/style_js_adding_admin.php');
            require_once $this->path('BASE_DIR','admin/fac_support_page.php');
       }
       
       //Load these bellow file, Only woocommerce installed as well as Only for Front-End
       if ( is_plugin_active( 'woocommerce/woocommerce.php' ) ) {
           require_once $this->path('BASE_DIR','includes/style_js_adding.php');
           require_once $this->path('BASE_DIR','includes/functions.php');
           require_once $this->path('BASE_DIR','includes/ajax_add_to_cart.php'); 
           require_once $this->path('BASE_DIR','includes/shortcode.php');
       }else{
           require_once $this->path('BASE_DIR','includes/no_woocommerce.php');
       }
       
   }
   /**
    * Set Path
    * 
    * @param type $path_array
    * 
    * @since 1.0.0
    */
   public function setPath( $path_array ) {
       $this->paths = $path_array;
   }
   
   private function setConstant( $contanst_array ) {
       self::$constant = $this->paths;
   }
   /**
    * Set Path as like Constant Will Return Full Path
    * Name should like Constant and full Capitalize
    * 
    * @param type $name
    * @return string
    */
   public function path( $name, $_complete_full_file_path = false ) {
       $path = $this->paths[$name] . $_complete_full_file_path;
       return $path;
   }
   
   /**
    * To Get Full path to Anywhere based on Constant
    * 
    * @param type $constant_name
    * @return type String
    */
   public static function getPath( $constant_name = false ) {
       $path = self::$constant[$constant_name];
       return $path;
   }
   /**
    * Update Options when Installing
    * This method has update at Version 3.6
    * 
    * @since 1.0.0
    * @updated since 3.6_29.10.2018 d/m/y
    */
   public static function install() {
       ob_start();
       //check current value
       $current_value = get_option('pvt_configure_options');
       $default_value = self::$default;
       $changed_value = false;
       //Set default value in Options
       if($current_value){
           foreach( $default_value as $key=>$value ){
              if( isset($current_value[$key]) && $key != 'plugin_version' ){
                 $changed_value[$key] = $current_value[$key];
              }else{
                  $changed_value[$key] = $value;
              }
           }
           update_option( 'pvt_configure_options', $changed_value );
       }else{
           update_option( 'pvt_configure_options', $default_value );
       }
       
   }
                                    

CSS Structure

div.variation_table_wrapper input[type=checkbox]:disabled+label {
	color: #b8b8b8;
	cursor: auto;
}

div.variation_table_wrapper input[type=checkbox]:disabled+label:before {
	box-shadow: none;
	background: #ddd;
}

div.variation_table_wrapper input[type=checkbox]:checked+label:after {
	content: '✓';
	color: #fff;
	top: 1px;
	font-size: 11px;
	font-weight: bold;
	left: 4px;
	position: absolute;
}
div.variation_table_wrapper input[type=checkbox].pvt_check_universal.pvt_check_universal_header:checked+label:after,
div.variation_table_wrapper input.pvt_check_universal.pvt_check_universal_header[type=checkbox]:checked+label:after{
	content: '✓';
	color: #fff;
	top: 1px;
	font-size: 11px;
	font-weight: bold;
	left: 4px;
	position: absolute;
}

/********** STYLE FOR A RADIO BUTTON --------------- */
div.variation_table_wrapper input[type=radio] {
	position: absolute;
	opacity: 0;
}

div.variation_table_wrapper input[type=radio]+label {
	position: relative;
	cursor: pointer;
	padding: 0;
}

div.variation_table_wrapper input[type=radio]+label:before {
	border: 1px solid #bbbbbb;
	content: '';
	margin-right: 10px;
	display: inline-block;
	vertical-align: text-top;
	width: 24px;
	height: 24px;
	background: #e6e6e6;
	border-radius: 50%;
}

                                    

JS Structure


        (function($) {
    'use strict';
    $(document).ready(function() {
        /**
         * Checking pvt_pro_table_body class available in body tag
         * 
         * @since 4.3 we have added this condition. 
         */
        if(!$('div.variation_table_wrapper table').hasClass('variation_table')){ //div variation_table_wrapper 
            return false; 
        }        
        
        var ajax_url,ajax_url_additional = '/wp-admin/admin-ajax.php';
        var site_url = $('div.variation_table_wrapper').data('site_url');
            ajax_url = site_url + ajax_url_additional;
            
        console.log(ajax_url);//Only for Developer
        if( ajax_url === 'undefined' + ajax_url_additional  ){
            console.log( 'WOO PRODUCT TABLE is not Available to this page \nOR:::SORRY!!!!: woocommerce_params is Undefine also ajax_url also undefined. So ajax will not work not. Contact with codersaiful@gmail.com' );
            return false;
        }
        
        /**
         * Getting object for config_json from #pvt_table table.
         * Can be any table. because all table will be same config json data
         * 
         * @returns {Objectt}
         */        
        var config_json = $('#pvt_table').data('config_json');
        if ( typeof config_json === 'undefined' ){
            return false;
        }
        
        /**
         * Mainly getting config_json value based on table id. To get new value if available in inside any function, Use like following
         * config_json = getConfig_json( temp_number );
         * 
         * @param {type} temp_number Table ID
         * @returns {Objectt} Json Object, Mainly getting config_json value based on table id.
         */
        function getConfig_json( temp_number ){
           var temp_cjson = $('div#table_id_' + temp_number + ' #pvt_table').data('config_json');
           if ( typeof temp_cjson === 'undefined' ){
                temp_cjson = config_json;
            }
            return temp_cjson;
        }
        console.log(config_json);
        
        /**
         * To get/collect Notice after click on add to cart button 
         * or after click on add_to_cart_selected
         * 
         * @returns {undefined}
         */
        function PVT_NoticeBoard(){
            var noticeBoard = $('div.pvt_notice_board');
            $.ajax({
                type: 'POST',
                url: ajax_url,
                data: {
                    action: 'pvt_print_notice'
                },
                success: function(response){
                    if(response !== ''){
                        noticeBoard.html(response);
                        var boardHeight = noticeBoard.height();
                        var boardWidth = noticeBoard.width();
                        var windowHeight = $(window).height();
                        var windowWidth = $(window).width();
                        var topCal = (windowHeight - (boardHeight + 20))/2;
                        var leftCal = (windowWidth - (boardWidth + 20))/2;
                        noticeBoard.css({
                            top: topCal + 'px',
                            left: leftCal + 'px',
                        });                        
                        noticeBoard.fadeIn('slow');
                    }
                    var myTimeOut = setTimeout(function(){
                        noticeBoard.fadeOut('medium');
                        clearTimeout(myTimeOut);
                    },2000);
                },
                error: function(){
                    console.log("Unable to load Notice");
                    return false;
                }
            });
            
        }
        
                                    

#credits

I've used the following JavaScript Library.

jQuery

jquery

Select2 - The jQuery replacement for select boxes

select2.org

Select2 jQuery plugin for modern selection in Setting page

Bootstrap v4.1

Only for Documentation

getbootstrap.com/

#Changelog

v1.0 (14/09/2019)

  • Initial release

Once again, thank you so much for purchasing Product Variation Table. As I said at the beginning, I'd be glad to help you if you have any questions relating to this plugin. No guarantees, but I'll do my best to assist. If you have a more general question related to the plugin on Codecanyon, Feel free to knock at our email: codersaiful@gmail.com or you might consider visiting the forums and asking your question in the "Item Support" section.

Saiful Islam