WordPress.org

Forums

WooCommerce - excelling eCommerce
Add to Cart Button - Custom Image (6 posts)

  1. dmdup
    Member
    Posted 2 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?
    https://velvetscrubs.com

    http://wordpress.org/extend/plugins/woocommerce/

  2. royho
    Member
    Posted 2 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
    Member
    Posted 2 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
    Member
    Posted 2 years ago #

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

  5. helgatheviking
    Member
    Posted 2 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
    Member
    Posted 2 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 - excelling eCommerce
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

Tags

No tags yet.