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

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!

1 thought on “Add a Padlock (or other) Icon into Checkout Button in WooCommerce”

Leave a comment

No links of any kind allowed in comments - if you add any links, your comment will automatically be deleted.