Support » Plugin: WooCommerce » Add to Cart Button – Custom Image

  • HI! I am using a custom theme with the WooCommerce plugin to run my shop. As I am still in the developing stage of my site, I am in the process of adding products to my site. I want to use a custom image as my add to cart button and a different image after the product has been added. I am not sure where the code is located for me to change this & also exactly what code needs to be entered. The default add to cart button is just a block with the text ‘ADD TO CART” displaying on top of the block & the same with the “ADDED” part. I have an image the looks like a ribbon, a black one for the ‘ADD TO CART’ & a green one for the ‘ADDED’. I want the add to cart button to be hidden until the customer hovers over the product then the ‘add to cart’ button slides down underneath the product. I am using the MayaShop theme. (

    Can anyone help me with this?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author royho


    You can simply use CSS to make those changes. The button class for that is “add-to-cart”. And the button class for when it has already been added is “add-to-cart.added”. Notice the “added” at the end.

    You could have easily found this out using a dev tool like firebug or chrome dev tool. Using these tools will save you tons of time developing on any site so if you don’t already, try it out.

    Thank you for the info. I will def try FireBug. I do have some experience in programming but was at a loss when I was unable to find the add to cart feature in the CSS. Thanks again. If I have more issues/questions, I will post to this thread.

    would you happen to know the coding to add the image?

    something like this might work:

    .single_add_to_cart_button {
      background: url(images/image.png) no-repeat;

    the default Woo styles are actually pure CSS gradients. If that rule isn’t specific enough then maybe you need to use button.single_add_to_cart_button instead. I’m not sure.

    i want the added to cart button image on the shop (all products) page not on the individual product pages.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Add to Cart Button – Custom Image’ is closed to new replies.