Everything About WoodMart 6.0

XTEMOS organization is extremely eager to deliver the update of its Woodmart 6.0 format (one of the WordPress store layouts), which is chiefly devoted to the presentation and speed of the site. This version incorporates numerous enhancements, corrections, and new elements, and in this view, We will let you know more about its update. The update calculation is very basic:

  • Make a backup copy of your website and information base.
  • Update the topic by means of View – > Skins or physically.
  • Install the WoodMart Core plugin by means of View – > Installed Plugins.
  • Go to Template Settings and click Save Options.
  • Go to Dashboard – > Settings – > Unique Links and save them from revamping one-of-a-kind links.
  • (Optional) Review all your custom CSS and check all CSS classes used.

CSS optimization

The fundamental style.css file of this layout had in excess of 25,000 lines of code and 740 kilobytes, which was stacked on all pages on each user visit. What’s more, modifying a huge file took a long opportunity to finish. Yet, the Xtemos group got it done, and now it’s 20% more modest regardless of whether you load the entire style.css file.

The Woodmart subject incorporates various components, options, and styles, and these lead to the creation of countless styles. So the CSS, a piece of the layout, took 50-60% of the total load of the format previously. That is the reason they have placed the optimization and renovation of CSS in the Woodmart 6.0 configuration in the most elevated need.

CSS Generator

Prior to updating the Woodmart 6.0 format, the CSS Generator highlight was used. This option allows you to streamline the style.css file by crippling functions and components you won’t ever use. By and large, this method gives a 20-40% more modest CSS file. Yet, it had a major disadvantage: you couldn’t simply stack the styles used for specific pages.

For instance, you don’t use items on your landing page. However, you use them on the store page. Then, you can’t totally debilitate these styles in the CSS generator. Another model is that the styles of pages like a truck, checkout, my record, and so forth can’t be totally taken out, and simultaneously, they ought not to be stacked on the primary page by any stretch of the imagination.

So to tackle this limitation, xtemos chose to eliminate its CSS generator option and divided its CSS file into little lumps (~100 files) that are stacked only where required. As such, their CSS generator now works automatically and loads different styles on specific pages.

This method gives awesome outcomes in many tests on demo websites and their turn of events. The typical CSS stacked on most pages is 250-380 KB in size. In version 5.x, the Woodmart format is 50% more modest than the full CSS file. Note that this method stacks different CSS files into the page (5-20 overall).

In any case, if your server supports HTTP2, this is definitely not a difficult issue. You can debilitate this option whenever you need a CSS file to be stacked. The best solution is to enable the “Join CSS” option in the reserve/optimization plugin you are using. We use WP Rocket in our demo, and it works perfectly.

Refactored CSS

By changing the state of CSS files, the objective was not to break anything in your work websites, and we attempted to make the update cycle as smooth as could really be expected. As I tried, you shouldn’t see any slack after updating the Woodmart 6.0 subject.

Yet, the xtemos group has changed numerous CSS rules, classes, and HTML markup, so if you have code customizations in your topic, they may not work after the update. We list the most significant and general changes here:

General Changes

  • Many have eliminated CSS selectors and now use CSS factors.
  • Most CSS classes that started with “woodmart-” now start with “wd-“. This straightforward fix diminished the CSS file by 30KB. As of now, censured classes are as yet stacked in your HTML to forestall your custom CSS code from breaking. If you don’t require this, you can impair it in Theme Settings – > Performance – > CSS. A full rundown of class changes: Woodmart 5.3 – 6.0 classes correspondence table
  • Blended button styles (vivified, shut, and enlivened channel buttons supplanted with font icons).
  • Combination of popup styles
  • The structure style classes “.structure style-adjusted”, “.structure style-half-adjusted”, “structure line width-1” have been taken out from the body tag.
  • Supplanted the Nanoscroller library with unadulterated CSS looking over.
  • Taken out unused Photoswipe library styles.
  • Taken out unused Magnific popup library styles.
  • The icon font of the <i> label in HTML was changed to <span> because of availability issues.
  • Revised list styles: <ul> and <ol> list icons and separating styles are now set around the world, and in specific spots with HTML list structure (menus, pagination, gadgets, and so forth) It has been erased.
  • Reconstructed structure styles
  • Change the page title style
  • Change the style of the pursuit structure
  • Change the style of list items
  • Revamp all header components
  • Reconstruction of all navigation styles
  • Upgraded dropdown menu style
  • Modified off-material sidebar
  • Changing the drift style of items in real-life buttons

Changes of Elements

  • Standard: Reworked font size, content change, and content width options
  • Commencement clock: Refactored font size
  • Google map: Content adjust has been restored
  • Picture Gallery: Reset vertical and horizontal picture arrangement options
  • Infobox: Reworked font size option
  • List: Rebuilt font size option
  • Section title: Reset font width and size
  • Slider: Content reset option
  • Colleague : re-arrangement option
  • Testimonial: Rebuilt font size
  • Responsive text block: reset, width, and font size

JS Optimization

The first JS file, which contains every one of the straightforward scripts and introduces all the JS libraries, was 114KB before the update (improved version). With the Woodmart 6.0 layout update, they split it into little files and now only burden the necessary parts for the specific page.

With this, xtemos had the option to decrease the typical JS load per page to 20-30KB. Note that this is only the functions.js file and does exclude all JS libraries.

Also, what is more, significant about the JS optimization is that xtemos has refactored every one of the methods, and now they are not set off on the record load occasion. For instance, tooltips are instated when the page is completely stacked. Yet, as a matter of fact, the user sees the impact of this tip only when he moves the mouse to a specific spot with tooltips.

Right now, the tooltip is only added to the HTML code by moving the mouse over the ideal component. Such enhancements have decreased the execution season of Woodmart 6.0 layout scripts in report stacking by something like 70-80% and emphatically affect all measurements, including Google page speed.

Other JS optimizations

The moment.js library was eliminated and supplanted by dayjs. The file size diminished by 190 KB. This library is used for commencement components

The Nanoscroller.js library has been totally eliminated

Added advanced control over stacking JS files in Theme Settings – > Performance – > JS

Taken out deplored jQuery methods from contents and libraries ($.isFunction, $.type, $.resize(), $.scroll(), $.keyup(), $.change(), $.submit( ), $.load())

Layout presets for versatile

Template Presets for Mobile

One more remarkable component included in the Woodmart 6.0 layout update is the preset layout settings for cell phones. This element permits you to configure every one of the layout settings independently for cell phones.

Instances of uses include Enabling/debilitating sluggish stacking for pictures, supplanting different HTML blocks with footers, evolving fonts, and so on. This multitude of settings applies only to cell phones, so you can deftly upgrade execution without tweaking the desktop version.

Reduce Mobile HTML DOM Size

This option can be tracked down in Theme Settings – > Performance and is intended to permit you to lessen the HTML DOM size for cell phones. Right now it only does one thing: take HTML from the desktop header markup.

It generally takes up 10-20% of the screen and is constantly covered up, so it should not be stacked on cell phones. In later updates of this format, they will find different spots in the layout that can’t be stacked on cell phones to additional increment the functionality of this option.

Google fonts

Preceding the Woodmart 6.0 topic update, when you chose any Google font in the Typography settings, its variations and font loads would be all stacked onto your website. This was done to guarantee outright consistency with all CSS rules on your website.

Yet, as far as execution, it is a terrible approach. So now they only burden 2 font loads naturally: 400 and 700 or 300 and 600 (contingent upon the font). Doing this has decreased the number of stacked font files in different situations by 50-70%.

Framework Font Stack

If you don’t want to stack any outside font files, you can choose the framework font stack in Theme Settings – > Typography. Depending on the framework you are perusing the website, different fonts will be stacked. Using a Mac working framework, you will see one font, another Windows font, etc. It’s an incredible option for execution. However, the visual side doesn’t look as great as you’d anticipate.

Also see: How to Set Up Phone Calls on Your WordPress Website

Preload Key Requests

At the point when you test your website using Google Page Speed, you might see an admonition telling you to preload key font demands. The file “woodmart-font.woff” is frequently griped about.

This file is a little font and contains all the framework icons used in the format. It incorporates shopping baskets, top choices, look at, speedy view, search, and different icons. Thus, to take care of this issue, you can go to the format settings – > execution and enable the “Preload key requests” option.

CSS and JS Elementor Optimization

Elementor Page Builder works on the plugin’s general execution and asset stacking in its most recent updates. Yet, now a few options have been added to lessen the quantity of CSS and JS files stacked by Elementor that we never use in our tasks.

If the plugin developers further develop their asset stacking as promised, these options will be eliminated from the format. However, up to that point, you can track down them in Theme Settings – > Performance – > Plugins. Note that you shouldn’t use them in photo optimization; if you notice something broken in the exhibition or Elementor, it is smarter to switch it off.

Support for WEBP Images

WEBP is a cutting-edge design for pictures suggested by Google. Using the WEBP arrangement ought to likewise build your general Google Page Speed score. WoodMart Templates 6.0 has added support for the WEBP picture design given by the Imagify plugin. It is now completely supported, and xtemos is additionally using this plugin on our demo website.

The only limitation is the picture exhibition of an item page from WooCommerce. It’s unrealistic to use WEBP there because it breaks WooCommerce’s default scripts for variable item pictures. It is unimaginable to expect to tackle this issue using HTML labels. You can use another option “revamp” method, to deliver WEBP pictures in WordPress given by the plugin.

Yet, this method has different downsides that are not viable with CDN administrations. You can now add or eliminate any files using the presentation options in Theme Settings – > Performance – > CSS and JS. For instance, you can stack the OWL Carousel library around the world or enable styles for it.

New portfolio page

The portfolio page used the “Masonry” content to coordinate every one of the pictures in a decent network and add useful channels. However, this had a disadvantage: the channels wouldn’t stack projects from different pages if you had various undertaking pages.

To tackle this issue, Woodmart 6.0 layout has presented the “AJAX links” function. “Portfolio Filters,” and you can now apply it similarly as on the store page. You can find and enable this function in Template Settings – > Portfolio – > Category Filters (Links) and Template Settings – > Portfolios – > AJAX Portfolios.

White Label

One more long-late functionality added in the new Woodmart 6.0 layout update is white labeling. You can see all pertinent settings in Template Settings – > White Label. What’s more, now you can supplant all the brand names “WoodMart“, and “Xtemos” with your name. You can likewise supplant all pictures connected with the logo. An exceptionally useful element for web offices who need to hide Woodmart layout information from their clients.

You may also like...

Leave a Reply

Your email address will not be published.