I'm trying to modify the WooCommerce Shop, Cart, and Checkout page using CSS, and was wondering if there's a way to find out all the classes used in these pages.
The concept that I am following is the one suggested here: http://docs.woothemes.com/document/css-structure/#section-2 where I can make changes on my theme's CSS. Like adding a.button, button.button, input.button, #review_form #submit { background:black; } to my theme's stylesheet, and so on.
Is there a way to know these classes, or do I have to manually inspect the elements in every page and modify them based on the classes visible in it? Any advices? Thank you.
I always find it helpful to look at the base CSS files.
https://github.com/woothemes/woocommerce/tree/master/assets/css this is the current active repository for all WooCommerce CSS files (broken out).
The SCSS definitely DOES have the style commented by page if you want to focus on shop/cart/checkout.
If you download the current base files, remove the WooCommerce ones through functions:
// Remove each style one by one
add_filter( 'woocommerce_enqueue_styles', 'jk_dequeue_styles' );
function jk_dequeue_styles( $enqueue_styles ) {
unset( $enqueue_styles['woocommerce-general'] ); // Remove the gloss
unset( $enqueue_styles['woocommerce-layout'] ); // Remove the layout
unset( $enqueue_styles['woocommerce-smallscreen'] ); // Remove the smallscreen optimisation
return $enqueue_styles;
}
// Or just remove them all in one line
add_filter( 'woocommerce_enqueue_styles', '__return_false' );
Then you can effectively override as needed directly from the "source" that won't conflict with future updates to Woo. If you ever wanted to update in the future, you could always do a DIFF using your overrides and Woo's CSS.
Or you could just grab the pieces you need :)
Related
Though I can certainly delete the files or references to them in the plugin code, this is not futureproof when I made plugin updates. They say that if I create a copy of their frontend.css file in my {theme}/{pluginname}/css folder, it will override theirs, but that doesn't work.
So I'm left with a style that takes priority because it matches on one of their containers and overrides my default page links.
For example:
.somecontainer a {
color:red
}
I need it gone. Preferably in a way that doesn't use !important or me specifying another instance of the same to override the values because then I have to manage the colors and styles in my original CSS AND in the override.
I already found code to print all enqueued styles and there were none so I can't just unqueue it.
The answer was apparently to DEqueue their styles at the same time I enqueued mine. Not sure why... seems like that would create problems, but this worked:
function my_style() {
wp_dequeue_style( 'pmpro_frontend' );
wp_dequeue_style( 'pmpro_print' );
wp_enqueue_style( 'my-style', get_bloginfo('stylesheet_url') );
}
add_action('wp_enqueue_scripts', 'my_style', 11 );
First you'll need to identify the names/handles that the plugin's stylesheets were originally enqueued under. You can do this
quickly by running a search on your web server in the plugin's
directory, e.g. grep wp_enqueue_style /var/www/mysite/wp-content/plugins/nameofplugin/
Then add a dequeue function to the functions.php file,
and invoke it on the wp_enqueue_scripts with a priority higher than the
priority level set on the plugin's original enqueue function.
function remove_plugin_styles() {
wp_dequeue_style( 'name_of_plugin_stylesheet' );
wp_dequeue_style( 'name_of_plugin_stylesheet_2' );
}
add_action( 'wp_enqueue_scripts', 'remove_plugin_styles', 99 );
I would like to hide or remove the category meta from the shops page (catalogue
) which is showing right under the product title in my store. I have tried several things but nothing works.
I tried CSS:
.product__categories {display:none!importamt;}
and this...
.product_meta .sku_wrapper {
display:none!important;
}
.product_meta .posted_in {
display:none!important;
}
I tired this in functions too remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
How can I hide the category meta?
I used this:
.product-details .posted_in { display: none; }
and it worked for me
The .product_meta class you are trying to use is not on the catalogue page - it is on the product detail page.
This is an old question, but you might try
remove_action('woocommerce_after_single_product_summary',
'woocommerce_template_single_meta', 40);
in a theme (like in functions.php) or a code snippet.
The PHP solution should be slightly better because it changes the page before delivering it, rather than still serving the meta section and including some CSS instructions to not display it.
This works in WC 6.7.0. If it doesn't work, perform a search in the WooCommerce plugin for the exact lettering, woocommerce_template_single_meta (You can do this by loading the folder into something like Sublime Text.), and adjust accordingly. For example, if in the future, you find that it's added with add_action( 'woocommerce_random_action_why_was_this_changed', 'woocommerce_template_single_meta', 50 ); you need to use remove_action('woocommerce_random_action_why_was_this_changed', 'woocommerce_template_single_meta', 50);.
Update: This isn't working on my own site and I don't know why.
Another thing you can do to remove the product meta section is to create a file in your theme or child theme within a /woocommerce/single-product path called meta.php, i.e: yourawesometheme/woocommerce/single-product/meta.php. Give it this content:
<?php
if (!defined('ABSPATH')) exit;
This works consistently.
(I think you could leave the file completely blank, skipping the (!defined('ABSPATH')) part, but I'm not certain. Perhaps someone else could clarify.)
As you see in following pictureenter image description here.
woocomerce css styles has magically over ride my template css (after using yith tab manager permiume (disabling doesn't help).
You can see that disable those styles from woocomerce.css will prove that, y template style is still there.
How can I prevent from this issue ?
Here is the website link for that page
amatistrading.
I used this code in functions.php of template but it didn't work:
:// Disable WooCommerce's Default Stylesheets
function disable_woocommerce_default_css( $styles ) {
// Disable the stylesheets below via unset():
unset( $styles['woocommerce-general'] ); // Styling of buttons, dropdowns, etc.
// unset( $styles['woocommerce-layout'] ); // Layout for columns, positioning.
// unset( $styles['woocommerce-smallscreen'] ); // Responsive design for mobile devices.
return $styles;
}
add_action('woocommerce_enqueue_styles', 'disable_woocommerce_default_css');
i couldnt use that code(in main comment) but i found a way to solve problem. ( i will put the right code if i find any),first we can delete that stylesheet content, or act like me: disable all plugins(every single plugin) try to replace woocommerce files with orginal, then re active plugins, this method worked for me, it seems changing woocommerce files made this problem.
I tried adding page classes via Appearance => Menus => Screen Options => CSS Classes, but when I update my pages the classes don't show up.
I tried with another theme, it works, so my problem is theme-related. I didn't develop this theme, I took it back from another developer. Can someone explain me what I should look for in the code to make it back to normal?
Thank you for the help.
It could be a couple of things, where to look first.
Look for some standard functions are in the templates file such as body_class(), post_class(). As it print standard Wordpress used class within the context it needs to.
If its more menu related look for add_filters() within the functions.php filters that allow css to be added or removed such as.
add_filter('nav_menu_css_class' , 'some_function_called' , 10 , 2);
function some_function_called($classes, $item){
if(is_single() && $item->title == "Blog"){ //Notice you can change the conditional from is_single() and $item->title
$classes[] = "special-class";
}
return $classes;
}
Best of luck.
What's the best way to override woocommerce.css?
In my style.css I have to write those css again to override it, and put !important after each css. I think this is not the best practice to do so.
Anyone has a better idea?
WooCommerce enqueues 3 stylesheets by default. You can disable them all using:
add_filter( 'woocommerce_enqueue_styles', '__return_false' );
For details on how to disable individual WooCommerce stylesheets, see their Disable the default stylesheet article.
There's another approach in an article by Carrie Dills. She's using the Genesis theme but it could be reworked for other themes I think.
In essence, what she recommends is changing the order that your styles load so that your theme's stylesheet is loaded after the WooCommerce stylesheet. i.e. it is enqueued at a higher priority.
For Genesis it looks like the below. If you can access your framework/theme's stylesheet loading with a similar hook, you could do the same.
/**
* Remove Genesis child theme style sheet
* #uses genesis_meta <genesis/lib/css/load-styles.php>
*/
remove_action( 'genesis_meta', 'genesis_load_stylesheet' );
/**
* Enqueue Genesis child theme style sheet at higher priority
* #uses wp_enqueue_scripts <http://codex.wordpress.org/Function_Reference/wp_enqueue_style>
*/
add_action( 'wp_enqueue_scripts', 'genesis_enqueue_main_stylesheet', 15 );
You can override woocommerce.css with custom.css file that can be located either in default wordpress theme or in child theme.
You can also make a fallback to default woocommerce.css if something happens to custom.css file.
add_action('wp_enqueue_scripts', 'override_woo_frontend_styles');
function override_woo_frontend_styles(){
$file_general = $_SERVER['DOCUMENT_ROOT'] . '/wp-content/themes/twentyfifteen/css/custom.css';
if( file_exists($file_general) ){
wp_dequeue_style('woocommerce-general');
wp_enqueue_style('woocommerce-general-custom', get_template_directory_uri() . '/css/custom.css');
}
}
Same thing is for other woocommerce frontend styles (woocommerce-layout and woocommerce-smallscreen).
If you're doing this in child theme, then use get_stylesheet_directory_uri() instead of get_template_directory_uri() and change file path according to child theme name.
My approach is to follow the principle cascade of CSS. So basically the one that loads last will override the previous rules if no !important was defined.
Check here:
//This is the order the css load by default, at leat on the sites I have worked!!!
<link rel="stylesheet" href="http:/css/custom_styles.css" type="text/css" media="all">
<link rel="stylesheet" href="http:/css/woocomerce.css" type="text/css" media="all">
So what is the idea Load your custom CSS after the woocommerce has loaded.
Method 1: Adding a Low priority on the [add_action] for the style add_action like:
function load_my_css(){
wp_enqueue_style('custom-theme', URL TO STYLE);
}
// (the higher the number the lowest Priority)
add_action('wp_enqueue_scripts', 'load_my_css', 5000);
Method 2: Remove woocommerce styles, so you create your own styles
// Or just remove them all in one line
add_filter( 'woocommerce_enqueue_styles', '__return_false' );
Method 3: Add dependency Array to your custom style
function load_my_css(){
wp_enqueue_style('custom-theme', URL TO STYLE, array(DEPENDECIES HERE));
}
Hope one of the Methods helps.
You'll find what you need in WooCommerce documentation. They offer two functions to either:
Stop WooCommerce plugin from loading all or specific stylesheets using their woocommerce_enqueue_styles() function.
Add your custom stylesheets within their plugin using the wp_enqueue_woocommerce_style() allowing you to override woocommerce.css.
Link to WooCommerce documentation « disable the default stylesheets »
For newer versions WooCommerce 4.x+ use this:
add_action( 'wp_print_styles', 'dequeueWooCommerceStyles' );
public function dequeueWooCommerceStyles()
{
wp_dequeue_style('wc-block-style');
wp_deregister_style( 'wc-block-style' );
}