WooCommerce native product gallery doesn’t show when using scripts delay

  • Resolved Lech Dutkiewicz

    (@lech-dutkiewicz)


    1 year, 7 months ago

    Hi, I’ve tried many workarounds and it seems I’ve found something.

    It seems the native WooCommerce product gallery has set opacity to 0 until the scripts relevant to render it run, then it fadesIn. When I use scripts delay via your plugin, the gallery is not visible until someone interacts with the website. This is not expected and I’ve found that WP Rocket has a built-in solution.

    I’ve tried to force opacity 1 to the gallery, but it looks bad, since the JS responsible for putting the html together and make a flexslider out of it is being delayed.

    I’ve tried to exclude relevant scripts from being delayed, but it seems now they run too quick, so the slider doesn’t work either.

    I’ve found that in WP Rocket they keep these 2 scripts from being delayed but keep the defer tag and it runs well this way.

    I’m not sure this is the 100% fix for this problem, because I’m not able to test it. I don’t know how to exclude certains scripts from being delayed, but keep the defer tag present.

    The relevant scripts to the gallery are:

    /plugins/woocommerce/assets/js/frontend/single-product.min.js
    /plugins/woocommerce/assets/js/flexslider/jquery.flexslider.min.js

    Please help ??

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support qtwrk

    (@qtwrk)

    well , that’s what JS delay does , it delays until user interaction

    you can add the javascript you want to exclude in Page Optmizaiton -> Tuning -> JS Deferred / Delayed Excludes , but you may also need to add them to JS Excludes as well

    you can simply put /wp-content/plugins/woocommerce this will exclude all the JS files from Woo , but you may also need to look into the inline javascript and exclude them

    Thread Starter Lech Dutkiewicz

    (@lech-dutkiewicz)

    OK, thanks for your reply, but it didn’t help a lot. I know I can add those scripts do exclude from deffered/delayed and exclude from minification/merge. I already said I did try it.

    I checked it once again and there is an inline script added by WooCommerce that has to run before the flexslider scripts initiation.

    I managed to fix it by excluding from js minify/merge and from js deffer/delay these:

    I hope it will helps someone else, since I’ve seen more people than just me were looking for a solution to this problem.

    /wp-content/plugins/woocommerce/assets/js/frontend/single-product.min.js
/wp-content/plugins/woocommerce/assets/js/flexslider/jquery.flexslider.min.js
wc_single_product_params

    I think it might be a good idea to add it to the LiteSpeed cache plugin as part of integration with WooCommerce. Maybe as an option somewhere. I’ve spent about 5 hours trying to figure the whole thing out and I guess many people use LiteSpeed + WooCommerce with native product page gallery and also delay their scripts. So why not to save them some time?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘WooCommerce native product gallery doesn’t show when using scripts delay’ is closed to new replies.