![checkout icon checkout icon](https://www.verifyspot.com/img/checkout-icon.png)
These icons add some sense of trust to your checkout page, as people get more careful when it comes to making online purchases.These are the icons that we are going to use:Īdditionally, the ones available on Dribble are images of payment methods that a user is familiar with, for example, VISA, MasterCard, PayPal, and AMEX. Moreover, they have a pleasing design that users will love. However, the ones that stood out for me are available in Dribble. If you do a quick search on the internet, you will find a plethora of credit card icons that you can implement on the checkout page and even the footer of your WooCommerce store. The best solution would be to use SVG icons for perfect resolution on any screen.- We made it easier for you to use SVG tutorial in our WC PayIcons plugin that helps you add payment icons anywhere on your WooCommerce store.
Checkout icon download#
There are variety of sources where you can obtain these payment icons – for example creative designs marketplaces offer variety of free and premium payment methods icons like this payment methods icons set on Pixeden that you can download and use in your WooCommerce store.įor this simple tutorial, we are going to use icons that have a modern look. In most cases you want to add high resolution icons that scale well on mobile devices and look great. Ideally, the best icon design would be to add custom curved button shapes that have faux drop shadows. If you are looking for a custom, clear design that you can implement then this article will guide you. If you are running a WooCommerce store, you are probably familiar with the default set of credit card icons.To some, they might look okay, but if you open them in a high-resolution screen, they might appear a bit blurry. Check it out here currently at a discounted price. This plugin comes with an easy way to add SVG icons with more than 65+ payment methods buttons! You can also upload the payment banner if you don’t like the SVG and you can also use a shortcode to show accepted payments anywhere on your WooCommerce store. This article contains a detailed description of the steps to quickly add WooCommerce Payment Gateway icons to the checkout page.Įditing Your Theme Files is Not Always the Safe Way to Customize WooCommerce – I took away your burden of adding payment icons anywhere on your site by creating a WooCommerce Payment Icons plugin that you can find here.
Checkout icon how to#
You can choose other icons, by finding them in lists like this one.Do you want to add a custom WooCommerce Payment Gateway icon for the checkout page? In this post, I will show you how to quickly add the custom payment icons to WooCommerce checkout page. 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: ?. Changing the Icon from a Padlockįor the security conscious, I used a padlock in my snippet. 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`.
Checkout icon code#
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. 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 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.