Software Developer

CSS Selectors For Custom WooCommerce Button Color

  1. Override the WooCommerce purple button color with these CSS selectors. Replace #00ff80 on line 4 with your custom color code:

    .woocommerce #respond input#submit,.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
    .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
    
          background-color: #00ff80;
    
    }
    
    
  2. Override the WooCommerce purple button hover color with these CSS selectors. Replace #000 on line 6 with your custom color code:

    .woocommerce #respond input#submit:hover,.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
    .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce button.button.alt:active, .woocommerce input.button.alt:hover,
    .woocommerce button.button.alt:disabled[disabled],
    .woocommerce button.button.alt:disabled[disabled]:hover {
    
          background-color: #000;
    
    }
    

You can see this for some sample css colors inspiration.

By

Questions and Comments are Welcome

Your email address will not be published. All comments will be moderated.

Please wrap code in "code" bracket tags like this:

[code]

YOUR CODE HERE 

[/code]