Replace "Add to cart" button with image for WooCommerce theme

Hi,

I am using your theme with woocommerce.

How do i replace the “add to cart” button in product page with an image?

thanks.

Something like this will do the trick. Of course this is just a general idea and you will have to use your own image, size, remove text and apply different styling on hover but since you are web developer/designer it shouldn’t be a problem.

button.single_add_to_cart_button.button.alt {
    background: url('https://colorlib.com/travelify/wp-content/uploads/sites/4/2013/07/download-theme.png') no-repeat;
    width: 270px;
    height: 270px;
}

noted with thanks.

however, how can i move this cart.jpg image same line, next to the price tag?

i tried hard code to adjust the cart.jpg image next to the price tag, however, the alignment are running out in mobile version. any idea?

appreciate for your help.

This code worked for me but it doesn’t work on single product pages with variations.
http://rightwaynutrition.com/shop/weight-management/veggifitt-choco/

but it works on single product pages with no variations
http://rightwaynutrition.com/shop/weight-management/veggifitt-sample-pack/

You need to specific different CSS select for for that. Here is another example using the same image:

.woocommerce .single_add_to_cart_button {
    background: url('https://colorlib.com/travelify/wp-content/uploads/sites/4/2013/07/download-theme.png') no-repeat;
    width: 270px;
    height: 270px;
}

Let me know if this helps.