I'm hoping to set woocommerce button colours to something other than that specified as accent #1 in the theme options. I need a strong colour as accent for hyperlinks, nav underline etc but would like something more muted for woocommerce button backgrounds.
If you could point me in the right css direction, I'd be grateful.
You misunderstand me... I know how to custom css for the site. I want to know if there's an option in the theme to change woo commerce button backgrounds to something other than the accent colours set in Salient. If not, are you able to provide the css required to do so?
Hi there,
I'm hoping to set woocommerce button colours to something other than that specified as accent #1 in the theme options. I need a strong colour as accent for hyperlinks, nav underline etc but would like something more muted for woocommerce button backgrounds.
If you could point me in the right css direction, I'd be grateful.
Thanks,
Dave
Hey Again,
Please have a look at this Article :https://docs.woocommerce.com/document/customizing-woocommerce-best-practices/#section-3
Be.st
ThemeNectar Support Team
Hi Tahir,
You misunderstand me... I know how to custom css for the site. I want to know if there's an option in the theme to change woo commerce button backgrounds to something other than the accent colours set in Salient. If not, are you able to provide the css required to do so?
Thanks,
Dave
Hey Again,
Try the css selectors below .
Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
body[data-form-submit="regular"] button[type=submit].single_add_to_cart_button { background: #3452ff !important; } .woocommerce ul.products li.product .onsale, .woocommerce-page ul.products li.product .onsale, .woocommerce span.onsale, .woocommerce-page span.onsale, .woocommerce .product-wrap .add_to_cart_button.added, .single-product .facebook-share a:hover, .single-product .twitter-share a:hover, .single-product .pinterest-share a:hover, .woocommerce-message, .woocommerce-error, .woocommerce-info, .woocommerce-page table.cart a.remove:hover, .woocommerce .chzn-container .chzn-results .highlighted, .woocommerce .chosen-container .chosen-results .highlighted, .woocommerce a.button:hover, .woocommerce-page a.button:hover, .woocommerce button.button:hover, .woocommerce-page button.button:hover, .woocommerce input.button:hover, .woocommerce-page input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce-page #respond input#submit:hover, .woocommerce #content input.button:hover, .woocommerce-page #content input.button:hover, .woocommerce div.product .woocommerce-tabs ul.tabs li.active, .woocommerce #content div.product .woocommerce-tabs ul.tabs li.active, .woocommerce-page div.product .woocommerce-tabs ul.tabs li.active, .woocommerce-page #content div.product .woocommerce-tabs ul.tabs li.active, .woocommerce .widget_price_filter .ui-slider .ui-slider-range, .woocommerce-page .widget_price_filter .ui-slider .ui-slider-range, .ascend.woocommerce .widget_price_filter .ui-slider .ui-slider-range, .ascend.woocommerce-page .widget_price_filter .ui-slider .ui-slider-range, html .woocommerce #sidebar div ul li a:hover ~ .count, html .woocommerce #sidebar div ul li.current-cat > .count, body[data-fancy-form-rcs="1"] .select2-container--default .select2-selection--single:hover, body[data-fancy-form-rcs="1"] .select2-container--default.select2-container--open .select2-selection--single { background-color: #3452ff !important; }Thanks
ThemeNectar Support Team