Home › Forums › WoodMart support forum › Some problems
Some problems
- This topic has 28 replies, 3 voices, and was last updated 5 years, 3 months ago by
Artem Temos.
-
AuthorPosts
-
November 26, 2019 at 6:11 pm #159194
arturs4ParticipantHi!
I have renewed support, and I would like you to fix these problems ASAP:
1. Theme’s “Custom CSS for tablet” starts from 1024 px width, but Wpbakery responsive options for tablets starts at 991 px width. This makes a gap 991px – 1024px, where your theme’s custom css is in effect, but column design from Wpbakery is not. How can I synchronize these widths so that they took effect at same window/screen width?
2. “Infinite scrolling’s” (https://woodmart.xtemos.com/infinite-scrolling/?opt=layout_infinite) main slider on Android phone, Chrome browser, doesnt load 2nd slide’s background image – neither in your site, neither in mine.
Regards,
ArtursNovember 27, 2019 at 7:28 am #159286
Aizaz Imtiaz AwanKeymasterHello,
1) As you said that the theme custom CSS for tablet starts from 1024 px width but the WP Bakery responsive options for tablets starts at 991px width. To synchronize these widths requires customizations and this is beyond our limitations and support policy.
But we will try to consider this in the nearest future coming release of theme.
2) Your problem is resolved. I have test your slider and noticed that that the second slide background image not shown in android chrome browser. But when I edit your second slide and change the order of slide to “1” and edit the fist slide and change the order to ‘0’ then It shown alright in android mobile chrome browser.
Video for clarification: https://jmp.sh/9fGfn71
Best Regards.
November 27, 2019 at 3:56 pm #159461
arturs4Participant1) It would be great if you could synchronize them in future, because if I’m increasing font size for tablet and if column width is not changing to wider as well, then with window/screen sizes between 991px – 1024px it looks quite awful – big letters in narrow columns.
2) Yep, now it works. Thanks!
Best regards,
ArtursNovember 27, 2019 at 4:10 pm #159462
arturs4ParticipantThere is another thing I would like to ask.
November 27, 2019 at 9:21 pm #159499
arturs4Participant4) There is also problem with lazyload – product images are not loading. Screenshot attached.
Attachments:
You must be logged in to view attached files.November 28, 2019 at 5:52 am #159543
Aizaz Imtiaz AwanKeymasterMost Welcome,
Tablet and desktop are two different screens. So it is not possible to use the desktop view also for the tablet screens in the product page. It requires customization and this is beyond our limitations and support policy.
Yes, the product images loads after a while because you enabled the lazy loading feature. So if you want to disable the lazy loading feature in your site you need to go to the theme settings >> Performance >> Lazy loading for images.
I have test your site after disabling the lazy loading and the products images loads just fine.
Best Regards.
November 28, 2019 at 4:11 pm #159712
arturs4Participant2) Slider problem solution was temporary – the second slider’s img is not showing again. I changed slider order, and it worked for a while, bet then again second slider’s img was gone. Please, give me a more permanent fix for this.
3) That’s sad. I hope you will add product image styling variants for tablets in future.
4) Lazyload should load ALL images, that are in browser window’s visible area, when a page is loaded, no? But that doesnt happen – page loads with white blank spaces where should be images (see screenshot!). That is clearly a bug!
November 29, 2019 at 6:57 am #159798
Aizaz Imtiaz AwanKeymasterHello,
2) I noticed that you again revert the slide order. Kindly used the same order as it before which I have set in your site. Just use the second slide as number first and the first slide will be used as a second slide. You can check back now it is again working just fine.
3) Sure, We will try to consider it in the nearest future update of theme.
4) The actual purpose of lazy loading is to optimize your images loading on the website. They will be loaded only when user will scroll the page.
Its default behavior of WooCommerce that the other content loads first and then the images loads. Also its seems that your website is quite slow that’s why it loads the images not suddenly after a while. Might be your third party plugins is the cause of the issue but its not related to the theme. Lazy loading is working just fine.
You can check in the below video that your further images loads with scroll.
Video for clarification: https://jmp.sh/HhrpCjjBest Regards.
November 29, 2019 at 9:55 am #159868
arturs4Participant2) I switched order because the order you set wasn’t working anymore. Now you’re order is working again, but I will see if it will work after some time.
3) Thanks.
4) Your example video has too small height! Window/screen height must bee at least so that you could see first line of products without scrolling. Then you will see that banner image loads, but product images do not.
Best regards,
ArtursNovember 29, 2019 at 11:09 am #159888
Aizaz Imtiaz AwanKeymasterHello,
Here is another video in which product images loads just fine with scroll because lazy loading is enabled and you contain banner before products.
Video: https://jmp.sh/lLQ4HFk
Because you are using banner in first row in all the categories that’s why the product images loads with scroll. Because the product images part comes exist in the part of page which needs scroll.
So If you did not want this behavior and want to load your images without scrolling then go to theme options >> Performance >> Lazy loading for images and disable the lazy loading.
I also test your site by removing a banner from one of you category from the description just for testing purposes, Products>> Categories and then the first line of products loads without scrolling on that category because it did not contain any banner.
Page URL: https://www.birojamebeles.lv/test2019/lv/kategorija/konferencu-galdi/
Video for clarification: https://jmp.sh/R7m7L7sBest Regards.
November 29, 2019 at 12:21 pm #159930
arturs4ParticipantIn your 1st video look at 0:35 where you can see that product images DOESNT load until you make a scroll. That is not right! All images inside visible area should load and be visible even if you dont scroll. Lazyload shouldnt load only images that are outside visible area. That is the basic principle for lazyload.
P.S. Please, dont make changes to the site. This is not a test site.
November 29, 2019 at 2:49 pm #159985
Aizaz Imtiaz AwanKeymasterHello,
Yes, you are right. I have test the same thing on my test site, by using the banner image on category page also the lazy loading is enabled but still it works just fine on my test site.
Kindly check your site after deactivating all the third party plugins. Because it is clear that the issue is not in the theme.
Best Regards.
November 29, 2019 at 3:06 pm #159988
arturs4ParticipantI disabled all plugins, except Woocomerce, Woodmart Core and WpBakery. I removed all custom code from functions.php. And the problem was still there.
Then I disabled WpBakery, and all images were loading ok. But your theme doesnt work without WpBakery, so if it is a compatibility issue, then you must fix it.
November 29, 2019 at 4:45 pm #160002
arturs4ParticipantI think I found the problem. It is the Lazyload option “Generate previews”: If its OFF then it leaves blank spaces. If its ON, then all is good.
I don’t know if it is working as it should, but leaving blank spaces doesnt seem right to me.
November 30, 2019 at 6:32 am #160083
Aizaz Imtiaz AwanKeymasterHello,
Yes, might be possible it is due to “Generate previews” option.
But now I test your site again and everything works just fine, banner and images loads without scroll and on scrolling down the further images load that means lazy loading working just fine now.
Video for clarification: https://jmp.sh/dapp62F
Best Regards.
November 30, 2019 at 8:19 am #160093
arturs4ParticipantYes, now images are loading ok, because I enabled “Generate previews” – before it was OFF.
But main slider’s 2nd image is not loading again, though. Can you, please, check it on your android chrome?
November 30, 2019 at 12:08 pm #160138
Aizaz Imtiaz AwanKeymasterHello,
I’m glad that images are loading fine now.
Could you please deactivate all of your third party plugins and check with default theme plugins. Because Jquery errors shown in the console in only chrome browser which did not let the background image loads in the android chrome.
Screenshot for clarification: https://jmp.sh/zv2D2B5
Also try with different resolution image for background and for the temporary fix you can switch the slides order and update both the slides.
Best Regards.
November 30, 2019 at 2:18 pm #160169
arturs4ParticipantHi!
I deactivated all plugins, except Woocomerce, Woodmart Core and Wpbakery, and I still got the same problem. Screenshot attached.
Regards.
Attachments:
You must be logged in to view attached files.December 2, 2019 at 8:28 am #160472
Aizaz Imtiaz AwanKeymasterHello,
Yes,In the chrome browser the warnings still shown.
Screenshot for clarification: https://jmp.sh/ZJNgvuN
Its seems the issue with in the chrome browser settings and not with the theme. Because on all the other browsers the slides works just fine.
You can check the below article to fix it: https://github.com/bevacqua/dragula/issues/468
And these warnings are harmless and you can simply ignore it, these warnings do nothing bad.
Best Regards.
December 2, 2019 at 9:52 am #160495
arturs4ParticipantHi!
I don’t care much about the warnings. The problem is that the 2nd image is not showing!
So, what is the solution? To add a CSS rule
touch-action: none;
? Well, I added this:
.woodmart-slider-wrapper, .woodmart-slider, .owl-stage-outer, .owl-stage, .owl-item, .owl-nav {
touch-action: none;
}
and it didn’t work.Any other solutions?
Regards,
ArtursDecember 2, 2019 at 2:14 pm #160575
Aizaz Imtiaz AwanKeymasterHello,
The only way to fix this is to use those background images as a row background except of just using as just a featured image. Because due to some reasons the chrome browser did not able to display the second slide featured image.
All you have to do is to remove the featured image of slide and edited the very first row which contains all the content and upload the same image for row background from “Design Options” tab.
Screenshot for clarification: https://jmp.sh/GjDAvHh
Screenshot for Row Background: https://jmp.sh/URZBiw9Or if you do not want to do this. Then allow me to troubleshoot your site by disabling all your third party plugins and by removing all of your custom code. You can take a backup of your site.
Best Regards.
December 2, 2019 at 3:47 pm #160616
arturs4ParticipantI tried your solution, but it didn’t work very well – with img as background there are white gaps around img. Screenshot attached. Red borders are the size of featured image.
Ok, I made a backup. You can do troubleshooting.
Regards.
Attachments:
You must be logged in to view attached files.December 3, 2019 at 8:26 am #160708
Aizaz Imtiaz AwanKeymasterHello,
Your problem is resolved. I test your site by deactivating all the third party plugins and switch to the parent version of theme.
Then I edit your second slide named as “BIROJA MĒBELES slide 2” and use the same image for background with .png format and by changing the resolution of image. Then the image loads in the chrome browser of android phone.
You can check in any android phone after clearing your site and browser cache.
Video for clarification: https://jmp.sh/q3KL9zE
Best Regards.
December 4, 2019 at 9:20 am #160987
arturs4ParticipantHi!
Thanks for trying, but come on, man! PNG image? Really? It weights 339 KB, which, first of all, is a lot of data to load for mobile device; second, the quality of image is quite terrible; and, third, Google for such big images gives SEO penalties, which causes a drop in Google search results. Since Google is our main source of clients, a Google penalty and a drop in results is unacceptable. And the big file size also seems too big of a sacrifice for slider fix.
I’m sorry to say this, but this solution isn’t going to work. Can you, please, find a solution that doesnt include big file sizes with low quality?
Regards,
ArtursDecember 4, 2019 at 10:41 am #161005
Aizaz Imtiaz AwanKeymasterMost Welcome,
Sorry but there is no other way to fix this issue. I have tried everything and then using the png format for image and finally it fixed the slides issue in chrome browser of android.
If you want to increase the quality of image. Then simply increase the image resolutions with some photo editing tool and you can also compress the image to avoid big file size without losing quality of the image with any photo editing tool.
Best Regards.
December 4, 2019 at 11:09 am #161014
arturs4ParticipantWho is the developer of this slider?
Regards,
ArtursDecember 4, 2019 at 1:37 pm #161080
Artem TemosKeymasterHello,
We are using OWL Carousel library for this slider.
Try to add the following PHP code snippet to the child theme functions.php file and check how it works
function woodmart_get_slide_class( $id ) { $class = ''; $v_align = get_post_meta( $id, 'vertical_align', true ); $h_align = get_post_meta( $id, 'horizontal_align', true ); $full_width = get_post_meta( $id, 'content_full_width', true ); $without_padding = get_post_meta( $id, 'content_without_padding', true ); $class .= ' slide-valign-' . $v_align; $class .= ' slide-halign-' . $h_align; $class .= ' woodmart-loaded'; $class .= ' content-' . ( $full_width ? 'full-width' : 'fixed' ); $class .= $without_padding ? ' slide-without-padding' : ''; return $class; }
December 4, 2019 at 4:04 pm #161117
arturs4ParticipantThis fixed the problem! Thank you very much!
Best regards,
ArtursDecember 5, 2019 at 7:11 am #161205
Artem TemosKeymasterGreat, you are welcome!
-
AuthorPosts
The topic ‘Some problems’ is closed to new replies.
- You must be logged in to create new topics. Login / Register