WooCommerce Cart button colors

  • Resolved deeveedee

    (@deeveedee)


    8 years, 7 months ago

    I recently switched to the Fruitful theme from another theme after my comparison testing showed Fruitful’s much better mobile support – I’m glad I switched. You have a great theme!

    I would like to modify my WooCommerce shopping cart button colors (specifically, ‘Continue Shopping,’ ‘Remove_Item’ (the ‘X’ next to the cart item), and ‘Proceed to Checkout’). These currently appear as black bacground with white text. I have tried changing colors in the Theme Options, but the WooCommerce Cart page button colors don’t appear to respond to any of the Fruitful Theme color settings.

    Do I need to modify WooCommerce Cart button colors by overriding WooCommerce filters, or can I accomplish the color changes via Fruitful theme/style settings?

    Thank you for your support and for your great theme.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter deeveedee

    (@deeveedee)

    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.

    Thread Starter deeveedee

    (@deeveedee)

    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;
}

    Theme Author Fruitful Code

    (@fruitfulcode)

    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:
    https://support.fruitfulcode.com/hc/en-us/requests/new

    Best regards

    Thread Starter deeveedee

    (@deeveedee)

    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.

    Theme Author Fruitful Code

    (@fruitfulcode)

    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

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘WooCommerce Cart button colors’ is closed to new replies.