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.

See more:

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]