Update 6.0 explained

We are excited to release our 6.0 update that is mainly dedicated to performance and site speed. It includes a lot of improvements, fixes, and new features and we are going to tell you more about the update in this overview. The update algorithm is quite straightforward:

1. Create a backup of your website and database.
2. Update the theme via Appearance -> Themes or manually.
3. Go to Theme settings and click on Save Options.
4. Go to Dashboard -> Settings -> Permalinks and save them to regenerate permalinks.
5. (optional) Review all your custom CSS and check all the used CSS classes (read more about our CCS refactoring)

CSS optimization

Our theme includes a lot of different elements, options, styles, versions, and all these things lead to a huge amount of styles. So the CSS part of the theme took 50-60% of the whole theme weight in the past. And that is why we have taken CSS optimization and refactoring to the highest priority. Our main style.css file had more than 25.000 lines of code and ~740KB that were loaded on all pages every user visit. And refactoring such a large file took much time to complete. But we did it and now it is 20% less even if you load the whole style.css file.

CSS Generator

Prior to our 6.0 update, we were using our CSS generator feature. It gave us the possibility to reduce the style.css file disabling styles for functions and elements that you never use. On average, this method yields a 20-40% smaller CSS file. But it had a major drawback that you are not able to load only used styles for particular pages. For example, you don’t use products on your home page but use them on the shop page. Then, you can’t completely disable these styles in the CSS generator. Another example is that styles for such pages as a cart, checkout, my account, etc. Their styles can’t be completely removed and at the same time, they shouldn’t be loaded on the home page at all. So to solve this limitation we have decided to remove our CSS generator option and split our CSS file into small pieces (~100 files) that will be loaded only in places where they are required. In other words, our CSS generator now works automatically and loads different styles on particular pages.

This method gives great results in most tests on our demo and development websites. Average CSS loaded on most pages has a size of 250-380KB. And it is 50% smaller than full CSS in our 5.x version. Note that this method loads multiple CSS files on the page (5-20 on average). But it is not a real problem if your server supports HTTP2. And if you want to have one CSS file to be loaded you can disable this option anytime. And the best solution would be to enable the “Combine CSS” option in the cache/optimization plugin you use. We are using WP Rocket on our demo and it works just great.

Demo home page example. 370KB vs 735KB with our 5.3.6 version

If you notice any unstyled elements or options somewhere on your website, please, create a topic on our support forum and send us the link where we can see this problem. As a workaround, you can load the full CSS file globally by enabling “Include combined CSS” in Theme Settings -> Performance.

Refactored CSS

Refactoring our CSS files our aim was not to break anything on your working websites and make the update process as smooth as possible. And as we carefully tested, you shouldn’t notice any braking changes after the 6.0 update. But we have changed a lot of CSS rules, classes, and HTML markup so if you have any code customizations in the theme, they might not work after the update. We will list the most important and global changes here:

Global changes

1. We have removed a lot of CSS selectors and now we use CSS variables.
   Most of our CSS classes that started with “woodmart-” now start with “wd-”. This simple fix reduced the CSS file by ~30KB. Currently, deprecated classes still loaded in your HTML to prevent your custom CSS code from being broken. If you don’t need this, you can disable this in Theme Settings -> Performance -> CSS. You can also find a full list of classes changes here https://docs.google.com/spreadsheets/d/1b_PBt1itPNby4mkpeV_VcRrQHPHjtuF9DIs8jJE0maQ/
2. Combined action buttons styles (burger, close, and filter animated buttons replaced with font icon).
3. Combined popup styles.
4. Form style classes “.form-style-rounded”, “.form-style-semi-rounded”, “form-border-width-1” removed from body tag.
5. Nanoscroller library replaced with pure CSS scrollbar.
6. Removed unused Photoswipe library styles.
7. Removed unused Magnific popup library styles.
8. Font icon <i> HTML tag changed to <span> due to the accessibility issues.
9. Refactored list styles. <ul> and <ol> list icons and spacing styles now set globally and removed in specific places with HTML list structure (menus, pagination, widgets, etc.)
10. Refactored forms style.
11. Refactored page title style.
12. Refactored search form style.
13. Refactored search results style.
14. Refactored all header elements.
15. Refactored all navigations style.
16. Refactored dropdown menu style.
17. Refactored off-canvas sidebar.
18. Refactored action button on product hovers.

Elements changes

1. Banner: refactored font size, content align, and width options.
2. Countdown timer: refactored font size options.
3. Google map: refactored content align option.
4. Images gallery: refactored images vertical and horizontal align options.
5. Info box: refactored font size option.
6. List: refactored font size option.
7. Section title: refactored align, width and font size option.
8. Slider: refactored content align option.
9. Team member: refactored align option.
10. Testimonial: refactored font size option.
11. Responsive text block: refactored align, width and font size option.

Plugins

1. Added additional theme styling to the WCFM - WooCommerce Multi Vendor Marketplace registration, vendor and store listing pages.
2. Added additional theme styling to the Dokan dashboard, vendor and store listing pages.
3. Force Dokan plugin pages to use Font Awesome 5 icons from Elementor or WPBakery page editors.
4. WPML language and currency switcher refactored.
5. WPCS – WordPress Currency Switcher: switcher refactored.

JS optimization

Our base JS file that contains all simple scripts and initializes all JS libraries had a size of ~114KB before the update (minified version). We have split it into small files and now load only those parts that are required for the particular page. By doing this, we were able to reduce the average JS loading on the page to 20-30KB. Note that it is just our functions.js file and it doesn’t include all JS libraries.

And what is more important about our JS optimization is that we have refactored all the methods and now they are not initiated on document load event. For example, our tooltips were initialized once the page is fully loaded. But in fact, the user sees the tooltip only when he moves the mouse to some particular place with the tooltip. Now, the tooltip is added to the HTML code only on mouse move to the element. Such improvements have reduced our theme scripts execution time at least by 70-80% on document loading. And it has a positive impact on all metrics including Google Page Speed.

Other JS optimizations

1. Removed moment.js library and replaced it with dayjs. The file size was reduced by 190KB. This library is used for our countdown elements.
2. Nanoscroller.js library is removed completely.
3. Added advanced control on JS files loading to our Theme Settings -> Performance -> JS.
4. Removed deprecated jQuery methods from our scripts and libraries ($.isFunction, $.type, $.resize(), $.scroll(), $.keyup(), $.change(), $.submit(), $.load())

If you see that some JS functionality doesn’t work as expected, try to enable “Combine scripts files” in Theme Settings -> Performance. Also, create a topic on our support forum so we can review your case.

Mobile devices optimizations (experimental)

If you have already tested your website with Google Page Speed you could see that the mobile score is always less than the desktop one. It happens due to the fact that Google tests your website simulating an old and slow device Moto G4 released in 2016. And while you are loading the same website both on desktop and mobile you see this difference. In the new update, WoodMart gives you an opportunity to load different content for mobile devices. And by doing this, you can create a simple lightweight layout for your home page that will be loaded on mobile devices only. So your desktop version will not be affected.

If you want to display different content for mobile devices (not by simply hiding it with CSS or page builder features), you need to go to Dashboard -> HTML Blocks and create a new block that you want to show on smaller screens. It should be a small and lightweight block with a few rows if you want to get better results in performance. After this, go to Dashboard -> Pages -> edit the desired page and select the newly created block as the “Mobile content” option in our theme metaboxes.

Dashboard -> Pages -> edit page.

To detect if your visitors use mobile devices our theme utilizes WordPress core “wp_is_mobile()” PHP function. You can read more information about how it works in the documentation here https://developer.wordpress.org/reference/functions/wp_is_mobile/
Note that we excluded iPad from being mobile devices as it should work by default. So when users visit your website with an iPad they will see the desktop version. Of course, it has a responsive layout so it is not a problem for you. And it shouldn’t affect the performance since iPads are much more powerful than mobile devices like Moto G4 that used by Google Page Speed.

IMPORTANT. If you use our mobile optimizations features, you have to be sure that your cache plugin supports separate cache files for mobile devices. We are using WP Rocket for this purpose and it works well with mobile optimization.

Mobile Theme Settings preset

Another powerful possibility added in our 6.0 update is our Theme Settings preset for mobile devices. (read more about presets here). This feature gives you the ability to configure any of our Theme Settings separately for mobile devices. Example use-cases are: turn on/off lazy loading for images, replace footers with different HTML blocks, change fonts, etc. All these settings will be applied for mobile devices only so you can flexibly optimize the performance without customizing the desktop version.

Dashboard -> Theme Settings -> Options presets.

Mobile HTML DOM size reduction

This option can be found in Theme Settings -> Performance and it is designed to allow you to reduce the HTML DOM size for mobile devices. Currently, it does only one thing: clean your HTML from the desktop header markup. Usually, it takes 10-20% of the whole page and always stays hidden so it shouldn’t be loaded on mobile phones. In our future updates, we are going to find other places in our theme that can be excluded from loading on mobile devices to increase this option performance more.

Dashboard -> Theme Settings -> Performance.

Extra performance optimizations

Google fonts

Prior to our 6.0 update, when you select any Google Font in our Typography settings, all its variations and font-weight are loaded on your website. We made it work this way to ensure absolute compatibility with all CSS rules on your website. But it is a bad approach in terms of performance. So now we load only 2 font weights by default: 400 and 700 or 300 and 600 (it depends on font). By doing this, we have reduced the number of font files loaded by 50-70% in different situations.

INFO. Note that you still can load any font-weight you need on your website. If you see that some font-weight is missed, just go to Theme Settings -> Typography and select the desired font-weight for some of the font groups.

System font stack

If you don’t want to load any external font files at all, you can select our system font stack in Theme Settings -> Typography. It will load different fonts depending on the system you are browsing the website on. Using Mac OS you will see one font, using Windows - another, and so on. It is a great option for performance but obviously, the visual aspect will not look as good you might expect.

Preload key requests

When you test your website using Google Pagespeed you might see a warning telling you to preload key font requests. It often complains about our “woodmart-font.woff” file. This font file is tiny and contains all system icons used by our theme. It includes cart, wishlist, compare, quick view, search and other icons. So to solve this problem you can go to Theme Settings -> Performance and enable the “Preload key request” option

Optimize Elementor CSS and JS

Elementor in its latest updates improves plugin general performance and resource loading. But as for now, we have added a few options to reduce the number of CSS and JS files loaded by Elementor that we never use in our projects. If plugin developers improve their resources loading as promised, these options will be removed from the theme. But by that time, you can find them in Theme Settings -> Performance -> Plugins. Note that you use them at your own risk, if you notice that something is broken in Elementor functionality or styling, it would be better to turn them off.

WEBP Images support

WEBP is a modern format for images that is recommended by Google. Using WEBP should increase your overall Google Pagespeed score as well. We have added compatibility for the WEBP image format provided by the Imagify plugin. Currently, it is fully supported and we use this plugin on our demo website as well. The only limitation is the single product page image gallery from WooCommerce. It is not possible to use WEBP there because it breaks default WooCommerce scripts for variable product images. We have also consulted with Imagify developers but it is not possible to solve this while using HTML tag. You can use an alternative “rewrite” method to serve WEBP images provided by the plugin. But this method has another drawback that it is not compatible with CDN services. Resources loading control Since our theme now loads a bunch of CSS and JS files instead of a single one, you might want to load or not load some particular files globally. So now you can add/remove any file using our performance options in Theme Settings -> Performance -> CSS & JS. For example, you can enable OWL Carousel library to be loaded globally or styles for it.

New portfolio page

Our portfolio page utilizes “Masonry” JS script to organize all images in a nice-looking grid and add handy filters functionality. But it has one negative aspect: if you have multiple pages of projects, filters don’t load projects from other pages (second, third, and so on.) To solve this problem, we have introduced the “AJAX links” functionality for our portfolio filters. And now you can make it work in the same way it is done on our shop page. You can find and activate this function Theme Settings -> Portfolio -> Categories filters (links) and Theme Settings -> Portfolio -> AJAX Portfolio.

New portfolio options

White label

Another long-waited function has been added in our new update - White labeling. You can find all related settings in Theme Settings -> White label. And now you can replace all branding names “WoodMart”, “Xtemos” with your own. You can replace all related logo images either. A very useful feature for web agencies that want to hide the information about our theme from their clients.

White label options

Elementor templates library (300+ templates)

Before our update, we had this library for WPBakery page builder only. All our demo versions are available for Elementor except our section templates library. And starting from now, this library is available for Elementor as well.

Elementor templates library

WPML compatibility enhancements

We have added a few improvements for a better user experience using WPML. Here are the main changes:

1. HTML Blocks translated versions now automatically loaded in different languages.
2. All Elementor widgets texts now can be translated with WPML translator feature. Not needed to create a separate page.
3. Header builder texts now can be translated with String translation. Not needed to create a totally new header for a new language.

Theme Settings presets

Our new custom presets functionality allows you to create different settings for some particular sections of your website. For example: set different colors for particular product categories, special layout for particular pages, custom fonts for selected posts, etc. Actually, you can configure almost everything on your website in different places. Find a new interface for presets in Theme Settings -> Options Presets. Read more here https://xtemos.com/docs/woodmart/theme-settings-presets/

Internet Explorer 11

Elementor page builder has dropped support of IE11 from 3.0 version (https://developers.elementor.com/elementor-dropping-support-ie/) and WordPress considers dropping support for IE 11 (https://www.pcmag.com/news/wordpress-wants-to-drop-support-for-internet-explorer-11) since browser usage for the first time fell below 1% and currently stand at 0.46%.

Based on these circumstances and to utilize modern web technologies such as CSS variables and modern JS, our team decided to reduce the support of Internet Explorer. Following changes allow us to hugely decrease theme style files and increase site performance in modern web browsers. Generally, IE11 is still supported, but a completely equal frontend view relative to modern browsers is not guaranteed.