Custom "Checkout" Graphic Button

Since I'm using all amazon products I was wondering if I could change the Checkout Button to my own custom graphic of the "Purchase with Amazon" graphic. I have the graphic I just need to know what code to put where.. functions.php...override.php?

I have tried to look for this....I found some code that shows how to do this for add to card button and had success, and some for other themes for the checkout button but code for other themes doesn't always work for this theme.

Thank you,

Hi,

Try with this code (use override.css file or custom CSS plugin):

Code: Select all

.wc-proceed-to-checkout a {
   background: url('path_to_your_button_background');
   border: 0;
}


done perfect however there is still text over it from the old button that says "proceed to checkout". this also has a rollover. I inspected the element and it looks like the text is in the html files. Whenever I try to edit any .html files it says access denied in my text editor

Try to add this css under border: 0; from my previous answer:

Code: Select all

  text-indent: -999999px;


That pushed the image over but you gave me an idea to just hide the text. I also added for hover etc. You see any issues with the below?

.wc-proceed-to-checkout a, .wc-proceed-to-checkout a:hover, .wc-proceed-to-checkout a:active, .wc-proceed-to-checkout a:visited {
background: url(wp-content/uploads/2015/03/CheckoutWithAmazon.gif');
border: 0;
color: rgba(0, 0, 0, 0)!important;
background-repeat: no-repeat;
}

Sure, it may be done also with your solution.