Style WooCommerce Buttons Globally to Match Theme Buttons

Support
#1

Hi guys,

Been struggling to match the WooCommerce buttons with the style, which was applied to all the buttons throughout the website.

I did try a few different suggestions here:



and another suggestion online:
https://www.themelocation.com/how-to-change-the-color-of-woocommerce-buttons/

but nothing seems to be working…

There is the style I am trying to apply for the hover state:

 text-shadow: none !important;
	-webkit-box-shadow: 0 0.15em 0 0 #BE9149, 0px 4px 4px rgba(0,0,0,0.30) !important;
	-moz-box-shadow: 0 0.15em 0 0 #BE9149, 0px 4px 4px rgba(0,0,0,0.30) !important;
	box-shadow: 0 0.15em 0 0 #BE9149, 0px 4px 4px rgba(0,0,0,0.30) !important;
  }

Your help would be highly appreciate it!

#2

Hi @kcreative,

Changing Woocommerce button styling is only recommended if you’re trying to make it different from other buttons. Since you intend to have styling globally, then the styling will be inherited to Theme Options > Buttons without a need for CSS. And upon checking, the button styling is already global and applied to all buttons, but the difference that I see is roundness and size, is that what you’re trying to change?

And this box shadow upon hover are already applied too

 text-shadow: none !important;
	-webkit-box-shadow: 0 0.15em 0 0 #BE9149, 0px 4px 4px rgba(0,0,0,0.30) !important;
	-moz-box-shadow: 0 0.15em 0 0 #BE9149, 0px 4px 4px rgba(0,0,0,0.30) !important;
	box-shadow: 0 0.15em 0 0 #BE9149, 0px 4px 4px rgba(0,0,0,0.30) !important;

Perhaps you can provide screenshots of the button where it’s not applied, and a screenshot of what you’re expecting?

Thanks!

#3

Thank you for the quick update!

I did update the colors for the buttons under Theme Options > Buttons and added the following to make all the buttons have the same style throughout the website:

/* Style Buttons */
.x-btn.x-btn-real {
  font-size:1.2em;
  line-height:1.2em; 
  padding-top: 0.7em !important;
  padding-bottom: 0.7em !important;
  text-shadow: none !important;
  -webkit-box-shadow: 0 0.15em 0 0 #237ba6, 0px 4px 4px rgba(0,0,0,0.30);
  -moz-box-shadow: 0 0.15em 0 0 #237ba6, 0px 4px 4px rgba(0,0,0,0.30);
  box-shadow: 0 0.15em 0 0 #237ba6, 0px 4px 4px rgba(0,0,0,0.30);
}

.x-btn.x-btn-real:hover {
  font-size:1.2em;
  line-height:1.2em; 
  text-shadow: none !important;
  -webkit-box-shadow: 0 0.15em 0 0 #BE9149, 0px 4px 4px rgba(0,0,0,0.30);
  -moz-box-shadow: 0 0.15em 0 0 #BE9149, 0px 4px 4px rgba(0,0,0,0.30);
  box-shadow: 0 0.15em 0 0 #BE9149, 0px 4px 4px rgba(0,0,0,0.30);
}

/* Style "Submit" Buttons */
.x-btn, .button, [type="submit"] {
  font-size:1.2em;
  line-height:1.2em; 
  padding-top: 0.7em !important;
  padding-bottom: 0.7em !important;
  text-shadow: none !important;
  -webkit-box-shadow: 0 0.15em 0 0 #237ba6, 0px 4px 4px rgba(0,0,0,0.30);
  -moz-box-shadow: 0 0.15em 0 0 #237ba6, 0px 4px 4px rgba(0,0,0,0.30);
  box-shadow: 0 0.15em 0 0 #237ba6, 0px 4px 4px rgba(0,0,0,0.30);
}

.x-btn:hover, .button:hover, [type="submit"]:hover {
  font-size:1.2em;
  line-height:1.2em;
  padding-top: 0.7em !important;
  padding-bottom: 0.7em !important;
  text-shadow: none !important;
  -webkit-box-shadow: 0 0.15em 0 0 #BE9149, 0px 4px 4px rgba(0,0,0,0.30);
  -moz-box-shadow: 0 0.15em 0 0 #BE9149, 0px 4px 4px rgba(0,0,0,0.30);
  box-shadow: 0 0.15em 0 0 #BE9149, 0px 4px 4px rgba(0,0,0,0.30);
}
#4

Update: actually I found one glitch - the button on the checkout page and the contact page have a different hover style… Any idea how to fix that one?

#5

Hello @kcreative,

To get your issue resolved, please have your code updated and use this:

/* Style Buttons */
.x-btn.x-btn-real {
  font-size:1.2em !important;
  line-height:1.2em; 
  padding-top: 0.7em !important;
  padding-bottom: 0.7em !important;
  text-shadow: none !important;
  -webkit-box-shadow: 0 0.15em 0 0 #237ba6, 0px 4px 4px rgba(0,0,0,0.30);
  -moz-box-shadow: 0 0.15em 0 0 #237ba6, 0px 4px 4px rgba(0,0,0,0.30);
  box-shadow: 0 0.15em 0 0 #237ba6, 0px 4px 4px rgba(0,0,0,0.30);
}

.x-btn.x-btn-real:hover {
  font-size:1.2em !important;
  line-height:1.2em; 
  text-shadow: none !important;
  -webkit-box-shadow: 0 0.15em 0 0 #BE9149, 0px 4px 4px rgba(0,0,0,0.30);
  -moz-box-shadow: 0 0.15em 0 0 #BE9149, 0px 4px 4px rgba(0,0,0,0.30);
  box-shadow: 0 0.15em 0 0 #BE9149, 0px 4px 4px rgba(0,0,0,0.30);
}

/* Style "Submit" Buttons */
.x-btn, .button, [type="submit"] {
  font-size:1.2em !important;
  line-height:1.2em; 
  padding-top: 0.7em !important;
  padding-bottom: 0.7em !important;
  text-shadow: none !important;
  -webkit-box-shadow: 0 0.15em 0 0 #237ba6, 0px 4px 4px rgba(0,0,0,0.30);
  -moz-box-shadow: 0 0.15em 0 0 #237ba6, 0px 4px 4px rgba(0,0,0,0.30);
  box-shadow: 0 0.15em 0 0 #237ba6, 0px 4px 4px rgba(0,0,0,0.30);
}

.x-btn:hover, .button:hover, [type="submit"]:hover {
  font-size:1.2em !important;
  line-height:1.2em;
  padding-top: 0.7em !important;
  padding-bottom: 0.7em !important;
  text-shadow: none !important;
  -webkit-box-shadow: 0 0.15em 0 0 #BE9149, 0px 4px 4px rgba(0,0,0,0.30);
  -moz-box-shadow: 0 0.15em 0 0 #BE9149, 0px 4px 4px rgba(0,0,0,0.30);
  box-shadow: 0 0.15em 0 0 #BE9149, 0px 4px 4px rgba(0,0,0,0.30);
}

Hope this helps.

#6

Thank you, that was helpful!

#7

You are most welcome!

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.