In the themes we’ve tested with the offer button does follow the general theme button style by default.
From what I can tell you’ve pretty much got this matching already..?? Looks like changing the font-size to 11px makes it match the button a little better.
Ah, I just noticed you had mentioned the orange color on mouseover. I’m guessing there could be some sort of jQuery going on there because I’m not seeing anything with a quick review of the CSS.
We could figure it out for you, but this would be something that would require a premium support order.
@danielriera1
1. The CSS you have here has !important on it, so it is preventing the onHover color style; So take that out. And you used #main-wrapper on the .single_add_to_cart_button you used #main-wrapper, but you did not on the second part of it, so that is not quite correct.
This is not correct:
#main-wrapper .single_add_to_cart_button,
.offers-for-woocommerce-make-offer-button-single-product.button {
background: #323436 none repeat scroll 0% 0% !important;
}
2. The proper CSS to have to override the background color would be to either set the .button.alt css for woocommerce css, OR here is a line to add to your theme’s CSS:
Please try this:
#main-wrapper .offers-for-woocommerce-add-to-cart-wrap.ofwc-button-right-of-add-to-cart .offers-for-woocommerce-make-offer-button-single-product { background: #323436; }
If you plan to display the Make Offer button on archive views like the shop page loop or related products, then you’ll need to override in the same way — Make sure you include the #main-wrapper on the style override and do not include !important.
Let us know if that worked for you, good luck!
Thanks for stepping in and helping @kcwebmedia!
@danielriera1, I’m going to mark this resolved, but let me know if you have any other questions or problems getting that working.
@danielriera1
I failed to give you answer on the font size and height. Use this CSS:
#main-wrapper .offers-for-woocommerce-add-to-cart-wrap.ofwc-button-right-of-add-to-cart .offers-for-woocommerce-make-offer-button-single-product {
background: #323436;
height: 40px;
line-height: 40px;
padding: 0 25px;
font-size: 12px;
letter-spacing: 1.5px;
font-size:12px;
}
Good luck!
Kcwebmedia, by any chance you are for hire? lol
After a couple days on several forums I finally found someone that could fix the issue at hand! Thank you so very much. I took out the duplicate font-size and added “Text-Transform” now its perfect!
Thank you again!
Daniel Riera
Final CSS code that did the trick:
#main-wrapper .offers-for-woocommerce-add-to-cart-wrap.ofwc-button-right-of-add-to-cart .offers-for-woocommerce-make-offer-button-single-product {
background: #323436;
height: 40px;
line-height: 40px;
padding: 0 25px;
font-size: 12px;
letter-spacing: 1.5px;
text-transform: uppercase;
}
