Cómo Mover las Insignias de Woopayments BNPL Debajo del Precio del Producto en WooCommerce

Pregunta: “¿Cómo puedo mover las insignias de Woopayments BNPL debajo del precio del producto?”

Respuesta:

Si estás utilizando opciones de compra ahora y paga después (BNPL) en tu tienda WooCommerce, es crucial mostrar estas opciones en el lugar correcto para maximizar su impacto. Colocar las insignias justo debajo del precio del producto, en lugar de más abajo en la página o debajo del botón de agregar al carrito (ATC), es una estrategia inteligente que puede influir positivamente en las decisiones de compra de tus clientes.

La razón detrás de esto es simple: la posibilidad de dividir un pago en 4 partes efectivamente hace que el producto sea 4 veces más asequible hoy. Los clientes quieren ver esta opción justo al lado del precio, ya que les ayuda a tomar una decisión informada sin necesidad de desplazarse por la página.

¿Cómo hacerlo?

Puedes lograr esto con un pequeño ajuste en el código de tu tienda WooCommerce. Aquí te dejo los pasos básicos para mover las insignias de BNPL justo debajo del precio del producto:

  1. Localiza el Hook Apropiado:
    • En WooCommerce, el precio del producto generalmente se muestra usando el hook woocommerce_single_product_summary. Necesitarás usar un hook que inserte las insignias de BNPL justo después de que se muestre el precio.
  2. Agregar el Código Personalizado:
    • Puedes añadir el siguiente código en el archivo functions.php de tu tema hijo, o usando un plugin como 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 '
'; }

Este código elimina la acción predeterminada que muestra las insignias de BNPL debajo del botón “Agregar al carrito” y las mueve justo debajo del precio del producto.

Pro Tip:

Si estás utilizando más de una opción BNPL (como Klarna y Afterpay), considera mostrar ambas insignias en una sola línea. Esto no solo ahorra espacio en la página, sino que también optimiza la presentación en dispositivos móviles. Puedes ajustar el código para incluir ambas insignias en un solo contenedor:

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>’;

Woocommerce_logo

Conclusión

Mover las insignias de BNPL justo debajo del precio del producto en tu tienda WooCommerce puede ser un pequeño ajuste que marque una gran diferencia en las decisiones de compra de tus clientes. Asegúrate de que esta valiosa información esté ubicada en el lugar donde tendrá el mayor impacto.

Implementar este cambio es sencillo y puede mejorar significativamente la experiencia del usuario y las conversiones en tu tienda. ¡Prueba este ajuste hoy y observa cómo tus ventas pueden beneficiarse!

 

Te puede interesar: Generador de Contraseñas

Pablo Amerio
Web | + posts

Desarrollador web
UI, UX, and Front-end Developer

Similar Posts