CoM + WooCommerce – Product selector

  • Hi,

    I am trying to build a basic product selector for some product bundles on my store. I have managed to build one but the problem I am having is that the product image and gallery are not loading at all.
    I believe this is probably something to do with the script priorities…

    Is there a way to solve this issue?

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author twinpictures

    (@twinpictures)

    Notice how the image appears soon as the browser window is resized when the collapse element is expanded? Are you lazy loading the images?

    The HTML of a fresh expand shows inline css of:

    <div class="woocommerce-product-gallery__image single-product-main-image slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 999; opacity: 1;" tabindex="0">

    and then after a browser window resize:
    <div class="woocommerce-product-gallery__image single-product-main-image slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" style="width: 492px; position: relative; left: 0px; top: 0px; z-index: 999; opacity: 1;" tabindex="0">

    See how width: 0px changes to width: 492px; ?
    try adding a maptastic class to the targets using targclass.

    There is a solution with Collapse-Pro-Matic using callbacks to trigger a resize event, but this is not a feature offered with the free version.

    Thread Starter Ibby

    (@ibby)

    Thank you for such a quick reply!

    Yes I did have lazy loading enabled through Jetpack. I’ve disabled it now though and attempted to add targclass=”maptastic” to my target divs.

    Unfortunately it doesn’t seem to have made a difference…

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘CoM + WooCommerce – Product selector’ is closed to new replies.