I run WooCommerce with the German Market plugin on


Unfortunately, I have no idea how to change the design in which notifications of WooCommerce appear. Below, you can see a screenshot of what you get to see if you put a product in your cart.

Does somebody of you know how to change the design of this notifications?

That means:

  • How to disable the shadow effect just for this WooCommerce notifications (not for the product description and the rest of the text)?

  • How to change the color of "View Cart"?

enter image description here




It sounds like you might want to start by learning a little bit about CSS which isn't necessarily a WordPress question (there are many CSS tutorials out there to get you started).

Then to change your site's style, identify the elements you want to change and add your customizations to your theme or whichever custom CSS input you're using. The quickest way to identify the CSS you want to change is to use a browser tool like the Chrome DevTool inspector or the Firebug extension for Firefox.

Since we're specifically talking about WooCommerce though, I want to also mention that you can remove the WooCommerce style entirely and start from scratch (a good option for those that want to customize the entire look of their shop). A filter like one of those below placed in your theme's functions.php file will do that.

Remove each style one by one:

add_filter( 'woocommerce_enqueue_styles', 'yourname_dequeue_styles' );
function yourname_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' );

Not the answer you're looking for? Browse other questions tagged or ask your own question.