PHP Structure

<?php

/**
 * WooCommerce Beautifier Plugin's Main class, All Plugin will handle from here
 * Already Instance declared
 * 
 * @method getInstance WCB_Beautifier::getInstance() Already Instance declared
 * @method install WCB_Beautifier::install() Plugin install function. When plugin will install, Default CSS file will generate,if u have existing setting.
 * @method uninstall WCB_Beautifier::uninstall() Nothing for now for uninstall
 * @method getPluginData WCB_Beautifier::getPluginData() Getting plugin's all data. Such: name, version, author, url , tag , description etc.
 * @method getVersion WCB_Beautifier::getVersion() Getting WC_Beautifier plugin's version
 * @method getName WCB_Beautifier::getName() Getting Plugin Name, we can use, if any where need
 * @method checkWooCommerce WCB_Beautifier::checkWooCommerce() This method very important. it will check that WooCommerce plugin install/activated or not. If not activated. This method will generate an Error Message and showing a message that Woocommerce Plugin is not installed.
 * 
 * @author Saiful Islam 
 * @package WooCommerce_Beautifier
 * @since 1.0
 * @see Plugin Basic Start https://developer.wordpress.org/plugins/plugin-basics/
 */
class WCB_Beautifier{
    
    /**
    * Core singleton class
    * @var self - pattern realization
    */
    private static $_instance;
   
    /**
     * Getting start instance of WC_Beautifier package
     * 
     * @return type Object
     */
    public static function getInstance(){
        if ( ! ( self::$_instance instanceof self ) ) {
                self::$_instance = new self();
        }
        return self::$_instance;
    }

    /**
     * Staring function 
     * Activation Hook
     */
    public function install(){
        //Creating CSS file based on old Setting as well as new setting
        $wcb_css_file = WCB_BASE_DIR . '/assets/css/wcb_style.css';
        $wcb_content = WCB_Beautifier\WCB_CSS_Generator::render();
        WCB_Beautifier\WCB_CSS_Generator::createFile( $wcb_content, $wcb_css_file );
    }


    /**
    * Plugin Uninsall Activation Hook 
    * Static Method
    * 
    * @since 1.0.0
    */
    public function uninstall() {
       //Nothing for now
    }

    /**
    * Getting full Plugin data. We have used __FILE__ for the main plugin file.
    * 
    * @since V 1.5
    * @return Array Returnning Array of full Plugin's data for This Woo Product Table plugin
    */
    public static function getPluginData(){
       return get_plugin_data( __FILE__ );
    }

    /**
    * Getting Version by this Function/Method
    * 
    * @return type static String
    */
    public static function getVersion() {
       $data = self::getPluginData();
       return $data['Version'];
    }

    /**
    * Getting Version by this Function/Method
    * 
    * @return type static String
    */
    public static function getName() {
       $data = self::getPluginData();
       return $data['Name'];
    }
    
    public static function checkWooCommerce(){
        if ( !is_plugin_active( 'woocommerce/woocommerce.php' ) ) {
            echo '
WC Beautifier requires WooCommerce to be installed and active. You can download WooCommerce here.
';
        }
        return;
    }
}

/**
* Plugin Install and Uninstall
 * 
 * @author Saiful Islam 
 * @package WC_Beautifier
 * @since 1.0
 * @see register activation hook https://codex.wordpress.org/Function_Reference/register_activation_hook
*/
register_activation_hook(__FILE__, array( 'WC_Beautifier','install' ) );
register_deactivation_hook( __FILE__, array( 'WC_Beautifier','uninstall' ) );
                                    

CSS Structure

We have used CSS, Only for BackEnd form of our plugin.

/*Tab disable by Default without select any tab*/
.wcb_element_wrapper{display: none;}

/* No WooCommerce Message */
.wcb_no_woocommerce {
    color: red;
    background: #ffffc5;
    display: inline-block;
    padding: 3px 10px;
    margin-top: 30px;
}

.wcb_no_woocommerce>p {
    font-size: 22px;
}
/* No WooCommerce Message End */

/*Form's Style Start Here*/
.wcb_element_wrapper.wcb_input_wrapper, .wcb_element_wrapper.wcb_select_wrapper {
    background: white;
    padding: 4px;
    width: 17%;
    float: left;
    min-height: 64px;
}
.wcb_element_wrapper.wcb_input_wrapper:hover, .wcb_element_wrapper.wcb_select_wrapper:hover {
    background: rgba(234, 234, 234, 0.38);
}

.wcb_element_wrapper.wcb_title_wrapper{
    width: 100%;
    clear: both;
    margin-top: 4px;
}
                                    

JS Structure

We have used Javascript, Only for BackEnd form of our plugin.

//Reset by one click
        $('body').on('click','.wcb_reset_all_button',function(e){
            e.preventDefault();
            var confirmation = confirm("Are you sure to reset all tab's data?\nUnable to reback.");
            if(confirmation){
                var formClass = $(this).data('target');
                $('.' + formClass +' .tab-content input[type=text],.' + formClass +' .tab-content select').each(function(){
                    $(this).val('');
                });
                $('.' + formClass +' .tab-content .wp-picker-clear').each(function(){
                    $(this).trigger('click');
                });
                //$('.wcb_form_message').html("All Tab's data has been reset. Now click to Submit to save.");
                $('.' + formClass + ' .wcb_submit_button').trigger('click');
            }
            return;
            
        });