3 formas efectivas de personalizar y editar la página de pago de WooCommerce

¿Está buscando la mejor manera de editar la página de pago de WooCommerce ?

Aprender a personalizar la página de pago de WooCommerce le permite tener más control sobre su diseño y aumenta el potencial de más ventas.

‍ En este tutorial detallado, le mostraremos tres formas sin código de personalizar la página de pago, incluido el ajuste completo del diseño y/o el cambio de los campos que aparecen en la página de pago.

También repasaremos todas las funciones integradas que ofrece WooCommerce para personalizar la experiencia de pago.

Empecemos…

Razones para editar la página de pago de WooCommerce

¿Hay alguna razón evidente para modificar la página de pago de WooCommerce para empezar? Eso depende. El módulo de pago incorporado es limpio, funcional y lo suficientemente rápido como para procesar pagos sin molestar a sus clientes.

Pero también puede notar sus desventajas. Estas son las razones principales por las que podría querer editar la página de pago de WooCommerce :

• Para reemplazar los elementos de marca predeterminados de WooCommerce, como sus fuentes y estilos preestablecidos y el púrpura de WooCommerce.
• Para agregar elementos web que se relacionen con su negocio, como un logotipo, colores de marca y enlaces a documentación de apoyo.
• Si se requiere optimizar el proceso de pago para las conversiones después de la prueba.
• Para acelerar el proceso de compra convirtiéndolo en un solo paso.
• Incorporar upsells, cross-sells y productos relacionados.
• Para agregar campos personalizados o eliminar algunos campos proporcionados por WooCommerce.
• Para modificar las opciones de envío.
• Para cambiar elementos de diseño como el texto del botón, el texto del campo preestablecido y las opciones de pago de invitados.

Cómo editar la página de pago de WooCommerce

Tiene varias opciones disponibles para editar la página de pago de WooCommerce. El método que funcione mejor para usted dependerá de las ediciones específicas que intente realizar y de si está o no dispuesto a usar un complemento.

A continuación, repasaremos tres de los mejores métodos:

1. Configuración nativa de WooCommerce : WooCommerce incluye muchas opciones integradas para personalizar el pago, que detallaremos en el primer método. Su tema también puede ofrecer sus propias opciones para personalizar el diseño de la página de pago.
2. Elementor Pro : Elementor Pro ahora ofrece su propio widget de pago que le permite personalizar completamente el diseño de la página de pago. Esta es una excelente opción si desea editar específicamente el diseño de la página.
3. Editor de campos de pago : esta es una excelente opción si desea editar los campos del formulario que aparecen en la página de pago. Puede usarlo para agregar nuevos campos, eliminar campos predeterminados y reorganizar todo según sea necesario.

Vamos a repasarlos..

Método 1: use la configuración de pago predeterminada de WooCommerce

WooCommerce ofrece configuraciones integradas para editar su módulo de pago, y su tema de WordPress ya puede proporcionar herramientas para ajustar algunos campos y configuraciones de pago en el Personalizador de WordPress.

Siempre es aconsejable verificar esta configuración antes de buscar un complemento, tema o personalizador de campo adicional, ya que es posible que ya tenga las funciones que necesita.

Por ejemplo, WooCommerce tiene herramientas para eliminar ciertos campos, habilitar tasas de impuestos durante el pago y mostrar campos de cupones.

Paso 1: agregue cálculos de impuestos y un campo de cupón al finalizar la compra

WooCommerce tiene configuraciones integradas para automatizar los cálculos de impuestos y aceptar cupones al finalizar la compra.

Para activar o desactivar, vaya a WooCommerce > Configuración en WordPress.

Elija la pestaña General y desplácese hacia abajo hasta la sección Habilitar impuestos . Marque la casilla para Habilitar tasas y cálculos de impuestos durante el pago. Esto genera y muestra las tasas de impuestos en función de las tasas que configure en WooCommerce ( WooCommerce > Configuración > Impuestos > Tarifas estándar ).

Marque la casilla para Habilitar el uso de códigos de cupón para mostrar un campo donde los clientes pueden escribir códigos de descuento.

Si prefiere no mostrar ciertos elementos, simplemente elimine las casillas de verificación. Asegúrese de hacer clic en el botón Guardar para ver sus cambios en la interfaz.

Paso 2: Muestre el precio del producto con o sin impuestos

Una cosa es calcular los impuestos al final del proceso de pago, pero también debe decidir si desea incluir los impuestos en el costo total de los productos, especialmente cuando los clientes pasan por el proceso de pago.

En general, esto muestra más transparencia, en lugar de aumentar el precio con impuestos justo antes de que el cliente pague.

Para incluir impuestos con precios en el proceso de pago, vaya a WooCommerce > Configuración > Impuestos .

Desplácese hacia abajo en la página para encontrar el campo para "Mostrar precios durante el carrito y el pago".

Elija del menú desplegable:

• Incluyendo impuesto
• Sin impuestos

Haga clic en Guardar cambios .

Paso 3: establezca qué artículos de envío se muestran en el proceso de pago

Además, en WooCommerce > Configuración , puede marcar qué zona de envío, métodos y cálculos aparecen en el pago de WooCommerce.

Simplemente vaya a la pestaña Envío y ajuste:

• Cálculos: para habilitar la calculadora de envío en la página del carrito
• Cálculos: para ocultar los costos de envío en el proceso de pago hasta que se inserte una dirección
• Destino de envío: para establecer direcciones de envío predeterminadas al finalizar la compra

Haga clic en Guardar cambios .

Paso 4: Administre las cuentas y la privacidad en el proceso de pago

Mientras permanece en WooCommerce > Configuración , vaya a la pestaña Cuentas y privacidad .

En la parte superior de la página, verás dos campos:

• Pago de invitados: incluir/eliminar pagos de invitados e inicios de sesión de cuentas existentes
• Creación de cuenta: permita a los clientes crear una cuenta o iniciar una suscripción durante el pago

Continúe hacia abajo en la página Cuentas y privacidad para encontrar el área de Política de privacidad .

Rellene el cuadro de texto de la Política de privacidad de Checkout para asegurarse de que los clientes vean la política al finalizar la compra. Deje el campo en blanco si prefiere no mostrar una política de privacidad en esa área.

Paso 5: elija la página de pago real y otras configuraciones avanzadas

Navegue a la pestaña Avanzado para revelar una sección Configuración de página ; esto hace que los comerciantes le digan a WooCommerce adónde enviar a los clientes cuando paguen.

De forma predeterminada, WooCommerce genera las páginas Carrito , Pago , Mi cuenta y Términos y condiciones , que puede encontrar yendo a Páginas > Todas las páginas en WordPress.

Sin embargo, tiene la opción de generar una página completamente nueva y vincularla aquí. Eso anula las páginas de pago predeterminadas y envía a los clientes a las personalizadas.

Otra opción en la pestaña Avanzado es Forzar pago seguro , que requiere un certificado SSL.

Paso 6: cambie el diseño de pago de su tema en el Personalizador de WordPress

Los temas de WordPress con la funcionalidad de WooCommerce a menudo instalan herramientas de personalizador de WordPress para ajustar fácilmente el estilo de pago.

Tenga en cuenta que todos los temas de WooCommerce ofrecen configuraciones únicas del Personalizador de WordPress (algunos no tienen ninguna configuración), pero en general, vale la pena revisar el Personalizador de WordPress para un control rápido sobre el proceso de pago.

Para comenzar, ve a Apariencia > Personalizar en WordPress.

Si está disponible, su tema debería mostrar un botón de WooCommerce en algún lugar del Personalizador de WordPress. Haz clic en eso.

Este es solo un ejemplo con el tema Storefront (por lo que es posible que no vea lo mismo), pero es bastante común que los temas tengan una pestaña de Pago en el Personalizador. Elija eso, o algo similar, que pueda indicar control sobre el pago.

Recorra todas las configuraciones de pago que ofrece su tema. En el tema Storefront, puede hacer que estos campos sean opcionales, obligatorios u ocultos:

• Campo de nombre de la empresa
• Campo de la línea de dirección 2
• Campo de teléfono

También es posible resaltar los campos obligatorios con un asterisco.

Finalmente, el tema Storefront ofrece opciones para mostrar una página de Política de privacidad y Términos y condiciones al final del pago.

Método 2: use un generador de páginas para editar los campos de pago de WooCommerce y el estilo general

Los creadores de páginas como Elementor, Beaver Builder y Themify ofrecen widgets de contenido de WooCommerce para anular lo que está actualmente en la página de pago de WooCommerce.

Los creadores de páginas reservan casi exclusivamente sus módulos de pago de WooCommerce para sus planes Premium, por lo que es muy probable que tengas que pagar por esta funcionalidad. Por ejemplo, recibe el widget Elementor Checkout con el plan Pro.

Habiendo dicho eso, un creador de páginas le brinda un control casi completo sobre su página de pago, por lo que es una manera fácil de editar el pago de WooCommerce sin conocimientos de codificación, y solo por alrededor de $ 50 a $ 100 por año.

En este tutorial, le mostraremos cómo funciona generalmente la personalización del pago con un creador de páginas, usando Elementor.

Paso 1: abra la página de pago designada en Elementor

Para editar el pago de WooCommerce en Elementor, debe ir a la página de pago creada automáticamente por WooCommerce. Encuéntralo en Páginas > Todas las páginas .

Abra la página etiquetada como "Página de pago", luego haga clic en Editar con Elementor .

Paso 2: elimine el código abreviado de pago de WooCommerce

WooCommerce ha agregado automáticamente su "WooCommerce checkout” shortcode en el editor, que representa el módulo de pago predeterminado de WooCommerce.

El objetivo es cambiar eso por un módulo de pago de su creador de páginas. Por lo tanto, elimine el código abreviado de pago de WooCommerce.

Paso 3: coloca el widget Elementor Checkout

Ahora es el momento de encontrar el widget de pago de su creador de páginas. Elementor ofrece uno llamado Checkout , que puede encontrar usando la barra de búsqueda o navegando bajo el encabezado WooCommerce. Haga clic y arrastre el widget de Checkout a la página en blanco, donde dice "Arrastre el widget aquí".

Nota: Es posible que no vea el widget de Checkout si no ha actualizado a la versión Premium de Elementor. Este es el caso de la mayoría de los creadores de páginas.

Paso 4: personaliza el contenido, el estilo y las funciones avanzadas

Después de arrastrar el widget de pago, Elementor muestra la vista previa de pago. Luego puede hacer clic en estas pestañas a la izquierda para personalizar cada aspecto del pago:

Como ejemplo, puede cambiar el Diseño general a una columna y ajustar el texto del marcador de posición para el campo de nombre.

Otras pestañas de personalización incluyen:

• Detalles de facturación
• Información Adicional
• Su pedido
• Cupón
• Pago

También hay infinitas formas de editar el proceso de pago de WooCommerce en la pestaña Estilo .

Usa estas pestañas:

• Secciones
• Tipografía
• formularios
• Resumen del pedido
• Botón de compra

Como ejemplo, cambiamos el botón azul Comprar por uno verde.

Finalmente, la pestaña Avanzado ofrece herramientas aún más poderosas para editar:

• Diseños
• Efectos de movimiento
• Transformaciones
• Antecedentes
• Fronteras
• Máscaras
• Sensibilidad
• Atributos
• CSS personalizado

Siempre que se mantenga en la página configurada previamente como "Página de pago" para WooCommerce, y cambie el código abreviado de pago de WooCommerce por el widget de pago del generador de páginas, ¡puede guardar los cambios y completar el proceso!

Método 3: Instale un complemento de personalización para editar campos

Existen muchos complementos de personalización de pago de WooCommerce, como:

La mayoría de los complementos de pago de WooCommerce brindan herramientas de personalización adicionales para modificar y agregar campos, pero hay algunos para renovar completamente el diseño, como el complemento de pago de varios pasos.

Le sugerimos que consulte todos los complementos recomendados anteriormente, pero realizaremos un tutorial rápido con el complemento Editor de campo de pago para ayudarlo a comprender cómo editar el pago de WooCommerce con un complemento.

Paso 1: instale y active el complemento Editor de campos de pago

Instale el complemento Checkout Field Editor, luego siga el proceso de activación del complemento.

Una vez activo, el complemento agrega una nueva pestaña en WordPress, a la que puede acceder yendo a WooCommerce> Formulario de pago .

Paso 2: Edite los campos actuales

El complemento muestra todos los campos actuales dentro de su pago de WooCommerce, excepto que el complemento ahora se vincula al pago predeterminado de WooCommerce, por lo que tiene control total sobre los campos.

Puedes editar:

• Campos de facturación
• Campos de envío
• Campos Adicionales

Para editar los campos de pago de WooCommerce, haga clic en Editar junto al campo que desea cambiar. Para este ejemplo, modificaremos el campo Nombre de la empresa .

En la ventana Editar campo , puede modificar opciones para el campo, como:

• Etiqueta
• Marcador de posición
• Valor por defecto
• Clase
• Validación

También es posible desmarcar la casilla Obligatorio , para que los clientes no estén obligados a completar el campo. También puede deshabilitar el campo para que no se muestre en el proceso de pago. Asegúrese de hacer clic en Guardar y cerrar .

El complemento generalmente guarda todo después de eso, pero puede hacer clic en el botón Guardar cambios nuevamente para asegurarse de que funcione.

Como puede ver, eliminamos el campo Nombre de la empresa del área de pago.

Y se ha ido de la comprobación de frontend.

También es posible que desee editar algo como el texto del marcador de posición. En ese caso, es el mismo proceso de abrir el campo en cuestión y cambiar la configuración.

El campo Nombre en nuestro pago ahora revela un nuevo texto de marcador de posición.

Paso 3: agregue un nuevo campo al pago de WooCommerce

Para agregar un campo completamente nuevo, haga clic en el botón Agregar campo .

Elija el Tipo de campo, eligiendo entre opciones como:

• Texto
• Número
• Oculto
• Clave
• Teléfono
• Caja
• Mes
• URL
• y muchos más

Como ejemplo, crearemos un campo de Número y pediremos a los clientes que escriban su Número de Recompensas por Lealtad. También puede designar elementos como marcadores de posición, valores predeterminados y si es un campo obligatorio.

Asegúrese de marcar la casilla Habilitado , luego haga clic en Guardar y cerrar .

Paso 4: Ver los resultados

En el backend, verá el nuevo campo de pago en la parte inferior de la lista. Se coloca al final de forma predeterminada, pero puede hacer clic y arrastrar para reordenar.

Y el nuevo campo también aparece en el módulo de pago de la interfaz.

Cree la página de pago perfecta hoy

Recomendamos comenzar con la configuración de pago predeterminada de WooCommerce para ver si ayudan a lograr los resultados deseados. Para ediciones más avanzadas, considere usar campos personalizados. Y para personalizaciones avanzadas, pero relativamente fáciles de implementar, use uno de los creadores de páginas sugeridos.

¿Cuáles son sus principales preguntas sobre cómo editar el proceso de pago de WooCommerce? ¡Comparte tu opinión en los comentarios!