{"id":59995,"date":"2017-11-21T16:05:53","date_gmt":"2017-11-21T16:05:53","guid":{"rendered":"https:\/\/silicondales.com\/?p=59995"},"modified":"2019-02-12T11:39:26","modified_gmt":"2019-02-12T11:39:26","slug":"add-padlock-icon-checkout-button-woocommerce","status":"publish","type":"post","link":"https:\/\/silicondales.com\/tutorials\/woocommerce\/add-padlock-icon-checkout-button-woocommerce\/","title":{"rendered":"Add a Padlock (or other) Icon into Checkout Button in WooCommerce"},"content":{"rendered":"<p>We recently had a request to add a padlock directly into the checkout button in a <a href=\"https:\/\/silicondales.com\/tag\/woocommerce\/\">WooCommerce<\/a> checkout, so I&#8217;m posting a snippet, below, which will allow you to do just that.<\/p>\n<p>Please note that several plugins add their own &#8220;checkout now&#8221; text, which is not the subject of today&#8217;s lesson, so you may want to override those ones too!<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_65 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-663188291778f\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #0a0a0a;color:#0a0a0a\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #0a0a0a;color:#0a0a0a\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-663188291778f\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/silicondales.com\/tutorials\/woocommerce\/add-padlock-icon-checkout-button-woocommerce\/#How_to_add_a_padlock_into_WooCommerce_Checkout\" title=\"How to add a padlock into WooCommerce Checkout\">How to add a padlock into WooCommerce Checkout<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/silicondales.com\/tutorials\/woocommerce\/add-padlock-icon-checkout-button-woocommerce\/#Where_to_put_this\" title=\"Where to put this\">Where to put this<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/silicondales.com\/tutorials\/woocommerce\/add-padlock-icon-checkout-button-woocommerce\/#Breaking_it_down%E2%80%A6\" title=\"Breaking it down&#8230;\">Breaking it down&#8230;<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/silicondales.com\/tutorials\/woocommerce\/add-padlock-icon-checkout-button-woocommerce\/#Changing_the_Icon_from_a_Padlock\" title=\"Changing the Icon from a Padlock\">Changing the Icon from a Padlock<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/silicondales.com\/tutorials\/woocommerce\/add-padlock-icon-checkout-button-woocommerce\/#Leave_a_comment_if_this_helped_you_out\" title=\"Leave a comment if this helped you out!\">Leave a comment if this helped you out!<\/a><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"How_to_add_a_padlock_into_WooCommerce_Checkout\"><\/span>How to add a padlock into WooCommerce Checkout<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<br>\r\n\t\t\t<script async custom-element=\"amp-gist\" src=\"https:\/\/cdn.ampproject.org\/v0\/amp-gist-0.1.js\"><\/script>\r\n\t\t\t<style amp-custom>\r\n\t\t\t  amp-gist {\r\n\t\t\t\tmargin: 1rem;\r\n\t\t\t  }\r\n\t\t\t<\/style>\r\n\t\t\t\t\t<amp-gist\r\n\t\t\t\t\t\tdata-gistid=\"7f59dd2ba078cb7dd40ec2282a9d822f\"\r\n\t\t\t\t\t\tlayout=\"fixed-height\"\r\n\t\t\t\t\t\theight=\"10000\">\r\n\t\t\t\t\t\t<\/amp-gist><br>\n<h4><span class=\"ez-toc-section\" id=\"Where_to_put_this\"><\/span>Where to put this<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>The above code should be placed into your child theme&#8217;s functions.php file, or into a custom plugin, or a plugin which allows you to store functions.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Breaking_it_down%E2%80%A6\"><\/span>Breaking it down&#8230;<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>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`.<\/p>\n<p>I then define that function.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Changing_the_Icon_from_a_Padlock\"><\/span>Changing the Icon from a Padlock<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>For the security conscious, I used a padlock in my snippet.<\/p>\n<p>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: &#x1f512;.<\/p>\n<p>You can choose other icons, by finding them in lists like <a href=\"https:\/\/lonewolfonline.net\/html-symbols-characters-entities-codes\/\" target=\"_blank\" rel=\"noopener\">this one<\/a>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Leave_a_comment_if_this_helped_you_out\"><\/span>Leave a comment if this helped you out!<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Leave a comment, below, if this worked or did not work for your to get this done in your checkout page!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We recently had a request to add a padlock directly into the checkout button in a WooCommerce checkout, so I&#8217;m posting a snippet, below, which will allow you to do just that. Please note that several plugins add their own &#8220;checkout now&#8221; text, which is not the subject of today&#8217;s lesson, so you may want &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"Add a Padlock (or other) Icon into Checkout Button in WooCommerce\" class=\"read-more button\" href=\"https:\/\/silicondales.com\/tutorials\/woocommerce\/add-padlock-icon-checkout-button-woocommerce\/#more-59995\" aria-label=\"Read more about Add a Padlock (or other) Icon into Checkout Button in WooCommerce\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":59997,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2327],"tags":[303,4369,4948,815,1459,4722],"acf":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/silicondales.com\/wp-json\/wp\/v2\/posts\/59995"}],"collection":[{"href":"https:\/\/silicondales.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/silicondales.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/silicondales.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/silicondales.com\/wp-json\/wp\/v2\/comments?post=59995"}],"version-history":[{"count":0,"href":"https:\/\/silicondales.com\/wp-json\/wp\/v2\/posts\/59995\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/silicondales.com\/wp-json\/wp\/v2\/media\/59997"}],"wp:attachment":[{"href":"https:\/\/silicondales.com\/wp-json\/wp\/v2\/media?parent=59995"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/silicondales.com\/wp-json\/wp\/v2\/categories?post=59995"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/silicondales.com\/wp-json\/wp\/v2\/tags?post=59995"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}