How to Move Woopayments BNPL Badges Below the Product Price in WooCommerce
Question: “How can I move the Woopayments BNPL badges below the product price?”
Answer:
If you’re using Buy Now, Pay Later (BNPL) options in your WooCommerce store, it’s crucial to display these options in the right place to maximize their impact. Placing the badges right below the product price, instead of further down the page or below the add to cart (ATC) button, is a smart strategy that can positively influence your customers’ purchasing decisions.
The reasoning behind this is simple: the ability to split a payment into four parts effectively makes the product four times more affordable today. Customers want to see this option right next to the price, as it helps them make an informed decision without needing to scroll through the page.
How to do it?
You can achieve this with a small adjustment to your WooCommerce store’s code. Here are the basic steps to move the BNPL badges just below the product price:
Locate the Appropriate Hook: In WooCommerce, the product price is typically displayed using the woocommerce_single_product_summary hook. You’ll need to use a hook that inserts the BNPL badges right after the price is displayed.
Add the Custom Code: You can add the following code to your child theme’s functions.php file, or use a plugin like Code Snippets:
remove_action( 'woocommerce_after_add_to_cart_button', 'woocommerce_show_bnlp_badge', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_show_bnlp_badge', 25 );
function woocommerce_show_bnlp_badge() {
// Aquí va el código para mostrar las insignias de BNPL
echo '';
echo 'Aquí tus insignias de BNPL';
echo '';
}
This code removes the default action that displays the BNPL badges below the “Add to Cart” button and moves them right below the product price.
Pro Tip: If you’re using more than one BNPL option (such as Klarna and Afterpay), consider displaying both badges in a single line. This not only saves space on the page but also optimizes the presentation on mobile devices. You can adjust the code to include both badges in a single container:
echo ‘<div class=”bnpl-badges-inline”>’;
echo ‘<img src=”ruta/a/klarna.png” alt=”Klarna”>’;
echo ‘<img src=”ruta/a/afterpay.png” alt=”Afterpay”>’;
echo ‘<p>Compra ahora, paga en 4 partes iguales</p>’;
echo ‘</div>’;
Conclusion
Moving the BNPL badges just below the product price on your WooCommerce store can be a small adjustment that makes a big difference in your customers’ purchasing decisions. Make sure this valuable information is placed where it will have the most impact.
Implementing this change is straightforward and can significantly enhance the user experience and conversions in your store. Try this adjustment today and see how your sales can benefit!
You might be interested in: Online Image Vectorization
