#Intro

WooCommerce Beautifier v 1.1

WooCommerce Beautifier plugin gives you a plenty of options to customize the design of your WooCommerce shop. With this plugin you will be able to change/customize Design/Style/Color/Font-Size etc of your Shop page content, Minicart content, Cart page content, Checkout page content, Category and Tag page content. Such as product title,Body Background Image, price,add to cart button,sale badge,page title,placeorder button, select option button etc. You can chage color, font size,font style,font-family,padding,background color etc.

Created:02/28/2019

Last Update:03/23/2019

Author name:Saiful Islam

Author Profile:Codeastrology

Email:codersaiful@gmail.com

Thank you for your interest in my plugin. If you have any questions that are beyond the scope of this help file, please feel free to contact with our plugin Support page WooCommerce Beautifier Support or for very critical issue, you can contact with email: codersaiful@gmail.com [Email reply can be delay]. Thank you so much.

#Installation

Note: WooCommerce Beautifier Plugin is depended on WooCommerce Plugin
For using WooCommerce Add-ons plugin, first you have to confirm that, WooCommerce is already installed in your site. Also confirm that you have few products available in your store. See How to install WooCommerce. And add products to your store. After evreything is setup properly, install WooCommerce Beautifier plugin.

Live Demo

To install, Please follow the steps bellow:

Step 1:

  • First extract your downloaded zip file from Codecayon
  • Enter into the extracted folder
  • Up to -> inside [Main Files] folder
  • Choose right plugin file like following screenshot

Step 2: In your WordPress Admin Panel, go to Plugins > Add New

Step 3: Click on Upload Plugin button

Step 4: Select WooCommerce_Beautifier_V1.1_X.X.X.zip' file

Step 5: Activate the newly installed Plugin

Great !!! Successfully Installed .

#Getting Start

Note: WooCommerce Beautifier Plugin is depended on WooCommerce Plugin
For using WooCommerce Add-ons plugin, you need to first confirm installation of “WooCommerce” in your WordPress site. Also confirm that you have few products available in your store. See How to install WooCommerce and add products to your Store.

WooCommerce Beautifier settings page

After properly install WooCommerce Beautifier you need to go to setting page (Dashboard > WC Beautifier. Notice in following picture::

Now details explanation of WooCommerce Beautifier in Dashboard.

Settings (Global Settings Tab): This tab setting value is global. That means this setting value will impact to whole WooCommerce elements - by default. But if you want to set any particular change for any specific page, you need to change in that particular tab. For Example: Mini cart, Shop page, Category Page, Tag Page tab.

Settings (Mini Cart): Firstly, the design/style will come from the 'Global Setting' tab. But when you set new setting to this tab, these settings (design/style) will override the 'Global Setting' to Mini-Cart's elements.

Settings (Cart Page):Firstly, the design/style will come from the 'Global Setting' tab. But when you set new setting to this tab, these settings (design/style) will override the 'Global Setting' to Cart Page elements.

Settings (Checkout Page ): This Tab work with your checkout page content styles.Firstly, the design/style will come from the 'Global Setting' tab. But when you set new setting to this tab, these settings (design/style) will override the 'Global Setting' to Check Out Page's elements. Such as product name, price, add to cart button, checkout button, placeorder button, rating color etc.

Settings (Shop Page): Change Your main shop page content styles from this option tab.Firstly, the design/style will come from the 'Global Setting' tab. But when you set new setting to this tab, these settings (design/style) will override the 'Global Setting' to Main Shop Page elements. Such as page title, product name, price, add to cart button, checkout button, rating color etc.

Settings (Single Product Page): Change Your single product page content styles from this option tab. Firstly, the design/style will come from the 'Global Setting' tab. But when you set new setting to this tab, these settings (design/style) will override the 'Global Setting' to Single Product Page elements. Such as product name, price, add to cart button, rating color etc

Settings (Category Page): Change Your category archive page content styles from this option tab. Firstly, the design/style will come from the 'Global Setting' tab. But when you set new setting to this tab, these settings (design/style) will override the 'Global Setting' to Product Category Archive Page elements. Such as product name, price, add to cart button, select option button, rating color etc.

Settings (Tag Page): Firstly, the design/style will come from the 'Global Setting' tab. But when you set new setting to this tab, these settings (design/style) will override the 'Global Setting' to Product Tag Archive Page elements. Such as product name, price, add to cart button, select option button, rating color etc.

Save Current Setting As New Template

You can save your edited style easily for all pages. Give a name to your setting and click the "Save as template" button. Too Easy!

Restore setting from Saved Template

Go to (WC Beautifier -> Templates). You will find a page containing templates list that you created. From here, you able to restore any template's setting by button. That's it. It will apply style from your saved templates.

Import and Export your current settings Easily

Import the current styles for all pages easily. Inside the export field you will see some code. Copy the code and save it any doc file for using it later. You just need to paste the code inside the Import textarea field and click import. That's it.

#Plugin Features

Fast Load

As our plugin will generate CSS file. So no need extra time for executing new style.

WooCommerce Beautifier

With this awesome plugin you can customize your “WooCommerce” store style. You will be able change the shop page styles, Category-Tag page styles,Checkout page,cart page styles etc.

Global setting from one tab:

From the “Basic tab” in the setting panel the change will effect on all pages of your “WooCommerce” shop.

User friendly interface:

You can customize design/style of your site very easily with user friendly interface.

Reset you current setting for all tabs:

This is a very effective and important feature. Sometimes you may need to reset the current style to get back to default settings.There is reset button which will reset your setting with one click. The button is like :

Reset the current settings of selected tab only:

You can also reset the setting of the selected tab only. It will only reset from that tab what you've selected. Will not reset from other tab. The reset this tab button is like :

All Themes supported:

We’ve checked this plugin with a variety of themes and confident that it will also work with your theme.

Import / Export the settings:

Import and export your setting when you need. It's very easy.See above how to to do it.

Save as new template feature:

Save the current or new customized settings as a new template. You can use the saved template anytime you want.You will find templates list after clicking the templates menu. Choose the saved themplate click on the button named

#FAQ

Does it work with all themes?

Ans:Yes, It works.

Does it Gutenberg supported?

Ans:Yes, It Gutenberg supported.

Can I save my current settings?

Ans:Yes. You can save current settings or new customized as a new template. For this go to the bottom section and you will seee a option "Save as template". Give a name of the current setting and click the button. It will save your settings as new template. You can view your template going to (Dashboard-> WC Beautifier -> Templates).

Is there any feature to import/export settings ?

Ans:Yes, You can import and export setting and use in future.

Can I reset the settings to default?

Ans:Yes, You can reset the settings to deafault. To do this, click on

Can I reset the settings for individual tab?

Ans:Yes, You can reset the settings for indivisual tab. To do this, click on

#Files Structure

WC_Beautifier
  • admin
    • enqueue.php
    • export_emport.php
    • general_tab.php
    • menu_n_setting.php
    • templates.php
  • assets
    • css
      • beautifier_generated.css
      • beautifier_style.css
      images
      • no-image.jpg
      js
      • beautifier_script.js
  • frameworks
    • css_generator.php
    • form_array.php
    • form_generator.php
    • jsonBase64.php
    • template_manage.php
  • handle
    • require.php
  • includes
    • enqueue.php
  • languages
    • wc_beautifier.pot
  • beautifier.php
  • readme.txt

#Code structure

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;
            
        });

                                    

#credits

jQuery

jquery.com

Only for Documntation.

Bootstrap v4.1

getbootstrap.com

Only for Documntation.

Google code prettifier

github.com/google/code-prettify

Only for Documntation.

#Changelog

v1.0 (03/12/2019)

  • Initial release

v1.1 (03/23/2019)

  • Rating color issue fix
  • Indivisual Background Image setting feature for all indivisual page

Once again, thank you so much for purchasing WooCommerce Beautifier . As I said before, it’d be glad for me to help you.If you have any query about this plugin. No guarantees, but I'll do my best to assist you. If you have a more general question related to the plugin on Codecanyon, feel free to knock via our email: codersaiful@gmail.com or you might consider visiting the forums and asking your question in the "Item Support" section.

Saiful Islam