CODEWITHSUNDEEP
wordpresswoocommerce
Micah Githens
Micah Githens

Reputation: 1261

How to add an icon to the WooCommerce “Proceed to Checkout” & "Update Cart" buttons located on the cart page?

I'm trying to add a "fa-chevron-circle-right" icon to the "Proceed to Checkout" button and add another icon to the "Update Cart" button.

I've tried changing this

<input type="submit" class="checkout-button button alt" name="proceed" value="<?php _e( 'Proceed to Checkout &rarr;', 'woocommerce' ); ?>" />

to this

<button type="submit" class="checkout-button button btn-primary alt" name="proceed"><?php _e( 'Proceed to Checkout', 'woocommerce' ); ?> <i class="fa fa-chevron-circle-right"></i></button>

but for some reason the button no longer works. When you click the "Proceed to Checkout" using the button <button> tag it does not proceed to the checkout page like it does when using the default <input> button.

Using CSS3 :after or :before doesn't work on <input> tags either.

I've also tried adding a jQuery form submit trigger to my custom buttons which is not work. At this point the only hacked solution that I can think of is to visually hide the <input> buttons and trigger their submission via jQuery.

Upvotes: 0

Views: 3983

Answers (2)

ElvinD
ElvinD

Reputation: 695

Why not to add background image instead of editing its core file like you can see below 

.woocommerce button.checkout-button {
 background-image: images/pathtoimages.png;

}

Upvotes: 0

Elias Rodrigues
Elias Rodrigues

Reputation: 501

I had this same type of issue a while ago and here it's what I did to solve the problem.

Add a class submit to your button

<button type="submit" class="checkout-button button btn-primary alt submit" name="proceed"><?php _e( 'Proceed to Checkout', 'woocommerce' ); ?> <i class="fa fa-chevron-circle-right"></i></button>

And on the JavaScript file this part to submit (better to be include on the footer of the page before the </body>)

<script type="text/javascript">
$(".submit").click(function(){ $(this).closest("form").submit(); });
</script>

Upvotes: 1

Related Questions