Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Woocommerce – Clicking close button on image lightbox doubleclick and force background link to open

I have this problem on woocommerce site, that when user on mobile click close button on image lightbox link in background is also clicked. In my example close button overlap basket icon. So when you close image, basket is opened. close button is over basket icon I am using wocommerce 3.0 lightbox

link to page with problem: https://nakit-ure.si/rocne-ure/rocna-ura-just-watch-jw20004-008/ (open in mobile view click on image and then try closing it)

I tried using jquery:
1. first add class on basket when image is opened

CSS
{
.pointer-disable{pointer-events:none}
}

THIS JQUERY WORK

(function($) {
$(document).ready(function(){
$('.wp-post-image').click(function(){

$('.nav-right').addClass('pointer-disable');

});
})
})(jQuery);

NOW I need to disable class when image is closed.

remove class when image is closed.
THIS JQUERY DONT work

(function($) {
$(document).ready(function(){
$('.pswp__button--close').click(function(){

$('.nav-right').removeClass('pointer-disable');

});
})
})(jQuery);
Tags:

4

Answers


  1. 0

    Try to use $(‘className’).on(‘click’) instead of .click() events because the former can use less memory and work for dynamically added elements.

    Login or Signup to reply.
  2. 0

    You can do like this:

    (function($) {
$(document).ready(function(){
$('.pswp__button--close').click(function(){

$('.pointer-disable').hide();

});
})
})(jQuery);
    Login or Signup to reply.
  3. 0

    You just have to strop the event bubbling:

    $( ".wp-post-image" )on('click', function( event ) {
  event.stopPropagation();

});
    Login or Signup to reply.
  4. 0

    The problem solved in my case. If I understand correctly, the reason was in event bubbling and capturing. Woocommerce lightbox is a div layer with heigh z-index. But touch event on this layer works also for lower layer. It was need to stop event handling. I used for this ontouchstart = “return false;”, which was added to woocommerce/single-product/photoswipe.php.

     <button class="pswp__button pswp__button--close" ontouchstart="return false;"></button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search