Add to Cart Button - Custom Image (6 posts)

  1. dmdup
    Posted 3 years ago #

    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. (http://themeforest.net/item/mayashop-a-flexible-responsive-ecommerce-theme/full_screen_preview/2189918)

    Can anyone help me with this?


  2. royho
    Plugin Author

    Posted 3 years ago #

    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.

  3. dmdup
    Posted 3 years ago #

    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.

  4. dmdup
    Posted 3 years ago #

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

  5. helgatheviking
    Posted 3 years ago #

    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.

  6. dmdup
    Posted 3 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • WooCommerce
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic


No tags yet.