Una guía completa de la página de pago de WooCommerce [Aug, 2021]

WooCommerce es una extensión maleable y poderosa que se puede emplear para convertir su portal web de WordPress en un sitio de comercio on-line dinámico. Sin embargo, si quiere achicar el rechazo del carro de compras, acrecentar las tasas de conversión y aumentar las ventas, asegúrese de prestar atención a su página de pago de WooCommerce.

Existen muchas formas distintas de diseñar y modificar páginas de pago en WooCommerce. Así sea que quiera configurar su primera tienda online y comprender cómo marcha este ubicación, o prosperar su experiencia de efectivo en su página web de hoy de WooCommerce, podemos satisfacer sus pretensiones.

En el artículo, hablaremos sobre qué es una página de pago de WooCommerce y cómo marcha. Entonces pasamos por muchas opciones, puede usar extensiones, códigos, temas, etc. para modificar el estilo, cambiarlo y mejorar la conversión.

¡Saltemos inmediatamente!

Descripción general de la página de pago de WooCommerce

Cuando instala WooCommerce por vez primera, el complemento crea y configura de manera automática una página de pago. Si obtiene una perspectiva en la interfaz del página web, encontrará que es bastante simple:

De forma predeterminada, WooCommerce solicita a los clientes que proporcionen información básica. Esto incluye:

• Información de facturación
• Nombre y apellido
• Nombre de la compania
• Dirección (ciudad, país, zona y código postal)
• Número de teléfono
• Dirección de e-mail
• Suscribirse a notas
• Protección de Datos

Esta es información importante contenida en la página de pago de WooCommerce. Da la información descriptiva que un cliente precisa para completar una compra y un portal de internet para procesar su información de pago.

No obstante, nada aquí ayudará siempre a acrecentar las tasas de conversión o reducir el pago. Además, posiblemente la página estándar no tenga dentro la información más importante o útil para su negocio. En consecuencia, como varios dueños de sitios de WooCommerce, posiblemente quiera cambiar el aspecto y el contenido de su página de pago.

Antes de que le presentemos las distintas formas en que puede modificar su página de pago en WooCommerce, primero debe comprender algunas cosas.

Charlemos sobre de qué manera conseguir esta página y las distintas configuraciones y especificaciones predeterminadas del complemento WooCommerce.

¿Dónde puedo encontrar la configuración y la página de pago predeterminadas de WooCommerce?

Tras encender el complemento, WooCommerce creará automáticamente una página de pago para su tienda. Puedes pasar a eso página > Cheque En el tablero:

Página de pago en WooCommerce.

Puede modificar esta página como todos contenido de WordPress. Por poner un ejemplo, puede cambiar el título de la página y el enlace persistente, añadir imágenes mostradas, cambiar las características de la página, etc. Asimismo emplea [woocommerce_checkout] Código corto:

Código corto de la página de pago de WooCommerce en WordPress.

Existen algunas opciones estándar para configurar esta página, algunas de las cuales se cuentan ahora. WooCommerce > crear > progresivo:

Pestaña "Adelantado" en la configuración de WooCommerce

En esta pantalla en Configuración de página En la sección puedes escoger otra página Utilice su negocio como pantalla de pago. Asimismo puedes forzarlo Conexión HTTPS segura.

existir En general En la página de configuración, puede encender cupones al finalizar la adquisición y saber de qué forma se calculan los impuestos:

Página de configuración general en WooCommerce.

debajo cuenta Y intimidad La pestaña también tiene algunas opciones para la creación de cuentas y la publicación de convidados:

Pestaña "Cuenta y privacidad" en la configuración de WooCommerce

A continuación se muestra un Política de privacidad Aquí puede cambiar la parte del texto de la política de privacidad que aparece en la página de pago:

Configuración de privacidad de WooCommerce

Aparte de estas configuraciones integradas, tiene acceso con limite al pago mediante WooCommerce. integrar Extensión separada. Afortunadamente, puede emplear otros métodos para prosperar su fachada y aumentar su ocupación.

¿Por qué deseas cambiar tu página de pago de WooCommerce?

La página de pago es el último contenido que ve el cliente antes de comprar. Puede diferenciarse si cambian de su lugar o los abandonan por completo.

Por lo tanto, debe cerciorarse de que su página de pago de WooCommerce esté bien diseñada y funcione de una forma que promueva los desenlaces. Pueden proveer una mayor vivencia de muchas formas, como:

• Cambiar el aspecto de la página
• Crea un escritorio de una página
• Añadir, remover u ordenar campos
• Cambiar el nombre del campo de entrada y el texto del botón
• Ciertos campos son obligatorios
• Empieze el envío gratis de manera automática
• Vincular el producto de manera directa a la caja

Así sea que quiera cambiar la página ya establecida o realizar pequeños cambios, es importante que pueda llevarlo a cabo de forma fácil. Por suerte, tienes muchas opciones.

¿Quiere ... ✅ achicar los carros de compras abandonados, ✅ acrecentar las conversiones y ✅ aumentar las ventas? Entonces este articulo es para usted. 👇Aprenda a crear una página de pago personalizada de WooCommerce en minutos⏱Lleve a cabo clic para twittear

Métodos que se pueden usar para modificar una página de pago de WooCommerce

Hay varias formas de cambiar su página de pago de WooCommerce. La mejor elección depende de causantes como la edición que quiera y lo familiarizado que esté con la codificación.

Algunas formas en las que puede mejorar su página de pago de WooCommerce incluyen:

• Funciones, bloques y códigos cortos de WooCommerceWooCommerce tiene algunas peculiaridades y configuraciones integradas que tienen la posibilidad de emplearse para progresar su tienda. Por poner un ejemplo, puede iniciar de manera automática el envío gratis y vincular artículos de forma directa al pago. Asimismo hay bloques y atajos para cambiar de página.
• Extensiones y extensionesSi no está familiarizado con la tecnología o sencillamente quiere una manera rápida y simple de progresar su página de pago de WooCommerce, puede utilizar varios complementos. La mayoría de ellos son simples de empezar y casi no se precisa asistencia. WooCommerce proporciona ciertos complementos y están libres en la biblioteca de extensiones, al paso que otros complementos son desarrollados y proporcionados por interfaces de terceros.
• Plantillas y temas de página. Si quiere cambiar el estilo de la página de pago, puede utilizar plantillas o patrones preparados para usar. Exactamente la misma los complementos, esta es una alternativa confiable si tiene una experiencia de programación limitada y desea cambiar el aspecto de la página a fin de que se adapte mejor a su marca. La desventaja es que no proporciona bastante elasticidad, como la codificación adaptada.
• Código personalizadoOtra forma de cambiar la página de pago de WooCommerce es ajustar la codificación. Si está habituado a editar ficheros del lugar y desea añadir mucho contenido personal, esta es una manera efectiva.

Las siguientes partes describen mucho más sobre los cambios más efectivos que puede efectuar en las páginas de WooCommerce. Les explicaremos a todos por qué desea editar y lo guiaremos mediante los diferentes métodos que puede usar para editar.

Personaliza los campos de pago de WooCommerce

Entre los cambios más comunes que puede efectuar en una página de WooCommerce es cambiar sus campos de formulario. Por lo general, llenan la mayoría del espacio de la página y, por lo tanto, han de ser importantes. Tiene múltiples opciones para eliminar, reordenar o añadir nuevos campos customizados. Puede usar extensiones o modificar el código de forma directa.

Use complementos para cambiar los campos de pago de WooCommerce

Si desea editar los campos de pago de WooCommerce de manera rápida y simple, le aconsejamos que utilice el complemento. Hay múltiples opciones para seleccionar.

Entre los complementos mucho más populares es el complemento Checkout Field Editor:

Complemento de WooCommerce de Checkout Field Editor

Esta es una herramienta freemium que le deja agregar o modificar campos de formulario en la página de pago de WooCommerce. Puede habilitar o deshabilitar campos específicos y reorganizar comandos.

Más allá de que la versión gratuita le facilita llevar a cabo estas tareas básicas, WooCommerce Checkout Field Editor Pro incluye funciones adicionales. Esto incluye 17 género de campo y ganchos customizados.

Para usar esta extensión, instálela yendo a su cibersitio WooCommerce Conectar > Añadir uno nuevo Entonces busque, cuando lo halle, realice click en él disponer en este momento Entonces el botón Activar.

Tras la activación, puede modificar los cambios de la próxima manera WooCommerce> Formulario de pago:

Complemento de edición de formularios de pago en WooCommerce

Puede editar tres géneros de campos:

1. otoño
2. Envío
3. Además

Puede elegir cualquier campo que desee cambiar y hacer clic en él Remover, Encendero desactivar Para agregar un nuevo campo, escoja Agregar un campo.

Para cambiar un campo de formulario existente, seleccione el cuadro de la izquierda y realice clic en editar Solucionar. Se abre un panel donde puede cambiar el género de campo (solo versión extendida), modificar la descripción del campo, elegir si quiere esto, etc.:

Editor de campo de pago Edite el panel del campo de pago en el complemento WooCommerce

En el momento en que haya terminado, haga click en ahorrar Después de efectuar cambios en los campos de la página de pago, haga click en almacena los cambios En la parte inferior de la pantalla.

Consulte la documentación de WooCommerce para obtener mucho más información sobre la utilización del complemento Checkout Field Editor.

Naturalmente, esta es solo una de las muchas extensiones que puede utilizar para cambiar los campos de pago de WooCommerce. Otras opciones a considerar son los campos de pago flexibles y la gestión de pago de WooCommerce, que analizaremos en aspecto mucho más adelante en el artículo.

Use el código para modificar los campos de pago

Otra alternativa para modificar los campos en la página de pago de WooCommerce es emplear codificación personalizada. Esto, como es natural, requiere algunos entendimientos técnicos y la aptitud de utilizar los archivos del lugar con destreza. La ventaja es que tiene mucho más flexibilidad para personalizar que para emplear extensiones de otros.

Puedes utilizar el sitio Función. Php Ficheros y filtros, por poner un ejemplo:

• woocommerce_checkout_fields
• woocommerce_billing_fields
• Woocommerce_shipping_fields

Con las funciones y filtros de WooCommerce, puede manejar su pago de prácticamente cualquier manera. Por poner un ejemplo, puede eliminarlos por completo, agregar nuevos o cambiar el texto que hace aparición woocommerce_checkout_fields Puede reemplazar cualquier campo con un filtro.

Suponga que quiere cambiar el artículo de la marca de posición. Comentar el pedido ¿Página? ˅. De forma ya establecida, se establece de la próxima manera:

_x('Aprecies about your order, y también.g. special aprecies for delivery.', 'placeholder', 'woocommerce')

Si desea cambiarlo, puede añadir este fragmento de su propio Función. Php archivo:

// Hook in

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!

function custom_override_checkout_fields( $fields ) 

$fields['order']['order_comments']['placeholder'] = 'My new placeholder';

return $fields;

Puede borrar los campos con el próximo comando:

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed vía the filter!
function custom_override_checkout_fields( $fields ) {

unset($fields['order']['order_comments']);

return $fields;

Puede realizar muchos cambios en los campos de la página de pago, con lo que no los cubriremos todos aquí. Encontrará una lista útil de códigos de campo para contrastar la cobertura en GitHub.

De qué manera cambiar la plantilla de la página de pago de WooCommerce

De manera predeterminada, la plantilla de la página de pago de WooCommerce se basa en el tema de su sitio web. No obstante, posiblemente desee cambiar el diseño a fin de que se ajuste mejor a su marca o efectuar solo cambios menores en el contenido de la página de la plantilla.

Ámbas formas principales de cambiar esta configuración son a través de la utilización de plantillas predefinidas o agregando código. Comencemos por el primero.

Edite la página de pago según una plantilla prefabricada

La manera más simple de cambiar el aspecto de su página de pago de WooCommerce es instalar un tema prediseñado, como la tienda de temas WooCommerce. Hay una variedad de opciones gratis y temas avanzados para escoger.

Por poner un ejemplo, puede buscar temas de pago de una sola página u otras plantillas particulares que quiera usar. También encontrará una gran cantidad de temas de WooCommerce en Envato Market.

Edite la plantilla de la página de pago de WooCommerce con código

Si desea modificar el código, asimismo puede cambiar la plantilla de la página de pago manualmente. En dependencia de su proveedor de host, puede hacerlo a través del administrador de ficheros cPanel o el cliente del Protocolo de transferencia segura de archivos (SFTP).

Los ganchos de funciones le dejan añadir, modificar o remover elementos en la página de pago. WooCommerce utiliza nueve ganchos principales en la página de pago:

• woocommerce_before_checkout_form
• woocommerce_checkout_before_customer_details
• woocommerce_checkout_billing
• woocommerce_checkout_shipping
• woocommerce_checkout_after_customer_details
• woocommerce_checkout_before_order_review
• woocommerce_checkout_order_review
• woocommerce_checkout_after_order_review
• Woocommerce_after_checkout_form

Estos ganchos de acción añaden notas a la página para ayudarlo a ajustar el estilo y la acción. Si desea usar estos ganchos de acción para cambiar la plantilla de la página de pago, puede hacerlo editando el fichero php en el formulario de pago.

Puede hallar el fichero de plantilla de WooCommerce a continuación / woocommerce / template. Necesitas andar desde la raíz de tu sitio web. wp-content / plugin / woocommerce:

Carpeta de plantillas de WooCommerce

Los ganchos en estos ficheros le permiten añadir y ordenar contenido en una página de plantilla sin editar el archivo de plantilla en sí. Si quiere crear una plantilla de tema personalizada para su página de pago, primero debe crear una carpeta "woocommerce / Checkout" en la carpeta del tema.

A continuación, copie la plantilla para la página de pago de WooCommerce. Puedes encontrar el modelo en el siguiente lugar woocommerce / templates / Checkout / form-checkout.php:

Fichero de plantilla de página de pago de WooCommerce

Entonces agréguelo a la nueva carpeta que termina de hacer. A continuación, puede modificar el archivo para realizar los cambios que quiera. En el momento en que almacena un archivo, el complemento WooCommerce carga su plantilla y sustituye la plantilla de página ya establecida.

Creación de un pago unidireccional de WooCommerce

Una manera de mejorar la experiencia de efectivo del cliente mientras que se reduce la tasa de rebote es lograr que el proceso sea lo mucho más veloz y fácil viable. Si quiere acortar el desarrollo de pago, puede hacerlo creando un pago de una página en WooCommerce.

Hay varias maneras de llevar a cabo esto. Como se mentó previamente, puede buscar temas en páginas individuales o plantillas que brinden solo una página de pago. Si le gusta el diseño de hoy, es posible que no desee cambiarlo.

Si es así, no se preocupe. Hay otras opciones, como la extensión avanzada de pago de una página de WooCommerce:

Extensión de pago de una página de WooCommerce

Debido a que esta solución fue desarrollada por WooCommerce, sabe que es segura, confiable y tiene mucho soporte. Además de convertir cada página en una página de pago, también proporciona muchas funcionalidades para mejorar el desarrollo de pago de solo una página.

usted puede:

• Vea la selección de artículos y el formulario de pedido en una página.
• Deje que los clientes agreguen o supriman modelos de su carro.
• Deje que los clientes realicen un pago sin salir de la página.
• Añade campos customizados a la página.

En el momento en que haya comprado el complemento a través de su cuenta de WooCommerce, puede bajar el complemento e instalarlo y activarlo en su lugar de WooCommerce.

Para emplearlo, vaya a página > Agregar uno nuevo Y elige Página de pago Iconos en la barra de herramientas del editor:

Icono de extensión de pago de una página en el editor de WordPress

En la ventana que se abre puedes producto Campo y también ingrese el nombre del producto que se añadirá.

Ahora, escoja el modelo que desea emplear (catálogo de productos, tabla de artículos, tabla de precios o producto individual) y lleve a cabo click en Crea un código corto.

Asimismo puede agregar manualmente un código corto de una página a cada mensaje o página. Para conseguir más información sobre esta extensión y de qué manera emplearla, consulte Pago de página única de WooCommerce documento.

Lanzamiento de envío gratis a WooCommerce

Como dueño de un negocio de comercio electrónico, puede alentar a los clientes del servicio a gastar más con distintas tácticas. Uno de ellos es el envío gratis.

Por supuesto, no quiere prestar envío gratuito en todos los pedidos. No obstante, agregarlo como recompensa por una cierta proporción de pedidos totales puede alentar a los usuarios a gastar mucho más.

Por lo tanto, es posible que quiera configurar la página de pago de WooCommerce a fin de que inicie automáticamente el envío gratuito para pedidos superiores a una alguna cantidad (por servirnos de un ejemplo, $ 100).

La primera cosa que debe hacer es proporcionar opciones de distribución gratis para las áreas de entrega adecuadas.

Para hacer esto, vaya a WooCommerce> Configuración> Envío:

Configuración de distribución de WooCommerce

Desplácese sobre el área de distribución que desea cambiar y lleve a cabo clic en modificar Adjunto. Si no ha agregado ninguna zona, seleccione Esta Botón Añadir área de distribución Siga las instrucciones primero antes de continuar.

Lleve a cabo clic en Siguiente Añadir un procedimiento de distribuciónEn modo abierto, elija Entrega gratis Desde el menú desplegable, luego Agregar un método de entrega nuevamente:

Añada envío gratis en WooCommerce

Siguiente de Procedimiento de distribución Pone el cursor sobre la lista para colocarla en la página. Distribución gratis Y lleve a cabo click en modificar Incorporado.

Una suerte de Opciones de envío gratis Se abre el panel Se requiere envío gratis .... Menú desplegable, seleccione Cantidad mínima de pedido:

Envío gratis en WooCommerce

Entonces puede establecer una cantidad mínima de pedido y cuando haya terminado, realice clic en guarda los cambios Solucionar.

Vincular artículos directamente a la página de pago de WooCommerce

Otra forma de prosperar la experiencia del cliente es crear un enlace de pago directo. Esto ayuda a los clientes del servicio a contrastar de forma directa desde las páginas de productos y ventas.

Cree de forma manual un link de pago directo

Para hacer y agregar un enlace de pago directo en WooCommerce, use la siguiente URL: dominioejemplo.com//checkout/?add-to-cart=ID.

Nota: Va a deber reemplazar "dominio de ejemplo" e "ID" con su nombre de dominio y también ID de producto adjuntos a su página de pago.

Ir a para hallar su clave de producto Artículos> Todos los productos En el panel de control de gestión. Vaya al producto al que desea crear un enlace directo y coloque el mouse sobre su nombre para poder ver el ID del producto:

Clave de producto de WooCommerce

Una vez que haya pegado la clave del producto en la URL previo, puede colocar un enlace a cualquier cibersitio de WooCommerce. Puede reiterar este proceso para cada producto, incluyendo los productos variables y organizados.

Utilice complementos para crear enlaces de pago directo

Comprendemos que la estrategia previo puede no ser el método más eficiente para todos los clientes. Esto puede conducir un buen tiempo en dependencia de la proporción de modelos que tenga en su tienda WooCommerce.

Por fortuna, si está buscando una manera mucho más rápida, asimismo puede utilizar el complemento Direct Checkout para WooCommerce:

Pago directo por el complemento WooCommerce

Con esta herramienta freemium, puede agilizar el proceso de pago de muchas formas, incluida la adición de un link directo desde la página del producto al pago. Tras instalar y activar el complemento, vaya a WooCommerce WooCommerce> Pago directo:

El complemento WooCommerce suspendió los pagos directos

debajo En general Tab, seleccione sí señor para Envío al carrito Opción y luego lleve a cabo clic en Cheque de Añadir al carro Reenviar Seleccionar del menú desplegable guarda los cambios Cuando estés listo.

Vaya al siguiente paso producto Etiqueta:

Oportunidad de redirigir al carrito mediante WooCommerce Direct Checkout

Encender Cuando haya añadido apropiadamente, vaya a la página del carro de compras Configuración, lleve a cabo clic de nuevo guarda los cambios Resolver. ¡Eso es todo!

Probando la página de pago de WooCommerce

En este punto, desea enseñar varias formas de mejorar su página de pago de WooCommerce. Ahora es importante cerciorarse de que el desarrollo de pago ande apropiadamente para eludir bloqueos y asegurar que los errores no interrumpan el viaje del cliente.

Por fortuna, existe una forma fácil de enviar pedidos y pagos de prueba por medio de la tienda WooCommerce para cerciorarse de que todo ande. Para llevar a cabo esto, primero debe disponer el complemento WooCommerce Payments en su portal web (si aún no lo ha hecho):

Extensión de pago de WooCommerce

En el momento en que haya instalado y habilitado el complemento, puede activar el "modo de prueba". Para llevar a cabo esto, vaya a WooCommerce > pago > hacer:

Modo de prueba de pago de WooCommerce

Asegúrese de almacenar sus cambios.

Tras encender el modo de prueba, puede navegar por la tienda WooCommerce y elegir cualquier producto. Agréguelo al carro y vaya a pagar.

Complete los campos del formulario en la página de pago según sea necesario. Puede emplear cualquier número de tarjeta de crédito virtual entregado por WooCommerce como su información de pago. Asimismo puede emplear tres dígitos como el código CVC y elegir cualquier fecha futura.

En el momento en que haya terminado, lleve a cabo click en pedir algoVaya al siguiente paso Pago> Transacción Monitor:

Prueba los eventos en WooCommerce

Aquí debería ver el indicio de carga. Si está allí, va a saber que su página de pago marcha correctamente. ¡Asegúrese de salir del modo de prueba cuando haya terminado!

Aprenda de qué forma puede diseñar, modificar y usar su página de pago de WooCommerce para optimizar las tasas de conversión y 💰 acrecentar sus ventasLleve a cabo click para twittear

Los mejores complementos y extensiones de pago de WooCommerce

En este artículo, presentamos múltiples formas de ajustar su página de pago de WooCommerce, incluidos bloques, accesos directos y códigos customizados. También comentamos algunas extensiones esenciales que le permiten agregar peculiaridades y funcionalidades que de otra forma no podría emplear.

Sin embargo, no comentamos algunos otros complementos, extensiones y complementos, pero brindan más opciones de personalización para su página de pago de WooCommerce. Algunos de los que mucho más merece la pena estimar son:

• Complemento de notificación de carro de compras WooCommerce. Con este complemento de WooCommerce, puede enseñar a sus clientes mensajes de trabajo y alertas al terminar la compra. Por ejemplo, puede utilizarlos para informarles sobre ventas y campañas relevantes.
• Administrador de fondos de WooCommerce. Exactamente el mismo equipo que desarrolló Direct Checkout para WooCommerce ha desarrollado una extensión que es una vigorosa extensión que se puede utilizar para mejorar la página de pago. Puede utilizarlo para editar, eliminar y agregar campos personalizados, así como para hacer campos condicionales.
• Complemento de pago de WooCommerce. Con esta extensión premium, puede añadir extensiones gratis y de pago a su pago. Esta es una herramienta útil para aumentar las tasas de conversión y las ventas.

Dependiendo de su lugar de comercio online, posiblemente esté buscando más opciones. En un caso así, le aconsejamos que consulte la biblioteca de complementos de WooCommerce, que tiene un sinnúmero de complementos para ampliar la ocupación y la utilidad de los complementos de WooCommerce, incluyendo las soluciones gratuitas y de pago.

Generalizar

Hay múltiples maneras de mejorar y optimizar su página de pago de WooCommerce.

Dependiendo de los cambios que realice y su experiencia, puede aprovechar los complementos y extensiones de WooCommerce, las plantillas y temas de página e incluso el código personalizado.

¿Preguntas sobre el uso o la edición de la página de pago de WooCommerce? ¡Cuéntanos en la sección de comentarios a continuación!