In the world of online shopping, trust is a crucial factor in converting visitors into customers. One effective way to build trust with your online store visitors is by prominently displaying payment trust badges on your WooCommerce checkout page. These badges reassure customers that their payment information is secure and that they can shop with confidence. In this article, we’ll walk you through the steps to add a payment trust badge to your WooCommerce checkout page, helping you boost credibility and increase conversions.
What is a Payment Trust Badge?
Payment trust badges, also known as security seals, are visual indicators displayed on a website to assure visitors that their personal and financial information is protected. They convey that your online store adheres to the highest security standards and your website will safeguard sensitive data.
Some of the most recognized payment trust badges include:
1. SSL (Secure Socket Layer) Certificate: Indicates that data transmission between the user’s browser and the server is secure.
2. PCI DSS Compliance: Demonstrates that your store is compliant with the Payment Card Industry Data Security Standard, which is essential for processing credit card payments securely.
3. Trustworthy Payment Gateway Logos: Icons or badges from trusted payment processors like PayPal, Visa, Mastercard, and others.
4. Money-Back Guarantee: Promises a risk-free shopping experience, assuring customers they can get their money back if not satisfied with their purchase.
Adding a Payment Trust Badge to WooCommerce Checkout
Now, let’s get into the steps to add these trust badges to your WooCommerce checkout page (note – I always recommend trying this on a staging site first before moving the code over to your live site):
Get the trust badges
1. Choose Your Trust Badges: Start by selecting the payment trust badges you want to display. It’s essential to use only recognized and trustworthy badges relevant to your store’s payment methods and security measures. Conduct a Google image search to find the trust badge for your Payment Gateway. View links to the most popular Payment gateway images below.
PayPal images available here: https://www.paypal.com/gd/webapps/mpp/logo-center
Moneris image available here: https://www.moneris.com/en/support/additional-resources/moneris-and-card-brand-logos
Stripe images available here: https://stripe.com/en-ca/newsroom/information
2. Obtain the Badge Images: Download high-quality badge images in a format that supports transparency (PNG or SVG are ideal). Ensure that these images have a transparent background to seamlessly blend with your website’s design. If the downloaded image does not have a transparent background, use an image editor to remove the background.
3. Upload Badge Images to Media Library: Log in to your WordPress dashboard and navigate to the “Media” section. Upload the badge images to your media library. This step will enable you to access the image URLs later. After uploading the image, grab a copy of the image URL (we will need this URL later). You could link to the image URL on the Payment gateway website but some providers frown and do not permit this sort of hot-linking.
Install The Code Snippet
4. Install Code Snippets Plugin: Go to the Plugins section of your Dashboard and click Add New. Search for the ‘Code Snippets’ plugin. Install and activate the Code Snippets Plugin.
5. Insert the Badge Code: Once installed, select ‘Add New Snippet’. Give the Snippet a title, such as ‘Add Trust Badge to Checkout’. Insert the following code in the php area of the Snippet editor (note – you may have to change the quote symbols in the below code to actual quote symbols as most websites encode quote symbols and they will not work in php code):
add_action( 'woocommerce_review_order_after_payment', 'majaid_display_trust_seal_image' );
function majaid_display_trust_seal_image() {
echo '<img class="trust-image" src="https://www.paypalobjects.com/webstatic/mktg/logo/bdg_secured_by_pp_2line.png" alt="PayPal Trust Seal" />';
}Ensure to replace text inside the src=” ” section with the URL copied from your media library earlier.
Change the look and feel
6. Customize the Display: Use CSS to adjust the size, spacing, and alignment of the badge to make it visually appealing and in harmony with your checkout page’s design. You can do this by modifying the CSS within the code you added in the previous step or by adding the CSS to your stylesheet (target the class ‘trust-image’).
7. Test Your Checkout Page: Verify that the code is working by attempting to purchase a product from your website. Once you have an item in your Cart and proceed to the Checkout page, you should see the Trust badge below the Place Order button.
8. Save Changes: If you are happy with how the trust badges look and function on your WooCommerce checkout page, save the changes.
Conclusion
Adding payment trust badges to your WooCommerce checkout page is a simple yet effective way to build trust with your customers and increase the conversion rate. By demonstrating your commitment to security and trustworthiness, you can encourage visitors to complete their purchases with confidence. Follow the steps outlined in this guide to integrate trust badges seamlessly into your WooCommerce store and take a significant step towards boosting your online business’s credibility.
Need help adding a Trust Badge to your WooCommerce website?
Let’s chat!