Add a Padlock (or other) Icon into Checkout Button in WooCommerce

Add a Padlock (or other) Icon into Checkout Button in WooCommerce featured image
(Last Updated On: December 13, 2017)

We recently had a request to add a padlock directly into the checkout button in a WooCommerce checkout, so I’m posting a snippet, below, which will allow you to do just that.

Please note that several plugins add their own “checkout now” text, which is not the subject of today’s lesson, so you may want to override those ones too!

How to add a padlock into WooCommerce Checkout

Where to put this

The above code should be placed into your child theme’s functions.php file, or into a custom plugin, or a plugin which allows you to store functions.

Breaking it down…

So what this gist does, right, is it hooks into the WooCommerce filter `woocommerce_order_button_text` and then tells it to use our function, which I called `sd_custom_order_button_text`.

I then define that function.

Changing the Icon from a Padlock

For the security conscious, I used a padlock in my snippet.

The main thing to take note of is I used this html encoding to make the padlock part, which looks like this in your browser: 🔒.

You can choose other icons, by finding them in lists like this one.

Leave a comment if this helped you out!

Leave a comment, below, if this worked or did not work for your to get this done in your checkout page!

Leave a Reply

Your email address will not be published. Required fields are marked *

Silicon Dales