WooCommerce buttons like buttons from Dazzling

Hello,

I´ve been working hard on my webpage to get all look the same, but I could not find a way to make the WooCommerce buttons look like the buttons from the WP Theme Dazzling.

First I think we need to remove the style of the stock WooCommerce buttons (to make things easy and that the 3D is gone).

I´ve found most of the buttons names and I know I can change the style in CSS like for example:

/* woocommerce button */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce #content input.button, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button, .woocommerce-page #respond input#submit, .woocommerce-page #content input.button {
  -webkit-border-radius: 5px; 
  -moz-border-radius: 5px; 
  border-radius: 5px; 
}

Can you help me to get the buttons look the same (including hover-over) please?

Thank you,

-Ronald
www.openbuilds.com.mx

PS. What would make your themes popular is when you have bbPress integration! :wink:

I forgot to say that I´ve found how to make a flat-look button, for example:

.button-1{
text-align:center;
text-decoration: none;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 150%;
color: #FFF;
background: #0CADA7;
padding: 20px 60px;
display: inline-block;
white-space: nowrap;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 10px 0;
-webkit-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.button-1:hover {
background: #0A948F;
}

Okay, if I got it right we have to start with the code taken from woocommerce.css looking like this:

.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,.woocommerce #content input.button,.woocommerce-page a.button,.woocommerce-page button.button,.woocommerce-page input.button,.woocommerce-page #respond input#submit,.woocommerce-page #content input.button{font-size:100%;margin:0;line-height:1em;cursor:pointer;position:relative;font-family:inherit;text-decoration:none;overflow:visible;padding:6px 10px;font-weight:bold;-webkit-border-radius:2px;border-radius:2px;left:auto;text-shadow:0 1px 0 #45a9ec;color:#ffffff;text-shadow:0 -1px 0 rgba(0,0,0,0.8);border:1px solid #196090;background:#3498db;background:-webkit-gradient(linear,left top,left bottom,from(#3498db),to(#217dbb));background:-webkit-linear-gradient(#3498db,#217dbb);background:-moz-linear-gradient(center top,#3498db 0%,#217dbb 100%);background:-moz-gradient(center top,#3498db 0%,#217dbb 100%);white-space:nowrap;display:inline-block;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.075), inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.075), inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 -1px 0 rgba(0,0,0,0.075), inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.1)}.woocommerce a.button.loading,.woocommerce button.button.loading,.woocommerce input.button.loading,.woocommerce #respond input#submit.loading,.woocommerce #content input.button.loading,.woocommerce-page a.button.loading,.woocommerce-page button.button.loading,.woocommerce-page input.button.loading,.woocommerce-page #respond input#submit.loading,.woocommerce-page #content input.button.loading{color:#ffffff;border:1px solid #3498db}.woocommerce a.button.loading:before,.woocommerce button.button.loading:before,.woocommerce input.button.loading:before,.woocommerce #respond input#submit.loading:before,.woocommerce #content input.button.loading:before,.woocommerce-page a.button.loading:before,.woocommerce-page button.button.loading:before,.woocommerce-page input.button.loading:before,.woocommerce-page #respond input#submit.loading:before,.woocommerce-page #content input.button.loading:before{content:"";position:absolute;top:0;right:0;left:0;bottom:0;background:url(…/images/ajax-loader.gif) center no-repeat rgba(255,255,255,0.65)}.woocommerce a.button.added:before,.woocommerce button.button.added:before,.woocommerce input.button.added:before,.woocommerce #respond input#submit.added:before,.woocommerce #content input.button.added:before,.woocommerce-page a.button.added:before,.woocommerce-page button.button.added:before,.woocommerce-page input.button.added:before,.woocommerce-page #respond input#submit.added:before,.woocommerce-page #content input.button.added:before{position:absolute;height:16px;width:16px;top:0.35em;right:-26px;text-indent:0;font-family:'WooCommerce';content:"\e017"}.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,.woocommerce #respond input#submit:hover,.woocommerce #content input.button:hover,.woocommerce-page a.button:hover,.woocommerce-page button.button:hover,.woocommerce-page input.button:hover,.woocommerce-page #respond input#submit:hover,.woocommerce-page #content input.button:hover{background:#3498db;background:-webkit-gradient(linear,left top,left bottom,from(#3498db),to(#1d6fa5));background:-webkit-linear-gradient(#3498db,#1d6fa5);background:-moz-linear-gradient(center top,#3498db 0%,#1d6fa5 100%);background:-moz-gradient(center top,#3498db 0%,#1d6fa5 100%);text-decoration:none}.woocommerce a.button:active,.woocommerce button.button:active,.woocommerce input.button:active,.woocommerce #respond input#submit:active,.woocommerce #content input.button:active,.woocommerce-page a.button:active,.woocommerce-page button.button:active,.woocommerce-page input.button:active,.woocommerce-page #respond input#submit:active,.woocommerce-page #content input.button:active{top:1px}.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,.woocommerce #respond input#submit.alt,.woocommerce #content input.button.alt,.woocommerce-page a.button.alt,.woocommerce-page button.button.alt,.woocommerce-page input.button.alt,.woocommerce-page #respond input#submit.alt,.woocommerce-page #content input.button.alt{background:#3498db;background:-webkit-gradient(linear,left top,left bottom,from(#3498db),to(#217dbb));background:-webkit-linear-gradient(#3498db,#217dbb);background:-moz-linear-gradient(center top,#3498db 0%,#217dbb 100%);background:-moz-gradient(center top,#3498db 0%,#217dbb 100%);border-color:#196090;color:#ffffff;text-shadow:0 -1px 0 rgba(0,0,0,0.6)}.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce input.button.alt:hover,.woocommerce #respond input#submit.alt:hover,.woocommerce #content input.button.alt:hover,.woocommerce-page a.button.alt:hover,.woocommerce-page button.button.alt:hover,.woocommerce-page input.button.alt:hover,.woocommerce-page #respond input#submit.alt:hover,.woocommerce-page #content input.button.alt:hover{background:#3498db;background:-webkit-gradient(linear,left top,left bottom,from(#3498db),to(#1d6fa5));background:-webkit-linear-gradient(#3498db,#1d6fa5);background:-moz-linear-gradient(center top,#3498db 0%,#1d6fa5 100%);background:-moz-gradient(center top,#3498db 0%,#1d6fa5 100%);color:#ffffff;text-shadow:0 -1px 0 rgba(0,0,0,0.6)}.woocommerce a.button:disabled,.woocommerce a.button.disabled,.woocommerce button.button:disabled,.woocommerce button.button.disabled,.woocommerce input.button:disabled,.woocommerce input.button.disabled,.woocommerce #respond input#submit:disabled,.woocommerce #respond input#submit.disabled,.woocommerce #content input.button:disabled,.woocommerce #content input.button.disabled,.woocommerce-page a.button:disabled,.woocommerce-page a.button.disabled,.woocommerce-page button.button:disabled,.woocommerce-page button.button.disabled,.woocommerce-page input.button:disabled,.woocommerce-page input.button.disabled,.woocommerce-page #respond input#submit:disabled,.woocommerce-page #respond input#submit.disabled,.woocommerce-page #content input.button:disabled,.woocommerce-page #content input.button.disabled{color:#ffffff;border:1px solid #217dbb;background:#3498db;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;cursor:not-allowed}.woocommerce a.button:disabled:active,.woocommerce a.button.disabled:active,.woocommerce button.button:disabled:active,.woocommerce button.button.disabled:active,.woocommerce input.button:disabled:active,.woocommerce input.button.disabled:active,.woocommerce #respond input#submit:disabled:active,.woocommerce #respond input#submit.disabled:active,.woocommerce #content input.button:disabled:active,.woocommerce #content input.button.disabled:active,.woocommerce-page a.button:disabled:active,.woocommerce-page a.button.disabled:active,.woocommerce-page button.button:disabled:active,.woocommerce-page button.button.disabled:active,.woocommerce-page input.button:disabled:active,.woocommerce-page input.button.disabled:active,.woocommerce-page #respond input#submit:disabled:active,.woocommerce-page #respond input#submit.disabled:active,.woocommerce-page #content input.button:disabled:active,.woocommerce-page #content input.button.disabled:active{top:0}.woocommerce .cart .button,.woocommerce .cart input.button,.woocommerce-page .cart .button,.woocommerce-page .cart input.button{float:none}
They must have done it to mess people´s life up to put all against each other so let me devide this in a bit…

Okay, I gave up on the WooCommerce buttons for a moment and have to get my brain straight again.

Anyway, take a look at the formatting of the dropdown variable product selector: http://openbuilds.com.mx/product/openbuilds-v-slot/#.U6kUJelOX38

As you can see it has no styling at all? I wish I could find more information about this…

-Ronald

Those buttons are like that by default. If they are not styled by default you should temporary switch to another theme and back to this theme as styles are applied on activation and if you are using this theme even before WooCommerce integration then styles might look like default ones.

Yes, other sections aren’t styled but I left it like this as this is a free theme after all and WooCommerce is only optional here. Could do a better job in future as I am thinking about keeping this theme well maintained.

And there shouldn’t be any major issues when using this theme with bbPress. See screenshot below:

Hello Aigars,

Note that you said on your main page that this is a WooCommerce compatible theme? Most people, like me, will think that it’s a theme that includes WooCommerce styling with it, and I think you did a part of that as well. Don’t get me wrong, I know it’s a free theme AND THUS, I want to give something back to you and the community, so here it goes:

To all:

So, you want to style the buttons so it fits well with the Dazzling theme? Add this CSS to your Personalized CSS in theme settings and you get an idea:

.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,.woocommerce #content input.button,.woocommerce-page a.button,.woocommerce-page button.button,.woocommerce-page input.button,.woocommerce-page #respond input#submit,.woocommerce-page #content input.button {
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
font-size:100%;
margin:0;
line-height:1em;
cursor:pointer;
position:relative;
font-family:inherit;
text-decoration:none;
overflow:visible;
padding:10px 10px;
text-decoration:none;
font-weight:normal;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
left:auto;
text-shadow:none;
color:#ffffff;
border:none;
background:#3498db;
white-space:nowrap;
display:inline-block;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}
 
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,.woocommerce #respond input#submit:hover,.woocommerce #content input.button:hover,.woocommerce-page a.button:hover,.woocommerce-page button.button:hover,.woocommerce-page input.button:hover,.woocommerce-page #respond input#submit:hover,.woocommerce-page #content input.button:hover {
background:#000000;
text-decoration:none;
}

.woocommerce a.button:active,.woocommerce button.button:active,.woocommerce input.button:active,.woocommerce #respond input#submit:active,.woocommerce #content input.button:active,.woocommerce-page a.button:active,.woocommerce-page button.button:active,.woocommerce-page input.button:active,.woocommerce-page #respond input#submit:active,.woocommerce-page #content input.button:active{top:1px}.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,.woocommerce #respond input#submit.alt,.woocommerce #content input.button.alt,.woocommerce-page a.button.alt,.woocommerce-page button.button.alt,.woocommerce-page input.button.alt,.woocommerce-page #respond input#submit.alt,.woocommerce-page #content input.button.alt {
background:#3498db; 
border:none;
text-shadow:none;
color:#ffffff;
}
 
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce input.button.alt:hover,.woocommerce #respond input#submit.alt:hover,.woocommerce #content input.button.alt:hover,.woocommerce-page a.button.alt:hover,.woocommerce-page button.button.alt:hover,.woocommerce-page input.button.alt:hover,.woocommerce-page #respond input#submit.alt:hover,.woocommerce-page #content input.button.alt:hover {
background:#000000;
color:#ffffff;
text-shadow:none;
}

.woocommerce a.added_to_cart,.woocommerce-page a.added_to_cart{padding-top:.5em;white-space:nowrap;display:inline-block}.woocommerce .quantity,.woocommerce #content .quantity,.woocommerce-page .quantity,.woocommerce-page #content .quantity {
width:72px;position:relative;
margin:0 auto;
overflow:hidden;
}
  
.woocommerce .quantity input::-webkit-outer-spin-button,.woocommerce .quantity input::-webkit-inner-spin-button,.woocommerce #content .quantity input::-webkit-outer-spin-button,.woocommerce #content .quantity input::-webkit-inner-spin-button,.woocommerce-page .quantity input::-webkit-outer-spin-button,.woocommerce-page .quantity input::-webkit-inner-spin-button,.woocommerce-page #content .quantity input::-webkit-outer-spin-button,.woocommerce-page #content .quantity input::-webkit-inner-spin-button{display:none}.woocommerce .quantity input.qty,.woocommerce #content .quantity input.qty,.woocommerce-page .quantity input.qty,.woocommerce-page #content .quantity input.qty {
width:36px;
height:72px;
float:left;
padding:0;
text-align:center;
font-size:150%;
border:1px solid #3498db;
border-right:0;
-webkit-border-top-right-radius:4;
-webkit-border-bottom-right-radius:4;
-moz-border-radius-topright:4;
-moz-border-radius-bottomright:4;
border-top-right-radius:4;
border-bottom-right-radius:4;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
font-weight:normal;
-webkit-border-top-left-radius:4px;
-webkit-border-bottom-left-radius:4px;
-moz-border-radius-topleft:4px;
-moz-border-radius-bottomleft:4px;
border-top-left-radius:4px;
border-bottom-left-radius:4px;
}
 
.woocommerce .quantity noindex:-o-prefocus,.woocommerce .quantity input[type=number],.woocommerce #content .quantity noindex:-o-prefocus,.woocommerce #content .quantity input[type=number],.woocommerce-page .quantity noindex:-o-prefocus,.woocommerce-page .quantity input[type=number],.woocommerce-page #content .quantity noindex:-o-prefocus,.woocommerce-page #content .quantity input[type=number]{padding-right:1.2em}.woocommerce .quantity .plus,.woocommerce .quantity .minus,.woocommerce #content .quantity .plus,.woocommerce #content .quantity .minus,.woocommerce-page .quantity .plus,.woocommerce-page .quantity .minus,.woocommerce-page #content .quantity .plus,.woocommerce-page #content .quantity .minus {
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
display:block;
padding:0;
margin:0;
position:absolute;
text-align:center;
vertical-align:text-top;
width:36px;
height:34px;
text-decoration:none;
overflow:visible;
text-decoration:none;
font-weight:normal;
cursor:pointer;
line-height:13px;
font-size:17px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
color:#ffffff;
text-shadow:none;
border:none;
background:#3498db;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
font-size:200%;
}
 
.woocommerce .quantity .plus:hover,.woocommerce .quantity .minus:hover,.woocommerce #content .quantity .plus:hover,.woocommerce #content .quantity .minus:hover,.woocommerce-page .quantity .plus:hover,.woocommerce-page .quantity .minus:hover,.woocommerce-page #content .quantity .plus:hover,.woocommerce-page #content .quantity .minus:hover {
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
background:#000000;
}

.woocommerce .quantity .plus,.woocommerce #content .quantity .plus,.woocommerce-page .quantity .plus,.woocommerce-page #content .quantity .plus {
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
-webkit-border-bottom-left-radius:4;
-webkit-border-bottom-right-radius:4;
-moz-border-radius-bottomleft:4;
-moz-border-radius-bottomright:4;
border-bottom-left-radius:4;
border-bottom-right-radius:4;
font-size:200%;
}

Now, note that the buttons are color #3498db (light-blue-ish), change that in the color you want, also the hover-over color is #000000 (black). I´m not a programmer so this CSS part might be done better by a programmer. It cost me some time to dig it out of the woocommerce.css and to get it the way it is.

I also have some CSS code for you if you want to have some spacing between the main picture and the smaller ones, say 14 pixels:

.woocommerce div.product div.images div.thumbnails a,.woocommerce #content div.product div.images div.thumbnails a,.woocommerce-page div.product div.images div.thumbnails a,.woocommerce-page #content div.product div.images div.thumbnails a {
margin-bottom:14px;
}

Edit 2: Note that the Quantity buttons are big, yes big, as the small buttons from WooCommerce are unusable for cellphones for example.

Have fun with it!

Now, we are still not ready, dropdown´s have still gray buttons!

-Ronald

Edit 1: Example page: http://openbuilds.com.mx/producto/openbuilds-v-slot/#.U7XfNulOX3_

One more thing:

To center text under images from the category page (and a few places more), use this code in your CSS:

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
	text-align:center;
}

Thank you for posting your solution here on forum, so others can find it useful as well. Not a huge fan of those +/- buttons but the rest of the layout looks awesome.

Might include this in the upcoming update with some tiny modification.

Thank you! Really appreciate your time and effort!

There is some extra code that can be removed (half can be) but I let it in so others can modify it them selves. I’m looking forward to see your versión of those buttons, some thing like [-] 1 [+] ?

By the way, gmail drops your mails in the spamm folder…

@puntoMX Yes, I am aware that emails are being sent directly to spam folder. It is part of issue with latest bbPress version. It should be fixed in version 2.6 but the version is already delayed for 3 weeks. :frowning:

Hy Colorlib, how can I edit this hover color to (#ff6600)? Im using dazzling theme…