When changing WooCommerce templates and adding more functionality to a shop I found that some pages used by WooCommerce do not have a basic .woocommerce class on page’s <body>, as well as some layout classes, like .product-columns-3 were missing. This is resulted in a wrong rendering of my CSS. Here’s the way how to add such classes to all pages.
I decided to add .woocommerce and other missing classes to all pages of my site. Shouldn’t be a problem, because other pages don’t have shop’s elements anyway.
To add a new class to whole site’s body tag it was enough to use this code in header.php of my theme instead of <body <?php body_class(); ?>> we can use <body <?php body_class( 'product-columns-3 woocommerce' ); ?>>
But there is a problem with duplication of classes on WooCommerce registered pages, if I simply add them in the body tag. Need to avoid duplication with conditional tags.
Add this code to your child theme’s functions.php:
// Add specific CSS class by filtering NON woocommerce
// declared pages used for woocommerce
add_filter('body_class', 'my_body_class');
function my_body_class($classes) {
if ( ! is_woocommerce()) {
$classes[] = 'product-columns-3 woocommerce notWoo';
}
return $classes;
}Conditional tag is_woocommerce is in effect only on pages recognized by WooCommerce. Tag ! is_woocommerce helps to filter pages NOT recognized as a part of WooCommerce structure, meaning without .woocommerce main class in the body_class yet. I’m also adding additional class .notWoo to identify such pages.
So now CSS is in effect for all pages without duplication of body classes.
very help full your blog. i need help .
1-I am creating a photo-stock site like(http://www.shutterstock.co.in/cat-26-Abstract.html) ,i want to that when mouse goes on product image then image pop up as the same place. i have to use some jquery
window.onload = function(){
jQuery(“#fancybox-close”).css(“display”,”none”);
jQuery(“.wp-post-image”).each(function(i,v){
jQuery(this).parent(“a”).attr(“href”,jQuery(this).attr(“src”));
});
jQuery(“.wp-post-image”).parent(“a”).hover(function(){
//jQuery(“.wp-post-image”).parent(“a”).click();
jQuery(this).click();
});
}
jQuery(“.wp-post-image”).parent(“a”).fancybox();
please help me how to adjust in right place in woo commerce file.
2-Watermark should be come on every image which will protect my all image .i am use some plugin of watermark but they are affected hole site image. so please tell me which plugin is best for watermark and if you tell me manual on Php then it will me very useful
thanks in advance