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

iphone mockup checkout

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

//Add a checkout padlock and alternative message in the Pay Now button - by Robin Scott of Silicon Dales
add_filter( 'woocommerce_order_button_text', 'sd_custom_order_button_text' );
function sd_custom_order_button_text() {
return __( 'Checkout Securely 🔒', 'woocommerce' );
view raw functions.php hosted with ❤ by GitHub

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

  1. Hello,

    thanks !
    how to change it too for the cart page button ?


Leave a Reply

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