Support » Plugin: WooCommerce » Change Colour Of 'remove item' Button

  • Hi

    I’ve been trying to find information on how to change the colour of the ‘remove item’ button that is used in the shopping cart widget and on the shopping cart page.

    Currently this button is a red ‘x’ and when you hover over it, it changes to a red circle with a white ‘x’.

    Appreciate the help


Viewing 15 replies - 1 through 15 (of 20 total)
  • Please post the url to your site so the markup can be examined with browser tools.

    I’m currently developing it on a local server (MAMP) so I cannot post the url

    Need to see it. Please feel free to come back after you have uploaded your site.

    Is there anyway that I can copy and paste what you need on to here? Is it just the page source?

    No its the styles as well. Browser tools let me work on the styles in realtime, try this and that and see what works. Maybe you can upload your site to a temporary location. The url doesn’t matter for this purpose.

    I appreciate your help. Where would you suggest uploading it too temporarily?

    You will need a hosting account, maybe the one where you intend for the completed site to be hosted.

    Okay cheers. Just a thought would you be able to do it from a demo of woocommerce that shows the same button as my site?

    If its the same theme.

    Okay. So Ive managed to find a wordpress site that is using the same theme as me and also using woocommerce. Hope this works/helpful.

    The red ‘x’ is on the cart page (also used in the sidebar widget – unfortunately this person isn’t using the widget).


    There’s a cart widget on the product page sidebar, called “Your bag”. Try this custom css to affect this widget and the cart page. Replace the color codes with the codes for your preferred colors.

    .woocommerce a.remove {color:#0aaf00 !important}
    .woocommerce a.remove:hover {color:#cccc00 !important; background:#0000aa}

    If your theme does not have the facility to enter custom css, you can use a plugin like this one:

    Using Woo Canvas on
    Above changes the color of the X, how do I change the color of the round button?
    Apologies for the horrible mix of colors!


    table.cart a.remove:hover {background:#0000f0}

    And, for the button before user hovers:

    table.cart a.remove {background:#0aaf00}

    Many thanks Lorro for your help


    .woocommerce a.remove {color:#0aaf00 !important}

    changes the ‘x’ however the second part of the code you gave me, doesn’t do anything to the hover colour.

    cheers for the help.

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘Change Colour Of 'remove item' Button’ is closed to new replies.