Home Forums WoodMart – Premium Template Extra thumbnails loaded and other

This topic contains 51 replies, has 3 voices, and was last updated by Elise Noromit Elise Noromit 1 day, 22 hours ago.

Viewing 30 posts - 1 through 30 (of 52 total)
  • Author
    Posts
  • #130567

    pacman1917
    Customer

    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.

    Private Content Hidden
    #130586

    pacman1917
    Customer

    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.

    #130624

    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

    #130630

    pacman1917
    Customer

    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:

    Private Content Hidden
    #130700

    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

    #130709

    pacman1917
    Customer

    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

    Private Content Hidden
    #130788

    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

    • This reply was modified 2 weeks, 2 days ago by Elise Noromit Elise Noromit.
    #130872

    pacman1917
    Customer

    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.

    #130984

    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

    #131040

    pacman1917
    Customer

    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/

    #131115

    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

    #131322

    pacman1917
    Customer

    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.

    #131360

    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

    #131367

    pacman1917
    Customer

    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:

    Private Content Hidden
    #131444

    Hello,

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

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

    Best Regards

    #131458

    pacman1917
    Customer

    Thanks, but that doesn’t solve hotspot issue.

    #131475

    Hello,

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

    Best Regards

    #131513

    pacman1917
    Customer

    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?

    #131554

    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

    #131561

    pacman1917
    Customer

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

    #131564

    Hello,

    Yes, that is right.

    Best Regards

    #131572

    pacman1917
    Customer

    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.

    Private Content Hidden
    #131637

    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

    #131652

    pacman1917
    Customer

    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

    Private Content Hidden
    #131657

    pacman1917
    Customer

    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

    #131788

    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

    #131802

    pacman1917
    Customer

    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!”

    #131847

    pacman1917
    Customer

    + 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.
    #131872

    pacman1917
    Customer

    + 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

    #131935

    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

Viewing 30 posts - 1 through 30 (of 52 total)

You must be logged in to reply to this topic.