Remove Colorbox from Woocommerce Gallery

[danstramer]

Hi I have a woocommerce gallery and I don't want the Colorbox to work on those thumbnails. I added $('.MagicToolboxSelectorsContainer a').removeClass('cboxElement'); But it does not remove the 'cboxElement' class from the thumbnails. Adding / removing other classes using the same line of code works, so it's not a targeting issue. Any idea why this is happening? This is the link to the web page: https://dermarollerclinics.com/product/dermaroller-home-care-roller/

Thanks! Dan

[jackmoore]

If you don't want to use Colorbox anywhere on the page, you can call $.colorbox.remove().

However, the code you posted should work fine for targeting specific elements. My guess is it's a timing issue.

I suspect that $('.MagicToolboxSelectorsContainer a').removeClass('cboxElement'); is being evoked before the code that assigns Colorbox to those elements. Since so much JavaScript code is asynchronous, it's might not be as easy as just moving your code further down the document, but that is still a good place to start. My suggestion would be to move your code to the bottom of the document and also wait until the DOM has loaded before evoking it (using jQuery's ready method). For example:

// Something similar to this is being called somewhere in your scripts
$(document).ready(function(){
 $('.MagicToolboxSelectorsContainer a').colorbox();
});

// ....

// Your code which comes later and also waits until DOM ready:
$(document).ready(function(){
 $('.MagicToolboxSelectorsContainer a').removeClass('cboxElement');
});

[jackmoore]

Disclaimer: Obviously not assigning Colorbox to those elements in the first place would be the preferred solution, and these are work-arounds in case that code is not easily accessible. Hope that helps.

[jackmoore]

Sorry, I overlooked your link before and was just pointlessly speculating about the solution. I visited your page and verified using dev tools that your code works fine, it's just a timing issue. I see that you've already wrapped it to wait until the DOM has loaded. Since it looks like you are synchronously loading your scripts, you probably only need to move your code block as-is to the bottom of the page in order to fix the timing conflict.

[danstramer]

Thanks for your reply @jackmoore, since the Colorbox is applied generally by the theme author, and not just specifically to these images, I resorted to removing the class. I added the code to the bottom of the footer, but still no go. I tested with adding and removing other classes for the same HTML element and it does work, so don't know what is going wrong... <script type="text/javascript"> jQuery(document).ready(function($) { $('.MagicToolboxSelectorsContainer a').removeClass('cboxElement'); }); </script>

[danstramer]

I got it to work by adding a hook with a low priority to the footer. You are correct regarding the timing and asynchonous loading os scripts. For future reference which might help others, this is what was added to the functions.php file:

`add_action( 'wp_footer', 'remove_colorbox', 80 ); function remove_colorbox(){ ?>

<?php }`

Thanks again! Dan