WoodMart 6.0 update beta test

If using Single image element in a simple page the Imgage style option does not work. I am using Image style: 3D Shadow on all single images in my blog and here it works ok, but not in simple pages, no image styles takes effect. This is an issue also with older versions.

Brgds
Rune

On my frontpage i have 3 products tab elements, bestsellers, populare and on sale products. For these products the pagination LOAD MORE does no longer work. I get an ajax error, productsLoadMore.js:292:14.

The same problem appear in other pages where i am using Products (grid or carousel) element to load ie. onsale products. In pages like this: /ukens-tilbud/

Both Load more and infinite scrolling does not work, gives an ajax error.

It seems to work ok in product archive pages and blog pages.

Brgds
Rune

I can not delete items from cart. I can delete items if i set quantity to 0 and click on update but not when using the X per item.

Hello,

It would be nice if you make a social share widget for footer widgets.

Hi Artem,

1. First, we should for sure add in the changelog and mention in big that many CSS classes have changed named, and therefore everyone should check their Custom CSS before updating

2. I’m fine with the option of loading old & new css but as my other beta colleagues, we need to ensure that the css total file size doesn’t get crazy. However, if I understand well the idea of this release is that now files were split in smaller parts, therefore it should not be an issue right? Only required old files and required new files will be loaded. Correct?

If that’s not the case, then I have another idea, maybe more simple. What about just creating a table of correspondance? You’d have only 2 columns : old class name, new class name. That would make everything easier. You said that mostly the word “woodmart” changed to “wd” but you said also that there could have been much more changed than that. So if we could have this table of correspondance, then I’d say it’s probably easier? And with that, it’s up to user responsibility to update, so you wouldn’t need to maintain an old css setting file.

What do you think?

After more thinking, I find it not a good idea to have a setting re-enabling old class css. Why? Because you’ve done a long hard work to optimize them, so if we give users the ability to re-enable old css, then what’s the point of your work?

I think we should not give the possibility to use old css class. However, I just think that we should do the necessary to allow smooth transition. That’s why I thought about the below :

1) Easy “find and replace” in the Custom CSS editor

2) Automatic replacement of css class by yourself upon update

3) Table of correspondance between old & new class in your theme documentation

What do you think? I would love the option 2, but not sure if feasible 🙂

There is no ability to manage the Product Reviews. What if I don’t want to use reviews or customize them ?

Hello,

We are going to prepare a new beta archive with all the fixes tonight. I would like to answer some of your comments here.

To @metuza

1, 3, 5, 8.2, 9 . These points will be fixed in our next beta release.

2. As we can see, you have fixed this issue.

4, 6, 7, 8.1, 10. It is caused by your custom CSS. Will be solved with our “Add deprecated CSS classes” option in the next beta release.

If using Single image element in a simple page the Imgage style option does not work. I am using Image style: 3D Shadow on all single images in my blog and here it works ok, but not in simple pages, no image styles takes effect. This is an issue also with older versions

Could you please send us an example?

On my frontpage i have 3 products tab elements, bestsellers, populare and on sale products. For these products the pagination LOAD MORE does no longer work. I get an ajax error, productsLoadMore.js:292:14.

It will be fixed.

I can not delete items from cart. I can delete items if i set quantity to 0 and click on update but not when using the X per item.

Strange, but we can’t even add any product to the cart. Could you please test how it works with a default theme on your website? It seems to be not related to our theme at all.

To @gevcen,

2. I’m fine with the option of loading old & new css but as my other beta colleagues, we need to ensure that the css total file size doesn’t get crazy. However, if I understand well the idea of this release is that now files were split in smaller parts, therefore it should not be an issue right? Only required old files and required new files will be loaded. Correct

We don’t want to load the actual CSS. We just say about deprecated class in HTML. For example, we had <div class="woodmart-buttons"> and now it is <div class="wd-buttons">. Then, when you enable these deprecated classes you will get this result <div class="wd-buttons woodmart-buttons">. And by doing this, your Custom CSS will work together with our new CSS.
So the CSS size will not be increased. By HTML size will a bit.

As for your other options

1) Easy “find and replace” in the Custom CSS editor

It wouldn’t be enough to just replace woodmart- with wd-. Some classes are renamed completely.

2) Automatic replacement of css class by yourself upon update

It is not possible, unfortunately.

3) Table of correspondance between old & new class in your theme documentation

We will think about it as well.

To @nvybvl,

It would be nice if you make a social share widget for footer widgets.

Sorry, but it is not the subject of our 6.0 update.

Kind Regards

Can’t wait to see the new better beta release.

I did find a corrupt db-table causing the add to cart and empty cart not working for guest users. Fixed table so this issue is solved.

When it comes to 4, 6, 7, 8.1, 10. I am not using any custom CSS. Just added a few yesterday based on font size and the word SØK to the right of search icon.

So the left margin for LI elements is from woodmart theme. I can not find any theme related css that should set a margin, which should be atleast 15-20px.

So my install has no customizations nore using a child theme at the moment.

I am using this opportunity to clean up in all my custom css and functions. And already i see that almost 30% of all my custom css is no longer necessary.

So personally i think the idea of deprecated css classes is not necessary. Also because there is LOTS of other new CSS so users will still need to study their custom css and make fixes, and clean up unused old css.

Brgds
Rune

Artem,

Just still few worries about the “Add deprecated css class”.

I’m not against the option as long as we provide users a way to fix those deprecated css class. Otherwise users would simply be tempted to enable this setting and that’s it. Nothing further you know. Altough this is not the goal. The goal is to fix the deprecated css class.

That’s why I think that if you wish to add this option, then

(1) it has to be temporary and be removed in next Major release, otherwise this setting would stay there for ages and users will never fix anything

(2) we need to give users the input to fix their deprecated css with a table of correspondance between OLD and NEW. Otherwise, it would be really complicated.

(3) another idea came to my mind: what if you add in the Custom CSS editor a flag/error whenever a deprecated class is used? this would be a first step in identifying the deprecated class, and then it’s up to user to find something based on the table of correspondance

1/ There is a console note about fonts:

a/ wp-content/themes/woodmart/fonts/woodmart-font.woff?v=6.0.0” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.

b/ wp-content/themes/woodmart/fonts/woodmart-font.woff2?v=6.0.0” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.

2/ What about instagram?

3/ There is a gap at the top of the page when “Combine JS files” is ON and a lot of console errors.

No 3rd plugins are installed. Only WPBacker. No e-shop functionality. Clean blog.

(see link in private)

Another option regarding the deprecated css. If making a table of correspondance would be too much time-consuming, then at least the minimum would be to provide us the full list of deprecated css.

That way, all we would need to do is search each of the deprecated class in our Custom CSS and if we find it, then we have to replace it.

I would say that this is the minimum helper we would need to get rid of the deprecated css, otherwse how users even identify deprecated css?

In woodmart 6.0 beta ( Theme setting > Performance > Combine JS files ) when I switch ON that settings I have a white space on my front end every where.

Attachments:

You must be logged in to view attached files.

TAB issue

Tabs are disappearing when you narrow the window on desktop.
They come back if you refresh the page.

In the changelog, can you clarify the below points please?

PERFORMANCE: Optimized Google fonts loading
Attributes like Swap/Optional… were already available. So what’s new?

PERFORMANCE: Separate page for mobile devices option (screenshot)
I don’t find this. Where is this located?

PERFORMANCE: “AJAX Dropdowns” local storage cache
How will users manage the cache? What will be the cache lifespan? How can we clear the cache if required? I see no settings on that.

ADDED: Categories to “HTML block” post type
What do you mean here? We can organize HTML Blocks by categories? But I don’t see this anywhere.

IMPROVED: “Load more” button now change URL to the current page on load content
This improvement is absolutely great! I’m just wondering if the migration from Page to Load More is safe in terms of SEO. See video in private.

In regards to the issue with missing Image style in pages i can see that this css is missing:
.wpb_single_image .vc_single_image-wrapper[class*=”vc_box_shadow”], .wpb_single_image .vc_single_image-wrapper[class*=”vc_box_shadow”] img {
box-shadow: 0 0 9px rgba(0,0,0,0.12);
}

This CSS file seems not loaded:
/wp-content/themes/woodmart/css/parts/int-wpbakery-base.min.css?ver=6.0.0

Or actually these classes is not added: vc_single_image-wrapper vc_box_shadow_3d vc_box_border_grey

It is OK in blog pages but not standard pages.

Se links to the different pages / posts in private area.

Brgds
Rune

Product price filter in archive pages custom filter does not work. It is there but there is no price and you can not move the slider to choose price. (Shop filters custom content, createt by html blocks))

Works OK in sidebar widgets.

Also if you switch from grid view to list view in archive pages you can not switch back to grid view. I had to force it back to grid view using browsers addressbar.

Hello,

We are sorry for the delay with the new beta version. Still working on all fixes and tests. Here is our response to all your questions:

To @metuza:

Regarding points 4, 6, 7, 8.1, 10 we have tested your demo and found custom CSS for all of them. Check the following screenshots:

4 – https://prnt.sc/110j0cr

6 – https://prnt.sc/110iwpa

7 – https://prnt.sc/110iyd4

8.1 – https://prnt.sc/110j4c5

10 – https://prnt.sc/110j6yd

As for the single image, it looks like a bug in WPBakery page builder that is not related to our update. We have tested this with default themes as well Twenty One (https://prnt.sc/1119env), Storefront (https://prnt.sc/1119fuy).

Product price filter in archive pages custom filter does not work. It is there but there is no price and you can not move the slider to choose price. (Shop filters custom content, createt by html blocks))

We don’t see this problem on your website https://gyazo.com/dc457bde5a972ae194dda768e082c910

Also if you switch from grid view to list view in archive pages you can not switch back to grid view. I had to force it back to grid view using browsers addressbar.

Make sure that you have enabled this option in Theme Settings https://prnt.sc/111jbaz

To @dido76bg,

1. In this case, you need to disable this option in Theme Settings -> Performance. It is not required on your website.

2. You need to use the API method or our new “Fake images” method that allows you just upload your own images. AJAX method is no longer allowed by Instagram.

3. We need your admin and FTP access to be able to check this problem. Admin access you provided is not valid.

To @noorealam96,

Are you able to provide us your staging website admin access so we can check?

To @gevcen,

(1) it has to be temporary and be removed in next Major release, otherwise this setting would stay there for ages and users will never fix anything

Sure, this option will be removed in our next Major release.

(2) we need to give users the input to fix their deprecated css with a table of correspondance between OLD and NEW. Otherwise, it would be really complicated.

We will try to prepare such table.

(3) another idea came to my mind: what if you add in the Custom CSS editor a flag/error whenever a deprecated class is used? this would be a first step in identifying the deprecated class, and then it’s up to user to find something based on the table of correspondance

It is a great idea but it would be hardly possible to implement technically.

PERFORMANCE: Optimized Google fonts loading
Attributes like Swap/Optional… were already available. So what’s new?

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.

PERFORMANCE: Separate page for mobile devices option (screenshot)
I don’t find this. Where is this located?

If you want to display different content for mobile devices, you need to go to Dashboard -> HTML Blocks and create a new block that you want to show on smaller screens. After this, go to Dashboard -> Pages -> edit the desired page and select the newly created block as “Mobile content” option in our theme metaboxes.

PERFORMANCE: “AJAX Dropdowns” local storage cache
How will users manage the cache? What will be the cache lifespan? How can we clear the cache if required? I see no settings on that.

The storage will be cleared on HTML Blocks save action and when you edit any menu via Appearance -> Menus. There is no need to clear it manually.

ADDED: Categories to “HTML block” post type
What do you mean here? We can organize HTML Blocks by categories? But I don’t see this anywhere.

You should see it here https://prnt.sc/111jnz7

IMPROVED: “Load more” button now change URL to the current page on load content
This improvement is absolutely great! I’m just wondering if the migration from Page to Load More is safe in terms of SEO. See video in private.

There are shouldn’t be any problems with this option and SEO. All links are the same.
The problem you described in the video is a totally different one. Currently, we don’t have a solution to this.

To @roadlink,

Tabs are disappearing when you narrow the window on desktop.
They come back if you refresh the page.

Try to reload the browser after the update. Some functions work on real devices only and might not be initialized after resize.

Kind Regards

Sorry, but you will not find any problems or issues in my live / production site where you have done your tests. My staging site is at .com domain, https://www.arctic-fritid.com

And here you will find all the issues.

Brgds
Rune

Hi Artem,

I didn’t understand what you mean.

1. Open the product page on desktop.
2. Resize it for any reason. Make is smaller.
3. You will see that all the TABS and contents will disappear.

Hello,

You can download new beta version here https://drive.google.com/file/d/1y6F6p_Sq4XJ0POJbCzYaSData5Ejj8jz/view?usp=sharing

@roadlink, just reload the page after resize. You will see accordion tabs then.

Kind Regards

Hi Artem,
yes I know it can be done but I can’t teach this to my customers 🙂
Do you think it is normal?
I believe it is a bug.

@roadlink, but your customers will not resize the browser to mobile view to check your website responsiveness. They will visit your website either with a desktop browser or with a mobile device. They will not face such problems.

Hello,

Any changes in product loop? My code as below does display only 1 column in mobile, with old version it follows the columns settings:

$woocommerce_loop[‘columns’] = $columns;
if ( $stylesheet == “woodmart” || $stylesheet == “woodmart-child” ) {
$wood_columns = woodmart_loop_prop( ‘products_columns’ );
if ( $wood_columns != $columns ) woodmart_set_loop_prop( ‘products_columns’, $columns );
}

// query database
$products = new WP_Query( $args );

if ( $products->have_posts() ) : ?>

<?php woocommerce_product_loop_start(); ?>

<?php while ( $products->have_posts() ) : $products->the_post(); ?>

<?php wc_get_template_part( ‘content’, ‘product’ ); ?>

<?php endwhile; ?>

<?php woocommerce_product_loop_end(); ?>

<?php endif;

wp_reset_postdata();

Brgds
Rune

Actually i see now that it is not only my own product loops showing 1 column. All archive products shows only 1 column in mobile. I am sure there was 2 columns before last update.

Well, the 1 column issue is caused by the grid / list view issue. As mentioned I was not able to switch back from list view. In old version there is 2 buttons, one to set list view and one to set grid view. v6+ has only one button, which is to set list view.

So then i have only 2 issues left before i can move v6+ to my live site and that is the MY ACCOUNT / USERNAME text to the right og my account icon in header. I have checked header settings and it is set to show icon and username.

And last issue is the list/grid view in product archive pages.

Keep up the great work 🙂

Brgds
Rune

On last update :

1. Deprecated CSS classes are indeed applied now in this new version but I do not find the setting itself “Add deprecated css classes”

2. I think it would be good to have a setting “purge cache” (or Dev Mode?) in Performance section to give us control on what is cached in the theme, even if cache is cleared on content update. This is not blocking for the release but a nice to have for the future.

Please do send me the 6.0
Thanks

Just a suggestion – in addition to White Label section you can add an option to unload Woodmart Icon Fonts on Frontend.

[Author]

Posts