Sin embargo, la página de pago predeterminada podría no alinearse del todo con tus necesidades específicas y la identidad de marca de tu negocio. Al personalizar el checkout predeterminado en WooCommerce, puedes lograr:<\/p>
Mejorar la experiencia de usuario<\/strong><\/p> Un proceso de compra largo y complicado puede confundir a los visitantes y desmotivarlos a realizar la compra. Al eliminar los campos innecesarios y proporcionar una guía clara, los clientes pueden navegar de manera más fluida y rápida.<\/p> Adaptar el proceso de compra a las necesidades y preferencias específicas de tu público objetivo puede hacer que se sientan más a gusto. Por ejemplo, puedes permitir que los compradores elijan su idioma preferido, moneda, plataforma de procesamiento de pagos y método de envío para una experiencia más positiva.<\/p> Aumentar las tasas de conversión<\/strong><\/p> Según las recientes estadísticas de eCommerce, casi el 70% de los compradores abandonan su carrito antes de completar el proceso de pago. Entre las razones se incluyen tener un proceso de pago demasiado complejo, costos de envío inesperadamente altos, la obligación de crear una cuenta, un rendimiento deficiente del sitio web y la falta de distintas alternativas de pasarelas de pago.<\/p> Podrás mejorar tus tasas de conversión solucionando, a través de la personalización, los problemas que los usuarios tienen en tu página de pago o checkout.<\/p> Aumentar el valor promedio de pedido (AOV, por sus siglas en inglés)<\/strong><\/p> La personalización del checkout te permite implementar estrategias para la venta cruzada y la venta adicional.<\/p> Las recomendaciones de productos personalizadas, ofertas especiales y ofertas por paquete, si son presentadas durante el proceso de pago, pueden atraer a los clientes a añadir más artículos a su carrito y aumentar el valor promedio de los pedidos.<\/p> Antes de personalizar el checkout, te recomendamos crear un sitio de staging<\/a> primero. De esta manera, puedes probar los cambios en un entorno seguro sin afectar tu sitio que ya está público.<\/p> Afortunadamente, el hosting WooCommerce de Hostinger<\/a> viene con una herramienta de staging de WordPress integrada que puedes configurar a través del hPanel.<\/p> Si eres nuevo en WooCommerce o en WordPress en general, usar un plugin vuelve mucho más sencillo el proceso de personalización.<\/p> Aquí tienes varios plugins de embudo de ventas y creadores de páginas de pago compatibles con WooCommerce:<\/p> En este tutorial, te mostraremos cómo personalizar el checkout WooCommerce utilizando el creador FunnelKit. Sigue estos pasos para configurar el plugin:<\/p> FunnelKit te permite crear un embudo de ventas desde cero o usar una plantilla prediseñada de checkout de WooCommerce. Si prefieres la segunda opción, haz clic en Create Store Checkout <\/strong>y elige entre una amplia gama de plantillas de embudo.<\/p> Para una búsqueda más específica, cambia los filtros según los tipos de página de pago y la compatibilidad con los creadores de páginas: Elementor, Divi, Block Editor, Oxygen u otro.<\/p> Ten en cuenta que la versión gratuita solo permite un proceso de pago de una sola página. Para crear una página de pago en varios pasos, necesitas registrarte como usuario pro.<\/p> Pasa el cursor sobre cada plantilla y haz clic en el botón Preview <\/strong>para echar un vistazo más de cerca a tu diseño favorito. Así podrás ver una vista previa de tu página de pago en dispositivos de escritorio, smartphones y tabletas.<\/p> Después de encontrar el diseño correcto, selecciona Importar este embudo<\/strong> en la parte superior derecha de tu pantalla. Ingresa nombre de tu embudo y haz clic en Done<\/strong>.<\/p> Para ajustar el diseño y contenido de tu página de pago, haz clic en el botón Preview <\/strong>dentro de la caja Checkout<\/strong>.<\/p> Desde allí, selecciona Edit Checkout<\/strong> en la barra de menú superior, y se abrirá la interfaz de Gutenberg.<\/p> Realiza cambios como lo harías en cualquier página de WordPress. Simplemente selecciona cualquier elemento como texto, ícono, botón de pago o contenedor de bloque para personalizar su contenido, tipografía, color, espaciado y tamaño.<\/p> Por ejemplo, puedes subir tu propio logo haciendo clic en el predeterminado y seleccionando Replace<\/strong>. Luego, elige una imagen de la biblioteca de medios de WordPress o sube una nueva desde tu computadora.<\/p> Puedes personalizar tu logo aun más a través de la pestaña Block <\/strong>en la barra de menú de la derecha. Establece tu logo como Default <\/strong>o Rounded<\/strong>, ingresa un texto alternativo adecuado para la imagen, selecciona una relación de aspecto y ajusta su ancho y altura.<\/p> Para personalizar el diseño de tu página, selecciona el contenedor Checkout Form<\/strong> y dirígete a Style<\/strong> en el menú de la derecha. Aquí, puedes jugar con varias opciones de edición:<\/p> Una vez que todo se vea bien, no olvides hacer clic en Publicar <\/strong>o Actualizar <\/strong>para guardar tus cambios.<\/p> También puedes personalizar el diseño del formulario de envío seleccionando el bloque Checkout Form<\/strong> y navegando a General <\/strong>→ Shipping Information<\/strong> en la barra lateral derecha.<\/p> Desde allí, puedes ajustar el tamaño de cada cuadro de campo que contiene la información personal del cliente, la dirección de envío y la dirección de facturación. Hay cuatro opciones que puedes elegir del menú desplegable:<\/p> Para editar el contenido de tu formulario de envío, guarda tus cambios y haz clic en Back to Checkout Page <\/strong>en la parte superior del editor de WordPress. Bajo la pestaña Design<\/strong>, personaliza los campos de pago para la dirección de envío, el método de envío y el resumen del pedido.<\/p> Para agregar nuevos campos al formulario de la página de pago, simplemente arrástralos desde el menú Fields<\/strong>, en la barra lateral derecha, hacia tu sección deseada.<\/p> Lamentablemente, es necesario comprar el plan pro de FunnelKit para añadir campos premium como Products <\/strong>y Order Total<\/strong>.<\/p> Si deseas organizar cómo aparecen las columnas en cada sección, haz clic y mantén presionado cualquier campo y suéltalo donde desees. Asimismo, puedes eliminar un campo pasando el cursor sobre él y haciendo clic en el ícono X<\/strong>.<\/p> También hay una opción para personalizar la etiqueta de cada campo, de manera que los clientes puedan completar el formulario correctamente y finalizar su proceso de pago sin confusión.<\/p> Para hacerlo, haz clic en cualquier campo solo una vez, y aparecerá la ventana emergente Edit Field<\/strong>. Luego, ingresa el nombre de la etiqueta y el valor del marcador de posición. Haz clic en Update <\/strong>para guardar los cambios.<\/p> Una vez que todo esté configurado, asegúrate de hacer clic en Save<\/strong> para que no pierdas nada.<\/p> Integrar un campo de cupones en tu página de pago puede ofrecer descuentos a los clientes y fomentar la conversión.<\/p> Para añadir un campo de cupón, dirígete al editor Gutenberg y selecciona el bloque Checkout Form<\/strong>. En la barra lateral derecha, ve a General <\/strong>→ Collapsible Order Summary<\/strong>, y luego activa el botón Enable<\/strong>.<\/p> Desplázate hacia abajo hasta Coupon Button Text<\/strong> e ingresa un texto breve de llamado a la acción. El valor predeterminado es Apply<\/strong>. Asegúrate de que el botón Enable Coupon<\/strong> esté activado.<\/p> También es posible ocultar el campo del código de cupón y solo hacerlo visible una vez que los usuarios hagan clic en él activando la opción Collapsible Coupon Field<\/strong>.<\/p> Antes de mostrar los productos en la página de pago, asegúrate de haber agregado productos a tu tienda WooCommerce. ¿No sabes cómo hacerlo? Sigue los pasos en nuestro completo tutorial de WooCommerce<\/a>. <\/p>\n <\/div><\/p> Haz clic en Back to Checkout Page<\/strong>, abre la pestaña Products<\/strong> y haz clic en Add Product<\/strong>. Busca los productos que has agregado antes y selecciona Add<\/strong>.<\/p> Después de eso, configura los ajustes de descuento, si tienes alguno, y establece la cantidad de stock para cada producto. No olvides guardar tus cambios una vez que hayas finalizado.<\/p> Si actualizas a la versión pro, FunnelKit también ofrece la posibilidad de crear ofertas de venta adicionales de un solo clic para aumentar tus ganancias. Para hacerlo, haz clic en el ícono Back (←)<\/strong>. En Steps<\/strong>, selecciona One Click Upsell<\/strong> y elige una plantilla adecuada.<\/p> Para mejorar la experiencia del usuario, puedes mostrar tus productos y el formulario de checkout en la misma página utilizando plugins como One Page Checkout y Layouts para WooCommerce<\/a>.<\/p> Por defecto, FunnelKit es compatible con todos los métodos de pago que WooCommerce admite, incluyendo el pago contra reembolso, las transferencias bancarias y los cheques.<\/p> Si deseas ofrecer incluso más opciones de pago, la instalación de plugins como WooCommerce Stripe Payment Gateway<\/a> puede ayudarte. Además de los principales proveedores de tarjetas de crédito y débito como Visa, MasterCard, UnionPay y American Express, este plugin también admite Google Pay y Apple Pay.<\/p> Pero si principalmente recibes pagos a través de PayPal, será necesario realizar una instalación separada del plugin de WooCommerce PayPal Payments<\/a>.<\/p> Para configurar Stripe para WordPress, dirígete a Plugins <\/strong>→ Add New Plugin <\/strong> e ingresa WooCommerce Stripe Payment Gateway<\/strong> en el campo de búsqueda. Una vez encontrado, haz clic en Install Now<\/strong>. Espera unos segundos y activa el plugin.<\/p> Luego, ve a WooCommerce <\/strong>→ Settings <\/strong>en el menú de la izquierda y abre la pestaña Payments<\/strong>. Desde allí, activa todos los métodos de pago que desees.<\/p> Para publicar tu nueva página de pago creada, vuelve a FunnelKit <\/strong>→ Store Checkout<\/strong>, haz clic en el ícono de tres puntos dentro del cuadro de pago y selecciona Publish<\/strong>.<\/p> ¡Listo! Haz creado y publicado con éxito una página de pago o checkout personalizado. Debería aparecer automáticamente cuando los usuarios hagan clic en su carrito.<\/p> Para verificarlo, abre tu navegador y visita tu sitio web WordPress para ver si la página de pago personalizada de WooCommerce se muestra correctamente.<\/p> Si tu sitio aún muestra el diseño predeterminado de WooCommerce, sigue estos pasos:<\/p> Usar código personalizado te permite modificar aun más la página de pago de WooCommerce. Dicho esto, no recomendamos este método para aquellos que no están familiarizados con la edición de código, porque hasta los errores más pequeños pueden llevar a problemas críticos en el sitio web.<\/p> Puedes añadir campos personalizados a tu página de pago personalizada de WooCommerce editando tu tema en el archivo functions.php<\/strong>.<\/p> Mejora el aspecto y la experiencia de tu eCommerce con estas increíbles plantillas de WooCommerce<\/a>. <\/p>\n <\/div><\/p> Pero primero, asegúrate de crear un tema child de WordPress<\/a> para que tu personalización no se vea afectada por ninguna actualización del tema en sí.<\/p> Debes acceder a los archivos de tu sitio WordPress. Puedes usar un cliente FTP como <\/a>FileZilla<\/a> o el administrador de archivos<\/a> de tu cuenta de hosting. Si eres un usuario de Hostinger, sigue estos sencillos pasos:<\/p> Por ejemplo, para añadir un nuevo campo, usa:<\/p> Dentro de la función personalizada, usa woocommerce_form_field<\/strong> para agregar el campo. Después, especifica el tipo, como texto, casilla de verificación, clase, etiqueta, marcador de posición y estado requerido:<\/p> Para eliminar un campo, usa el filtro woocommerce_checkout_fields<\/strong>. Por ejemplo, si quieres eliminar el campo del teléfono de facturación, ingresa este fragmento de código:<\/p> También es posible modificar los campos existentes con el filtro woocommerce_checkout_fields<\/strong>. Puedes cambiar propiedades como etiqueta, clase o tipo de campos existentes.<\/p> Aquí tienes un ejemplo:<\/p> Para guardar los datos de tus campos personalizados cuando se realiza un pedido, utiliza el gancho de acción woocommerce_checkout_update_order_meta<\/strong>:<\/p>Cómo personalizar el checkout de WooCommerce usando plugins<\/h2>
\n
![\"Creando](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2025\/01\/crear-staging-wordpress-1024x406.png\")
<\/figure>\n
Cómo personalizar el checkout de WooCommerce con FunnelKit<\/h3>
\n
![\"Creando](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2025\/01\/crear-tienda-woocommerce.png\")
<\/figure>![\"Creando](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2025\/01\/crear-embudo-FunnelKit.png\")
<\/figure>![\"Subiendo](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2025\/01\/Gutenberg-editor-interface.png\")
<\/figure>\n
Personaliza el formulario de envío en la página de checkout<\/h3>
![\"Editando](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2025\/01\/informacion-de-envio-funnelkit.png\")
<\/figure>\n
![\"Tablero](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2025\/01\/tablero-de-diseno-funnelkit.png\")
<\/figure>![\"Sección](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2025\/01\/seccion-informacion-de-envio-funnelkit-1024x266.png\")
<\/figure>![\"Campo](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2025\/01\/pop-up-email-funnelkit-1024x536.png\")
<\/figure>Cómo personalizar el campo de cupón de WooCommerce durante el checkout<\/h3>
![\"Opción](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2025\/01\/checkout-plegable.png\")
<\/figure>![\"Checkout](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2025\/01\/checkout-plegable-funnelkit.png\")
<\/figure> Consejo profesional<\/strong> <\/h4>\n
Cómo añadir productos a tu checkout de WooCommerce<\/h3>
![\"Añadiendo](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2025\/01\/pop-up-anadir-producto-funnelkit-1024x398.png\")
<\/figure>Personaliza las opciones de pago en la página de checkout<\/h3>
![\"Sección](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2025\/01\/seccion-metodos-de-pago-funnelkit-1024x490.png\")
<\/figure>Publica tu página de checkout personalizado<\/h3>
![\"Botón](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2025\/01\/boton-para-publicar-checkout-funnelkit-1024x345.png\")
<\/figure>\n
Personalización del checkout de WooCommerce para usuarios avanzados<\/h2>
Cómo personalizar el checkout de WooCommerce usando código personalizado<\/h3>
¿Aún no has seleccionado un tema de WordPress? <\/h4>\n
\n
add_action('woocommerce_after_order_notes', 'your_custom_function');<\/pre>function your_custom_function($checkout) {\n echo '<div id=\"your_custom_div\">';\n woocommerce_form_field('your_custom_field', array(\n 'type' => 'text',\n 'class' => array('your-custom-class form-row-wide'),\n 'label' => __('Your Custom Field'),\n 'placeholder' => __('Enter something'),\n 'required' => true,\n ), $checkout->get_value('your_custom_field'));\n echo '<\/div>';\n}<\/pre>add_filter('woocommerce_checkout_fields', 'custom_remove_fields');\nfunction custom_remove_fields($fields) {\n unset($fields['billing']['billing_phone']);\n return $fields;\n}<\/pre>add_filter('woocommerce_checkout_fields', 'custom_modify_fields');\nfunction custom_modify_fields($fields) {\n $fields['billing']['billing_first_name']['label'] = 'New Label';\n $fields['billing']['billing_first_name']['required'] = false;\n return $fields;\n}<\/pre>add_action('woocommerce_checkout_update_order_meta', 'save_custom_field_data');\nfunction save_custom_field_data($order_id) {\n if (!empty($_POST['your_custom_field'])) {\n update_post_meta($order_id, 'Your Custom Field', sanitize_text_field($_POST['your_custom_field']));\n }\n}<\/pre>Cómo aplicar un estilo personalizado a la página de checkout con CSS<\/h3>
![\"\"](\"https:\/\/blog.hostinger.io\/mx-tutoriales\/wp-content\/uploads\/sites\/39\/2024\/06\/ES-Woocommerce-hosting-x-WP_in-text-banner.png\")
<\/a><\/figure><\/div>