I was able to change the woocommerce cart button colors with the style.css entries below; however, I found that fruitful theme woo.css and woo-fixed.css are ‘hard-coding’ the remove_item a.remove and a.remove:hover background url to the same gray cansel_sale.png.
I’ve tried to change the a.remove and a.remove:hover properties (sorry if I’m not using the correct terminology), but everything I do, doesn’t work.
I would like the a.remove link to be a plain red ‘X’
Thank you for your help.
/* WooCommerce button colors */
.checkout-button.button.alt.wc-forward {
background-color: #1e73be !important;
}
.continue-shopping.button.alt.wc-forward {
background-color: #1e73be !important;
}
.button.wc-forward {
background-color: #1e73be !important;
}
.button.wc-backward {
background-color: #1e73be !important;
}
Hello,
Could you please post your site link here?
Thanks.
I am currently working on local unpublished version of my site and would be happy to share the link when I complete my update. I did find a work-around and would be interested in your opinion. I added the following to my child theme style.css and created my own cansel_sale.png and cansel_sale_hover.png in the child-theme woocommerce/images directory:
.woocommerce-cart.woocommerce table.cart a.remove,
body.woocommerce-cart.woocommerce-page table.cart a.remove,
body.woocommerce-cart.woocommerce-page .woocommerce table.cart a.remove,
.woocommerce-cart.woocommerce #content table.cart a.remove,
body.woocommerce-cart.woocommerce-page #content table.cart a.remove,
body.woocommerce-cart.woocommerce-page .woocommerce #content table.cart a.remove{
font-size: 0 ;
color:white ;
height: 21px ;
width: 21px;
padding: 0;
margin: 0 auto;
background-size: 21px;
text-shadow:none;
background: url(woocommerce/images/cansel_sale.png) no-repeat 0 0 transparent;
}
.woocommerce-cart.woocommerce table.cart a.remove:hover,
body.woocommerce-cart.woocommerce-page table.cart a.remove:hover,
body.woocommerce-cart.woocommerce-page .woocommerce table.cart a.remove:hover,
.woocommerce-cart.woocommerce #content table.cart a.remove:hover,
body.woocommerce-cart.woocommerce-page #content table.cart a.remove:hover,
body.woocommerce-cart.woocommerce-page .woocommerce#content table.cart a.remove:hover{
font-size: 0 ;
color:white ;
height: 21px ;
width: 21px;
padding: 0;
margin: 0 auto;
background-size: 21px;
text-shadow:none;
background: url(woocommerce/images/cansel_sale_hover.png) no-repeat 0 0 transparent;
}
Hello,
The color of any element can be changed using the theme options. On our demo everything is working correctly, try clearing your cache.
Have you changed the button collor here Theme options > Colors > Color for buttons?
Also free support doesn’t include: Theme customization, Custom coding, Support for 3rd party plugins.
If you want additional settings please submit a request to our support:
http://support.fruitfulcode.com/hc/en-us/requests/new
Best regards
Hi, Fruitful Code,
Thank you for your response. I did try changing WooCommerce button colors in the manner you described, but ultimately could only change them using the style.css mod above. The technique that I described above for changing the remove_item a.remove and a.remove:hover img is working well for me. Thanks again for a great theme.
I am having this same problem. The Proceed to Checkout, the Ajax view card text don’t respond to the theme options. They still are dark with white text and turn orange when hover over.
Hi,
Unfortunately it’s not possible to change with theme options. You can use CSS for this or hire our developers for WordPress development.
Regards
