Extra thumbnails loaded and other

Hi. I am having a few issues, number 1 is a bug, others a just slight imperfections of theme:
1) I was customizing my website for some time and checking it with GTmetrix this morning found that requests number significantly rose – from 60 to 81. I’ve checked waterfall and found that all 21 extra request is due to images being loaded. These images are tiny 10×10 thumbnails. They are obviously not needed, please help me to solve this issue. GTmetrix before and after is in attachment.
2) Woodmart Categories element when layout is set to “masonry (with first wide)” loads full size picture for first category. It leads to getting zero points in GTmetrix “Serve scaled images” and extra 200kb of traffic.
3) Woodmart Slider also loads full size images. For some strange reason they are not shown at all in GTmetrix and Pingdom, but it’s still not good for user’s traffic.
4) My categories images are rather dark, therefore I need categories names text to be white to get a decent look of “Product Categories” element. I achieved this via advanced typography settings. But now categories names are invisible on mobile because they are shown outside of the image on white background. Can you please advice how to display categories names in white on desktop, but in black on mobile and vertical tablet?
5) On product page image navigation arrows are always black. This is making them invisible when product images have dark background. Arrows should have light semi-transparent background – this way they will be visible on both white and black background.
6) For single product page I like “Bottom (1 column)” layout of images. It looks fantastic on desktop. But under smaller resolutions it’s not that good. Under landscape tablet images are no longer shown in column, now they are in slider – this doesn’t look particularly good because right column with product info etc. has much bigger height. Also under all resolutions except desktop user has no clue that there is more than one image because there are no thumbnails at all. Maybe he will notice arrows and try them or maybe not. This is not good.
7) On mobile when I tap on image or picture located on hotspot popup it is just closed instead of sending me to product page.
8) When both “sticky product” and “sticky add to cart” are activated and “Thumbnails position” is set to either “Bottom (1 column)”, “Bottom (2 columns)” or “Combined grid” sticky add to cart is shown before cart button is gone.

I already found the reason beyond issue number #1 – it is disabled “Base 64 encode for placeholders” option in theme settings->performance, maybe it will be useful for somebody with similar problem.

Hello,

1 and 2 you need to optimize your images before uploading, upload big enough but not huge images.

4. Please provide the page URL I will provide custom CSS.

5. It is not possible to change the color of arrows depending on the image background. I can provide CSS for arrows background

6. We shall revise, meanwhile try another layout.

7. and 8 please provide pages URL we shall check.

Best Regards

Thank you for your answer.
1) I am still don’t understand how this base64 encode works – after re-enabling this function extra requests disappeared from gtmetrix report, but when I load the page in Chrome (cache was cleared), devtools show all these base64 10×10 images. When I check your demo page they are not loaded.
2) & 3) I will re-upload smaller images for slider and categories, but please consider updating these elements of your theme to make them fully responsive
5) I understand that changing colour of arrows depending on image is rather difficult. Please provide me with a way to change arrow colour, show semi-transparent background behind the arrow and manage this background’s colour. Please consider providing an easy way to customize this element in future updates
6) just my suggestion for “Bottom (1 column)” layout – for tablet landscape use desktop layout, for all smaller sizes use slider instead of column as you do now, but add thumbnails
7) you can see the issue on your own website, e.g. bikes home layout with hotspot image. On desktop when I click on hotspot it opens a popup, when i click on product name or image I am being redirected to product page, when I click on add to cart, product is added to cart. On mobile I can click any of these place with one result – popup is just closed, nothing else happens. I checked this on two different smartphones with different browsers.

Pages adresses below:

Hello,

1. Remove all the demo images which are used as a background on rows.

2. The images are fully responsive. Please provide the page URL with the problem.

5. Provide the page URL.

Best Regards

1. I’ve just checked my main page in backend editor and I don’t see any rows using background images.
2.You can check this on my main page. I also noticed that smaller masonry blocks are always shown with 300×300 images which is not enough for bigger displays. In my case on 27″ 2560×1440 display these images have to be upscaled to around 400×400 which makes them somewhat blurry.
5. Any product in my shop, see particular link in attachment

Hello,

1. When base 64 encodings is enabled for lazy loading, those images are not loaded as HTTP requests. They are encoded directly in HTML source code.

2. and 3 This is the way Product category element and Slider work. The images are responsive. Please provide the screen where images are not responsive. On mobile the design changes, titles goes under the image.

4. Change the design in Product Category design http://prntscr.com/o8wn3a

5. Please add this code to the Theme Settings > Custom CSS > Global:

body .woocommerce-product-gallery .owl-nav > div, 
body .wrap-loading-arrow  > div {
  background-color: rgba(255,255,255,0.9);
	margin: auto;
	padding:10px;
}

6. This is the way it works to avoid long annoying scrolling to “Add to cart” button. It cannot be changed.

7. Please provide the page URL with the problem.

8. When you have more content this problem does not occur.

Best Regards

2) & 3) I think there’s some misunderstanding – you mean that the whole element is responsive, so it looks OK on mobile, while I am talking about serving images in physical size (resolution) appropriate to the screen. Usually this is achieved by using srcset attribute (https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/). Most smartphones have viewport width around 400px, if providing them with retina images this will give us 800px maximum needed size. While your “product categories” and slider elements always provide same size of pictures despite screen size. So for product categories I am getting 1200px wide images for first big category image even on mobile with tiny screen – it can significantly decrease page load time and is a complete waste of traffic. For smaller categories images I am always getting 300px wide images which is too small for desktop display.
4) you mean it’s difficult to customize this element? I was able to partly achieve desired result via CSS styling for mobile only but for some reason it affected only the size of product count text, but I was not able to change the colour. So I suppose this should be easy for someone knowing this theme well.
5) thanks! That worked. But there’s slight imperfection – after adding CSS, arrows are shown lower than in the middle of vertical height of image.
6) sorry, I don’t get what you mean, I suppose you misunderstood me. I mean using not full size images, but small thumbnails on mobile like in your “Bottom (horizontal carousel)” layout.
7) https://woodmart.xtemos.com/demo-bikes/demo/bikes/ – try to use hotspots on mobile
8) what kind of content? Anyway this problem occurs in my case and for other theme users too. This function does not work as expected with column layout of product images.

Hello,

2 and 3 srcset is added by Woocommerce for products and is not added for the categories. We cannot change it by our theme. Perhaps Woocommerce will fix it in the future.

4. Set the design as it was I shall provide the CSS

6. The sizes are set by Woocommerce and we do not want to interfere by customization not to infringe the compatibility to other plugins.

7. This is the way the hotspot works, please check the demo https://woodmart.xtemos.com/image-hotspot/

8. This cannot be changed either.

Best Regards

2) & 3) I though your categories element is completely custom. And what about your slider? It’s not related to WooCommerce.
4) thanks, I’ve changed design to default style
5) after adding CSS, arrows are shown lower than in the middle of vertical height of image
7) I don’t think so. On desktop then I click on hotspot I am being redirected to linked product, on mobile that doesn’t happen. The link you provided doesn’t have links set to hotspots, please use this one for checking – https://woodmart.xtemos.com/demo-bikes/demo/bikes/

Hello,

2) & 3) This is the theme custom element, however, we apply the Woocoommerce template which displays the category title and image. You can check how it works, enabling the showing categories on the shop page, you will see there is no srcset
5) The arrows position depends on the image height https://gyazo.com/7ea58407e989007955c521d5447fb7c8 it cannot be changed. I did not change the position of the arrow, I have just added the background.
7) This the way it works: on desktop: hover – show, click – goes to the product page, on mobile the first click – show, the second click – goes to the page as there is not hower on mobile.

Best Regards

2) & 3) OK, please consider updating in future releases, for now I’ll have to use some adaptive images plugin
5) you didn’t change position of arrow, but it is changed somehow. Please take a look at those screenshots with custom css disabled and enabled. The position of arrows for version with css is clearly lower although image is the same.
without css – https://prnt.sc/oai4ah
with css – https://prnt.sc/oai4j3
7) the issue is that on mobile second click leads to nowhere – after I make a tap popup just disappears and I am still on the original page, not on the product page.

Hello,

Replace the code with this one:

body .woocommerce-product-gallery .owl-nav > div, 
body .wrap-loading-arrow  > div {
  background-color: rgba(255,255,255,0.9);
	padding:10px;
}

Give me the link with the hotspot element on your site, I am trying to find and cannot.

Best Regards

5) Thanks, now this issue is solved
7) I am having this kind of issue on your demo website as well. I tested it on two different smartphones. Here is a link to hotspot element on my website:

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.hotspot-action-click .hotspot-content {pointer-events: visible}

Best Regards

Thanks, but that doesn’t solve hotspot issue.

Hello,

This issue will be fully fixed in the nearest theme update in the second part of July.

Best Regards

Great to hear that. Thanks!
So what’s about #4?
And do I understand correctly that “Bottom (1 column)” layout (described in #6) will be corrected in future?

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .category-grid-item .category-title {
color:white;
}
body .category-grid-item .more-products {
color:white;
}

Best Regards

I suppose you’ve meant Theme Settings > Custom CSS > Desktop ?
When set as global white text is invisible on mobile.

Hello,

Yes, that is right.

Best Regards

Sorry, but there’s still a problem – looks like your Custom CSS settings have some fault in their logic.
I used CSS provided by you in desktop and tablet custom CSS fields. Everything looks as expected in all resolutions except the exact brakepoints between desktop and tablet – 1024px and between tablet and mobile – 768px. For these resolutions custom CSS does not work. On 1024px I am getting black text although it is supposed to be white, on 768px I am getting white text (invisible on white background) which is supposed to be black.
If I am right this is rather significant bug.
Please see attached screenshots.

Hello,

Each time when you check the site with the emulator, reload the page. Check the styles on real devices, if the problem occurs on the real devices, advice the width and provide the screen.

Best Regards

Sorry. I’ve just checked with real device and everything works fine. It’s really strange Google can’t simulate other devices in a proper way. Unfortunately I don’t have tablet, so I had to rely on Chrome devtools.
Meanwhile we’ve been dealing with these issues I found a few other places where I need your help:

9) remove SKU and category information from product quick view
10) remove wishlist like button from product images in catalogue on mobile and tablets
11) show product images on product page cropped to 1:1
12) don’t load full size images on product page for tablet and mobile
13) make search element white instead of grey, please take look at particular page

14) show custom text after short description:

• some custom text
• Dimensions: [W] x [H] [dimensions unit] // pulled from product data
• Weight: [weight] [weight unit] // pulled from product data
• [attribute 1]: [attribute 1 value 1], [attribute 1 value 2], etc. // attribute and it’s values pulled from product data
• [attribute 2]: [attribute 2 value 1], [attribute 2 value 2], etc. // attribute and it’s values pulled from product data

I know you have a feature to show attribute table but it shows all attributes even those which I do not want customer to see
15) show different size guides depending on product attribute value

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

9)

body .popup-quick-view .entry-summary .product_meta > span {
display:none;
}

10) add to Mobile/Tablet

body .product-grid-item .yith-wcwl-add-to-wishlist {
    display:none;
}

11) Follow the instruction and you will configure the images as per your needs https://xtemos.com/docs/woodmart/faq-guides/image-size-content-alignment-product-grid/

12) Woocommerce does not provide such an option.

13) Provide the screen and page URL, which one?

14) Our theme does not have options

15) It is not possible.

Best Regards

Thanks for prompt reply!
9) and 10) your code works like a charm!
11) unfortunately through options depicted in manual you provided we can set crop only for thumbnail images, while I need product page images to be cropped
12) I suppose this can be done through disabling magnify option on smaller screens
13) the link was in private content section of original message
14) maybe it is possible to show “additional information” styled not as table, but as text instead?
+ 16) I found a bug – when using JQuery 3.4.1 sorting does not work on shop page. When I switched to twenty-nineteen theme everything worked as it should. In console there’s an error message “Uncaught cant get selector for pjax container!”

+ 17) Woodmart button text colour selector doesn’t work if background colour is not selected. With both dark and light color schemes text is dark. It starts working after I select some background color. I made a screenshot of options menu I am writing about.
+ 18) I want to use my navigation font for responsive text block, but it’s not in the drop-down list.

Attachments:

You must be logged in to view attached files.

+ 19) when i use Woodmart slider with some CSS animation it is sized improperly. Instead of full screen width it is from 50% to 80% width of screen depending on animation type. Also when I choose some background colour for row containing Woodmart slider this colour is shown only in rectangular area in right side of the screen

Hello,

11) unfortunately through options depicted in manual you provided we can set crop only for thumbnail images, while I need product page images to be cropped
You can reduce the image size in the product page in the Theme Settings > Product page > Images
12) I suppose this can be done through disabling magnify option on smaller screens

We do not have any instructions.

13) the link was in private content section of original message

The search icon is white in the page 404

14) maybe it is possible to show “additional information” styled not as table, but as text instead?

You can add information by means of EXTRA CONTENT OPTIONS https://xtemos.com/docs/woodmart/product-page-options/#local_settings

16) I found a bug – when using JQuery 3.4.1 sorting does not work on shop page. When I switched to twenty-nineteen theme everything worked as it should. In console there’s an error message “Uncaught cant get selector for pjax container!”

Where can we check the bug?

17) Woodmart button text colour selector doesn’t work if background colour is not selected. With both dark and light color schemes text is dark. It starts working after I select some background color. I made a screenshot of options menu I am writing about.

This is the way it works. You need to set the background to set the color scheme.

18) I want to use my navigation font for responsive text block, but it’s not in the drop-down list.

You need to set the font in the Theme Settings > Typography for Text font or by means of Advanced typography option, which allows to choose the item from a drop-down or insert your custom CSS class. Please navigate to the Theme Settings > Typography > Advanced Typography.

Here is the documentation providing more detailed instructions: https://xtemos.com/docs/woodmart/advanced-typography-settings/

19) when i use Woodmart slider with some CSS animation it is sized improperly.

How can we reproduce the problem? What animation do you apply?

Best Regards

[Author]

Posts