Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] WooCommerce Change Button and Price Colours CSS

Home Forums Support WooCommerce Change Button and Price Colours CSS

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #179058
    Joanne Smith

    Hey — thought I’d share how I changed the COLOURS of my WooCommerce Add to Cart buttons and price

    install Custom CSS plugin

    then paste the following code and adjust colours where suits!!

    .product-categories .children {
        margin-left: 1.5em;
    	padding-top: 5px;
    }
    .product-categories .children li:last-child {
    	padding-bottom: 0;
    }
    
    .woocommerce #content input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover {
    	background-color:#FC0 !important;
    	color:white !important;
    	text-shadow: transparent !important;
    	box-shadow: none;
    	border-color:#FF9900 !important;
    }
    
    .woocommerce #content input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce-page #content input.button:hover, .woocommerce-page #respond input#submit:hover, .woocommerce-page a.button:hover, .woocommerce-page button.button:hover, .woocommerce-page input.button:hover {
    	
    	background-color:#FC0 !important;
    	color:white !important;
    	text-shadow: transparent !important;
    	box-shadow: none;
    	border-color:#FF9900 !important;
    }
    
    .woocommerce #content input.button, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-page #content input.button, .woocommerce-page #respond input#submit, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button {
    	background-color:#FC0 !important;
    	color:white !important;
    	text-shadow: transparent !important;
    	border-color:#FF9900 !important;
    }
    
    .woocommerce #content input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover {
    	background-color:#FC0 !important;
    	box-shadow: none;
    	text-shadow: transparent !important;
    	color:white !important;
    	border-color:#FF9900 !important;
    }
    
    .woocommerce ul.products li.product .price,
    .woocommerce-page ul.products li.product .price {
    	text-align: center;
    	color: #F00;  /* This is what you MAY want to change color */
    	font-weight: 200;
    	font-size: 1em;
    }
    
    .woocommerce div.product span.price, .woocommerce div.product p.price, .woocommerce #content div.product span.price, .woocommerce #content div.product p.price, .woocommerce-page div.product span.price, .woocommerce-page div.product p.price, .woocommerce-page #content div.product span.price, .woocommerce-page #content div.product p.price {
    	color: #F00; /* Change this */
    	font-size: 1.25em;
    	text-align: center;
    }
    • This topic was modified 4 years, 8 months ago by Tom.
    #179072
    Tom
    Lead Developer
    Lead Developer
    #179074
    Joanne Smith

    I have seen a lot of threads in forums about how to do this — some of the plugins out there do not work!–best to custom CSS it!

    J

    #193627
    mc208

    Does there need to be a css plugin, or can we just add any custom css we need to a child theme css file? Or does GP not support child theme?

    #193663
    Joanne Smith

    yes

    add a custom css plugin and then add the code and style to suit

    J

    #200108
    mc208

    Alllll of that CSS is just for the add to cart buttons and price display? Wow.

    #200200
    Tom
    Lead Developer
    Lead Developer

    Yup, WooCommerce could definitely simplify it. Maybe one day.

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.