¿Cómo personalizar la página de pago de WooCommerce? (Codificación y complementos)

La página de pago es uno de los pasos más importantes del proceso de compra. Entonces, si tienes una tienda en línea, es clave que la personalices y optimices para aumentar las tasas de conversión. Hay varias maneras de hacer eso. En esta guía, te mostraremos 2 métodos diferentes para personalizar la página de pago de WooCommerce: con complementos y mediante programación.

¿Por qué debería personalizar la página de pago en WooCommerce?

Si tiene una tienda WooCommerce, el pago es una de las páginas más importantes de su tienda. Es donde el cliente paga y usted cierra la venta. Teniendo en cuenta cuántos compradores abandonan sus carritos y cuánta competencia hay hoy en día, el pago debe optimizarse para cerrar la mayor cantidad de ventas posible.

Aunque WooCommerce incluye una buena configuración predeterminada, es posible que deba personalizar la página de pago para aumentar las tasas de conversión en su tienda. Anteriormente hemos visto cómo personalizar la página de la tienda y cómo eliminar campos del pago, y hoy te mostraremos 2 formas diferentes de personalizar la página de pago en WooCommerce.

Personalice la página de pago de WooCommerce: 2 métodos

En esta guía, aprenderá a personalizar la página de pago en WooCommerce de 2 formas diferentes:

  1. Con un complemento
  2. Programáticamente (codificación)

1) Personaliza la página de pago con un complemento

Si no tiene habilidades de codificación, puede personalizar la página de pago de WooCommerce con un complemento. Hay muchas opciones, pero para este tutorial usaremos Administrador de pago de WooCommerce.

Este plugin lleva un par de años en el mercado y tiene más de 70.000 descargas activas. Tiene una versión gratuita con funcionalidades básicas pero potentes que puedes descargar desde aquí y 3 planes premium con funciones más avanzadas que comienzan en 20 USD (pago único). Echemos un vistazo a lo que puede hacer esta herramienta.

personalizar la página de pago de WooCommerce - principal de WooCommerce Checkout Manager

Administrador de pago de WooCommerce

Checkout Manager es uno de los mejores complementos para administrar su página de pago. Te permite agregar, personalizar y eliminar campos en la página de pago para impulsar tus ventas. Y la mejor parte es que es muy fácil de usar.

Por ejemplo, puede agregar envío, facturación y campos adicionales a la página de pago simplemente habilitando las opciones del menú. La herramienta le permite agregar u ocultar el nombre y apellido, nombre de la empresa, país, ciudad, código postal, dirección, número de teléfono, correo electrónico y muchos otros campos que puede crear.

Para hacer esto, en su panel de WordPress vaya a WooCommerce> Pagar y luego la pestaña Facturación, Envío o Adicional. Allí, verá una lista de todos los campos que desea mostrar u ocultar.

personalizar la página de pago de woocommerce - complemento del administrador de pago

Además de agregar u ocultar campos, también puede personalizar la página de pago de WooCommerce al creando campos condicionales para mejorar la experiencia del usuario. Simplemente necesita seleccionar el campo principal condicional y el valor. Además, puede agregar tarifas fijas o porcentuales a cualquier campo principal o condicional.

Una de las características más interesantes del complemento WooCommerce Checkout Manager es la posibilidad de permitir que los compradores carguen cualquier tipo de archivo durante el proceso de compra. Esto es muy útil cuando reserva un hotel o alquila un automóvil en línea y tiene que cargar su identificación o licencia de conducir. También puede editar esos archivos y dejar que los usuarios administren sus archivos en caso de que necesiten proporcionar documentos adicionales.

En general, si quieres fácilmente Personalice la página de pago, WooCommerce Checkout Manager es una excelente opción. los versión gratuita es un gran comienzo, por lo que ni siquiera necesita gastar dinero.

2) Personalice la página de pago mediante programación (codificación)

En esta sección te mostraremos cómo personalizar la página de pago de WooCommerce mediante la codificación. Entonces, al final, sabrá cómo:

  1. Agregue campos personalizados a la página de pago de WooCommcerce
  2. Guardar campos personalizados en la base de datos
  3. Agregar contenido a la página de pago
  4. Use códigos cortos en la página de pago de WooCommerce
  5. Diseñe la página de pago con CSS personalizado

Para lograr todas estas personalizaciones, utilizará algunos ganchos de pago de WooCommerce. Si no está familiarizado con los ganchos, le recomendamos que consulte nuestra guía de inicio sobre cómo usar los ganchos de WooCommerce.

Como aplicaremos algunos cambios al functions.php archivo, le recomendamos que utilice un tema hijo. Puede usar uno de los muchos complementos de temas secundarios o crear uno siguiendo esta guía.

2.1) Agregue campos personalizados a la página de pago de WooCommerce

Lo primero que le mostraremos es cómo agregar campos personalizados a la página de pago. Para hacer esto, pegue el siguiente script en el functions.php archivo del tema hijo:

// checkbox field
add_action( 'woocommerce_after_order_notes', 'quadlayers_subscribe_checkout' );

function quadlayers_subscribe_checkout( $checkout ) {
woocommerce_form_field( 'subscriber', array(
'type' => 'checkbox',
//'required' => true,
'class' => array('custom-field form-row-wide'),
'label' => ' Subscribe to our newsletter.'
), $checkout->get_value( 'subscriber' ) );
}

Esto agregará un campo de casilla de verificación personalizado al final de la página de pago para dar a los usuarios la opción de suscribirse a su boletín.

De la misma forma, puede agregar cualquier tipo de campo. Por ejemplo, agreguemos un tipo de campo de entrada de radio con el siguiente script:

// Radio input field
add_action('woocommerce_before_order_notes', 'quadlayers_radio_checkout');
function quadlayers_radio_checkout($checkout3){
woocommerce_form_field( 'feed', array(
'type' => 'radio',
//'required' => true,
'class' => array('custom-field form-row-wide'),
'label' => ' How did you find us?.',
'options' => array(
'Google' => 'Google',
'Friend' => 'Friend',
'Facebook' => 'Facebook',
'Youtube' => 'YoutTube',
'Other' => 'Other'
)
));
}

Esto agregará un tipo de entrada de radio para que pueda preguntar a sus clientes dónde se enteraron de usted.

Agregue campos personalizados a la página de pago de woocommerce

Para obtener más información sobre cómo agregar campos personalizados a la página de pago de WooCommerce, consulte esta guía completa con varios ejemplos.

2.2) Guardar valores de campos personalizados en la base de datos

Ahora, veamos cómo puede usar estos campos personalizados para editar el pago y recopilar información sobre los pedidos de WooCommerce. Para hacer esto, debe poder recuperar los valores de los campos personalizados siempre que lo necesite. Además, debe guardar los valores de los campos personalizados en la base de datos una vez que los clientes completen el formulario y presionen el Realizar pedido botón.

Para lograr esto, debe usar el 'woocommerce_checkout_update_order_meta'gancho. Entonces, para actualizar los dos campos personalizados que agregó en el paso 2.1, copie y pegue el siguiente código en el tema secundario funcitons.php expediente:

add_action( 'woocommerce_checkout_update_order_meta','quadlayers_save_function' );
function quadlayers_save_function( $order_id ){
if ( ! empty( $_POST['subscriber'] ) ) {
update_post_meta( $order_id, 'subscriber', sanitize_text_field( $_POST['subscriber'] ) );
}
if ( ! empty( $_POST['feed'] ) ) {
update_post_meta( $order_id, 'feed',sanitize_text_field( $_POST['feed'] ) );
}
}

Este script comprueba si el campo personalizado está vacío o no con un if()condicional antes de guardarlo en la base de datos.

Después de agregar este script, puede recuperar los datos guardados de la base de datos usando un global “$post” Objeto WP.

En el siguiente script, obtenemos el abonado metadatos del pedido actual. Puede usar esto en el backend de la lista de pedidos de WooCommcerce.

global $post;
$order = wc_get_order( $post->ID );
$c_meta = $order->get_meta('subscriber');

Vale la pena señalar que este es un script sin formato, por lo que deberá adaptarlo para que se ajuste a sus necesidades específicas.

2.3) Agregar contenido a la página de pago

Otra forma de personalizar la página de pago de WooCommerce es agregando contenido. Con un conocimiento sólido de los ganchos de pago de WC, puede insertar fácilmente cualquier tipo de contenido, como imágenes, títulos, texto, etc., donde quiera.

Por ejemplo, puede utilizar este script para agregar una imagen de insignia de confianza antes de Realizar pedido botón en la página de pago:

add_action('woocommerce_review_order_before_submit','quadlayers_checkout_content');
function quadlayers_checkout_content(){
echo '<img src="https://www.heresylab.com/wp-content/uploads/2019/01/paypal-1.png" />;
}

agregue insignias de confianza a la página de pago de woocommerce

Además de las imágenes, también puede agregar un texto de encabezado simple en la parte superior de la caja:

add_action(woocommerce_checkout_before_customer_details
,'quadlayers_checkout_header');
function quadlayers_checkout_header(){
echo "<h2>This is a custom Header<h2>
";
}

2.4) Use códigos cortos en la página de pago de WooCommerce

Los códigos cortos de WooCommerce le brindan mucha flexibilidad y le permiten agregar cualquier tipo de contenido utilizando ganchos de pago. Sin embargo, si simplemente imprime el código corto, no funcionará. En su lugar, debe incluirlos de la siguiente manera:

echo do_shortcode('');

Entonces, usando un gancho de la misma manera que lo hizo en ejemplos anteriores, puede terminar con algo como esto:

add_action('woocommerce_after_checkout_form','quadlayers_checkout_shortcode');
function quadlayers_checkout_shortcode(){
echo do_shortcode('');
}

Este guión traerá el shortcode into action, displaying the WooCommerce cart at the bottom of the checkout page.

Agregue soporte de código corto a la página de pago de WC

Please note that you can use any WordPress, WooCommerce, or custom shortcode. However, some shortcodes might not be compatible or supported by WooCommerce so check that before using them. To know more about shortcodes, you can check out our complete WooCommerce shortcodes guide.

2.5) Edit the WooCommerce checkout page with custom CSS

Finally, you can also customize the checkout page of your WooCommerce store by editing the CSS style. This doesn’t mean that you need to spend hours rebuilding the whole checkout page. Even a couple of simple changes can help you optimize the checkout.

For example, by editing the colors, fonts, margins, or borders, you can see some great improvements in conversion rates. There’s no magic formula that works for every business here and you’ll need to test different styles but adjusting a few things can help you boost your sales.

For example, you can use this simple script to apply a custom CSS style and customize the background color on the checkout page:

add_action('wp_head','quadlayers_checkout_style');

function quadlayers_checkout_style(){
         if(is_checkout()==true){

                 echo '<style> body{background:#dfdfff!important;}<style>';
         }
}

On top of that, you can take this script as a base and add your own CSS rules inside the HTML tag to give it the perfect look and feel for your site.

This is a quick hack to apply CSS to the checkout page. It’s very handy to add small pieces of CSS. But if you want more extensive style scripts, you should enqueue the CSS style the WordPress way, using the wp_enqueue_style() gancho WP nativo de la siguiente manera:

add_action( 'wp_enqueue_scripts', 'quadlayers_enqueue_css' );

function quadlayers_enqueue_css(){    
    wp_enqueue_style(  'checkout_style',
        get_stylesheet_directory_uri() . '/checkout-style.css'
    );
}

De esta manera, puede tener todo su CSS personalizado en un archivo separado (checkout-style.css en este ejemplo) que se almacenará en la carpeta del tema hijo al mismo nivel que el principal style.css expediente.

Estos son solo algunos ejemplos de cómo puede personalizar la página de pago en WooCommerce con algunos scripts simples. Le recomendamos que los tome como base y juegue para agregar o editar cualquier otro aspecto de su pago.

Además, si desea editar la página de la tienda mediante la codificación, le recomendamos que eche un vistazo a nuestra guía sobre cómo personalizar la página de la tienda de WooCommerce mediante programación.

Conclusión

En general, personalizar la página de pago puede marcar una gran diferencia y ayudarlo a llevar su tienda WooCommerce al siguiente nivel. Incluso con algunos cambios, puede aumentar las tasas de conversión y aumentar sus ventas.

En esta guía, le mostramos dos formas de editar el pago:

  • Con un complemento
  • Programáticamente (mediante codificación)

Si no tiene habilidades de codificación pero desea una solución sencilla pero sólida, Administrador de pago de WooCommerce es tu mejor opción. Este complemento freemium tiene funcionalidades muy poderosas para editar la página de pago y es muy fácil de usar.

Por otro lado, si desea crear su propia solución mediante alguna codificación y no desea instalar ningún complemento, puede personalizar la página de pago mediante programación. Le mostramos cinco ejemplos diferentes para editar diferentes aspectos del pago, pero las opciones son infinitas. Juega con los guiones y da rienda suelta a tu creatividad para optimizar tu pago.

Si desea acortar el proceso de pago para mejorar las tasas de conversión, le recomendamos que utilice un complemento de compra rápida para WooCommerce o enlaces de pago directo. Por último, si quieres conocer diferentes opciones para personalizar también la página de la tienda en tu tienda, te recomendamos que eches un vistazo a esta guía paso a paso.

¿Tiene alguna pregunta o desea compartir con nosotros las personalizaciones de pago que ha aplicado a su sitio? ¡Háganos saber en la sección de comentarios! ¡Estaremos encantados de saber de ti!