How to change the Proceed to checkout button to an image

Support
#1

Hey,

I would like to replace the checkout button to an image. I have tried using this

.woocommerce-cart .wc-proceed-to-checkout [class*=“checkout-button button alt wc-forward”] {
background-image: url(https://outdoordogsupply.com/wp-content/uploads/2017/09/VisaMasterDiscoverAmerican.png);
display: block;
max-width: 400px;
margin: 0 auto 20px;

} !important;

But all that dose is put the image in the button. I need to replace the button with the image but have the image do the same thing the button dose. Which takes you to the Checkout page.

The URL is Outdoordogsupply.com

#2

Hello There,

Thanks for writing in! Do you want something like this?

Please make use of this code instead:

.woocommerce-cart .wc-proceed-to-checkout [class*="checkout-button button alt wc-forward"] {
    background-image: url(https://outdoordogsupply.com/wp-content/uploads/2017/09/VisaMasterDiscoverAmerican.png);
    background-size: contain;
    max-width: 400px;
    margin: 0 auto 20px;
    text-indent: -99999px;
}

Hope this helps. Kindly let us know.

#3

I was looking for just the icons and no orange button behind it. Also can we make it so it dose not repeat. How can I add texted above it saying Proceed to checkout or Proceed to pay with the fallowing.

#4

Hello Again,

You want something like this?

Please update the css and make use of this code:

.woocommerce-cart .wc-proceed-to-checkout [class*="checkout-button button alt wc-forward"] {
    background-color: transparent;
    border: none;
    box-shadow: none;
    background-image: url(https://outdoordogsupply.com/wp-content/uploads/2017/09/VisaMasterDiscoverAmerican.png);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 250px;
    margin: 0 auto 20px;
    text-indent: -99999px;
}

Hope this helps. Please let us know how it goes.

#5

That worked GREAT!! Thank you so much!! Is there any I can add texted above the credit cards saying Choose your payment option. Also can we make the image a little larger?

#6

Hello Again,

1.) To add a custom text above the buttons, since the child theme is set up, please add the following code in your child theme’s functions.php file

// Add checkout button heading
// =============================================================================
function payment_option_title(){ ?>
	<h5>Choose your payment option</h5>
<?php }
add_action('woocommerce_proceed_to_checkout', '', 5);
// =============================================================================

2.) To make the image a little bigger, we will set a minimum height and increase the width. You can make use of this css code instead:

.woocommerce-cart .wc-proceed-to-checkout [class*="checkout-button button alt wc-forward"] {
    background-color: transparent;
    border: none;
    box-shadow: none;
    background-image: url(https://outdoordogsupply.com/wp-content/uploads/2017/09/VisaMasterDiscoverAmerican.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    max-width: 350px;
    min-height: 50px;
    margin: 0 auto 20px;
    text-indent: -99999px;
}

We would loved to know if this has work for you. Thank you.

#7

When I added this to the function.php file I got a weird error message. I attached a an image.

I need those words before I can try the other code.

#8

Hello There,

Sorry if it does not work. There is a typo error in the code. Please update it to:

// Add checkout button heading
// =============================================================================
function payment_option_title(){ ?>
	<h5>Choose your payment option</h5>
<?php }
add_action('woocommerce_proceed_to_checkout', 'payment_option_title', 5);
// =============================================================================

Please let us know if this works out for you.

#9

Awesome!! That worked great. Thank you so much

#10

Glad we could help.

Cheers!