WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce - excelling eCommerce
Woocommerce info, message and error colors (4 posts)

  1. chrislenoski
    Member
    Posted 9 months ago #

    Hello, I'm trying to edit the colors of the woo commerce message, info and error bar. I can't find the css. I'd like to remove the shadow around the box and change the colors of the background behind the check mark.
    Thanks.

    http://wordpress.org/extend/plugins/woocommerce/

  2. chrislenoski
    Member
    Posted 9 months ago #

    found the solution it's this css, and you need to use !important

    .woocommerce-message, .woocommerce-error, .woocommerce-info {
    	padding: 1em 1em 1em 3.5em;
    	margin: 0 0 2em;
    	position: relative;
    	-webkit-border-radius: 4px;
    	-moz-border-radius: 4px;
    	border-radius: 4px;
    	background: #fcfbfc;
    	background: -webkit-gradient(linear, left top, left bottom, from(#fcfbfc), to(#f7f6f7));
    	background: -webkit-linear-gradient(#fcfbfc, #f7f6f7);
    	background: -moz-linear-gradient(center top, #fcfbfc 0%, #f7f6f7 100%);
    	background: -moz-gradient(center top, #fcfbfc 0%, #f7f6f7 100%);
    	color: #5e5e5e;
    	text-shadow: 0 1px 0 #ffffff;
    	list-style: none outside;
    	width: auto;
    	-webkit-box-shadow: inset 0 -2px 6px rgba(0,0,0,0.05), inset 0 -2px 30px rgba(0,0,0,0.015), inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,0.3);
    	box-shadow: inset 0 -2px 6px rgba(0,0,0,0.05), inset 0 -2px 30px rgba(0,0,0,0.015), inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,0.3)
    }
    .woocommerce-message:after, .woocommerce-error:after, .woocommerce-info:after {
    	content: "";
    	display: block;
    	clear: both
    }
    .woocommerce-message:before, .woocommerce-error:before, .woocommerce-info:before {
    	content: "";
    	height: 1.5em;
    	width: 1.5em;
    	display: block;
    	position: absolute;
    	top: 0;
    	left: 1em;
    	font-family: sans-serif;
    	font-size: 1em;
    	line-height: 1.5;
    	text-align: center;
    	color: #fff;
    	text-shadow: 0 1px 0 rgba(0,0,0,0.2);
    	padding-top: 1em;
    	-webkit-border-bottom-left-radius: 4px;
    	-webkit-border-bottom-right-radius: 4px;
    	-moz-border-radius-bottomleft: 4px;
    	-moz-border-radius-bottomright: 4px;
    	border-bottom-left-radius: 4px;
    	border-bottom-right-radius: 4px;
    	box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.1);
    	-webkit-box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.1);
    	-moz-box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.1)
    }
    .woocommerce-message .button, .woocommerce-error .button, .woocommerce-info .button {
    	float: right
    }
    .woocommerce-message li, .woocommerce-error li, .woocommerce-info li {
    	list-style: none outside;
    	padding-left: 0;
    	margin-left: 0
    }
    .woocommerce-message {
    	border-top: 3px solid #8fae1b
    }
    .woocommerce-message:before {
    	background-color: #aafcfa;
    	content: "\2713"
    }
    .woocommerce-info {
    	border-top: 3px solid #1e85be
    }
    .woocommerce-info:before {
    	font-family: Times, Georgia, serif;
    	font-style: italic;
    	background-color: #aafcfa;
    	content: "i"
    }
    .woocommerce-error {
    	border-top: 3px solid #b81c23
    }
    .woocommerce-error:before {
    	background-color: #b81c23;
    	content: "0d7";
    	font-weight: 700
    }
  3. willrich33
    Member
    Posted 6 months ago #

    To anyone on this thread.

    I wanted to change the colors of the Woocommerce message boxes to colors that work with my custom theme, not a Wootheme. After much googling and playing I came up with this solution to share on this thread.

    First, to control the order of css script loading, disable Woocomerce css under Woocommerce -> Settings -> General -> Styles and Scripts

    Then in your functions.php file add

    wp_enqueue_style('woocommerce_css', plugins_url() .'/woocommerce/assets/css/woocommerce.css');

    to enqueue the standard Woocommerce css and

    wp_enqueue_style('woocommerce_custom_css', get_template_directory_uri() .'/woocommerce/custom.css');

    to enqueue a custom css file after

    To change the colors of the messages, for instance, to make the error messages blue put:

    .woocommerce-error {
    	border-top: 3px solid #0000FF;
    }
    .woocommerce-error:before {
    	background-color: #0000FF;
    }

    in your custom css file.

    To make other changes check the code in woocommerce.less in the plugins directory.

    HTH

  4. vfero
    Member
    Posted 2 months ago #

    @willrich33 : Works great!!! I was losing my hair for a month :)

    Thanks!

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.