Support » Plugins and Hacks » WooCommerce » How to change the color of woo commerce button

How to change the color of woo commerce button

Viewing 14 replies - 1 through 14 (of 14 total)
  • Try adding these lines to your custom.css and just change to the colors you want.

    #top .primary-background, .dropcap2, div .button, input[type=”submit”], #submit, .info_text_header, .numeric_controls a:hover, .numeric_controls .active_item, .contentSlideControlls a.activeItem, #top th, #top .related_posts .contentSlideControlls a.activeItem, #top .arrow_controls a, #main .content #searchsubmit:hover, .callout a {
    background-color: #333333;

    #top .on-primary-color, #top .on-primary-color a, .dropcap2, div .button, input[type=”submit”], #submit, .info_text_header, .info_text_header a, .info_text_header a:hover, .contentSlideControlls a.activeItem, #top .related_posts .contentSlideControlls a.activeItem, .contentSlideControlls a:hover, #top .related_posts .contentSlideControlls a:hover, #top th, #top th a, a.button:hover, #top #wrap_all .sub_menu .menu > .current_page_item > a {
    color: #444444;

    still the same blue color .
    you mean i put in the theme css ,right ?

    Plugin Author Mike Jolley


    If you go to WooCommerce > Settings you should have some colour pickers? Just change the values and ‘save’.

    i tried to go woocommerce – > setting and change the color picker and save but can’t . it goes back to the original color. why it is ? you want to take a look at it ?

    Plugin Author Mike Jolley


    Do the colours have # in front of them? http://cl.ly/image/0u2H2x3P2h0K

    I’ve seen themes break this before by using their own colour pickers.

    weird , i cant to change the color picker …..
    perhaps you can take a look at it .i using woo commercer 2.0.5

    email me at june.c84@gmail.com and i give u the back end credential . you take a look . pls help . thanks a lot

    “you mean i put in the theme css ,right ?”

    No, go to Appearence – Editor and you should see a file custom.css at the very bottom list of files to edit. Add that code in that file after it says:

    Add styles beneath this line that you want to be applied across your entire site */

    Good Luck

    I’m no expert but I like to tinker around.

    ya… i manage to do it .thanks ….

    you should create a child theme. If you don’t know how there are tons of resources out there when it comes to editing style.css. it is pretty simple and straightforward actually.
    I’ve learned how to create one here: Creating a Child Theme
    Reason you do this is when you update your theme, you will lose all of your changes you made.



    Hey, i want to change the color of “promo” pic (http://hpics.li/c619a84). Where is possible in the custom.css, css or image ? Thank you in advance for your help.



    it’s the picture…

    I have a similar problem and have been able to sort most of it out by enabling the woocomerce.css and changing the styles but when the Shop page loads the buttons look OK then change?


    Any idea why this might me happening and how it can be fixed?

    Many thanks

    Try this in your child theme

    .woocommerce a.alt.button, .woocommerce button.alt.button, .woocommerce input.alt.button, .woocommerce #respond input.alt#submit, .woocommerce #content input.alt.button, .woocommerce-page a.alt.button, .woocommerce-page button.alt.button, .woocommerce-page input.alt.button, .woocommerce-page #respond input.alt#submit, .woocommerce-page #content input.alt.button{
    background:#ca0606 !important;
    border-color:#ca0606 !important;

    Hi, on the ‘Featured Products Now On Sale’ page, is there a way I can remove the strikethrough price tag and just have the actual price showing? I don’t want to enter a sale price and a current price. Is there a way to do this with some custom CSS?


    Url: http://mock.recrate.hansstorrie.com/

    I would like the prices displayed the same as the actual shop:


    Many thanks!

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘How to change the color of woo commerce button’ is closed to new replies.