I'm developing a theme in Bootstrap which uses WooCommerce. I'm trying to hide the col-md-1 which the product images/gallery are in, if there is none, and make my product image column from col-md-5 to col-md-6
The page design consists of 3 columns:
Here you can see where the product has more images in the col-md-1
Here is a code which will help you.
jQuery( document ).ready(function(){
if(jQuery('.col-md-1').children().length===0){
jQuery('.col-md-1').css('display','none');
jQuery('.col-md-5').toggleClass('col-md-6');
jQuery('.col-md-5').removeClass('col-md-5');
}
});
Load the page in a browser first then paste the following code in console to see the effect.
If this code is what you want then add the same to conditionally load it on a single product pages only.