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.
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.
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.
After properly install WooCommerce Beautifier you need to go to setting page (Dashboard > WC Beautifier. Notice in following picture::
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.
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!
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 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.
As our plugin will generate CSS file. So no need extra time for executing new style.
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.
From the “Basic tab” in the setting panel the change will effect on all pages of your “WooCommerce” shop.
You can customize design/style of your site very easily with user friendly interface.
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 :
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 :
We’ve checked this plugin with a variety of themes and confident that it will also work with your theme.
Import and export your setting when you need. It's very easy.See above how to to do it.
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
Ans:Yes, It works.
Ans:Yes, It Gutenberg supported.
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).
Ans:Yes, You can import and export setting and use in future.
Ans:Yes, You can reset the settings to deafault. To do this, click on
Ans:Yes, You can reset the settings for indivisual tab. To do this, click on
<?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 ' '; } return; } } /** * Plugin Install and Uninstall * * @author Saiful IslamWC Beautifier requires WooCommerce to be installed and active. You can download WooCommerce here.
* @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' ) );
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; }
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; });
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.