Cómo agregar un campo de carga personalizado en WooCommerce

¿Desea incluir un campo de carga en su página de pago? Has venido al lugar correcto. En este artículo, le mostraremos cómo agregar un campo de carga personalizado en WooCommerce paso a paso.

Con más de 5 millones de descargas activas, WooCommerce es la plataforma de comercio electrónico más popular del mundo. Cuando se trata de crear una tienda en línea, es la mejor opción para muchos propietarios de tiendas y por una buena razón. WooCommerce hace que toda la experiencia en línea sea fluida y sencilla tanto para los clientes como para los propietarios de las tiendas.

Además de ser fácil de configurar y usar, WooCommerce también viene con toneladas de funciones que le brindan mucha flexibilidad. Ya sea mediante el uso de complementos o con un poco de codificación, puede agregar cualquier funcionalidad que necesite para mejorar la experiencia de compra y aumentar sus ventas.

No es ningún secreto que para lograrlo, su pago debe estar optimizado y libre de distracciones. Una forma de mejorar la experiencia del usuario es agregar un campo de carga personalizado a su tienda WooCommerce . De esta manera, puedes permitir que tus clientes carguen archivos durante el proceso de compra y confirmen el pedido de inmediato en lugar de tener que mantener la compra pendiente hasta que te envíen documentación adicional por correo electrónico.

Antes de entrar en detalles, entendamos mejor por qué es una buena idea agregar un campo de carga personalizado a su tienda.

¿Por qué agregar un campo de carga personalizado en WooCommerce?

Hay varias situaciones en las que los compradores pueden necesitar cargar documentos al comprar un producto en línea.

Algunos hoteles pueden pedir a sus clientes que adjunten algún tipo de identificación -normalmente DNI o pasaporte- cuando reservan online. En muchos países, los hoteles deben proporcionar información sobre sus huéspedes a la policía o a las autoridades locales todos los días, por lo que es posible que le soliciten una identificación antes de su llegada para acelerar el proceso de registro.

Del mismo modo, algunos sitios que venden boletos de avión o tren en línea requieren que los pasajeros carguen su identificación o pasaporte durante el proceso de reserva. Si necesitas cambiar tu billete, pedir un reembolso , o reclamar algún tipo de compensación por un retraso, la compañía puede pedirte que subas ciertos documentos como el pasaporte o DNI, el billete que compraste, etc.

Además, las tiendas mayoristas en línea tienen clientes que compran productos al por mayor y gastan miles de dólares en una sola transacción. En estos casos, como medida de seguridad, pueden exigir a los usuarios que carguen alguna prueba de identidad.

Además de eso, una tienda de ropa que ofrece la opción de comprar camisetas personalizadas puede pedir a los clientes que envíen sus propios diseños para imprimirlos. Para eso, deben permitir que los usuarios carguen archivos para que puedan cargar sus diseños.

Finalmente, tener la opción de subir archivos es muy útil para tiendas que venden servicios que requieren una certificación previa como buceo, parapente, etc.

Incluso si no es obligatorio en todos los casos, agregar un campo de carga personalizado a su página de pago puede hacer que el proceso sea sencillo y mucho más conveniente para ambas partes .

Ahora que entendemos mejor cuándo debe agregar un campo de carga personalizado a su tienda WooCommerce, veamos cómo hacerlo.

Cómo agregar un campo de carga personalizado en WooCommerce

La forma más fácil de agregar un campo de carga personalizado en WooCommerce es usar un complemento. Para esta demostración, utilizaremos Checkout Manager para WooCommerce, una herramienta gratuita con más de 90 000 instalaciones activas.

Este complemento tiene muchas funciones para ayudarlo a personalizar su pago e incluye la opción de agregar un campo personalizado. Para saber más sobre todas las funcionalidades que ofrece esta herramienta, consulte la página del producto.

Paso 1: Instalar Checkout Manager para WooCommerce

Primero, necesita instalar el complemento. En su Panel de administración de WordPress, vaya a Complementos > Agregar nuevo.

Luego, busque el complemento Checkout Manager para WooCommerce de QuadLayers y haga clic en el botón " Instalar ahora ". Una vez que el complemento esté instalado, presione " Activar ".

Ahora es el momento de configurar el complemento. Comencemos agregando un nuevo campo de carga personalizado a la página de pago de WooCommerce.

Antes de eso, veamos cómo se ve la página de pago. Como puede ver, no hay campos que permitan a los clientes cargar archivos.

Veamos cómo configurar Checkout Manager para permitir que los compradores agreguen archivos durante el pago.

Paso 2: agregue un campo de carga personalizado en la página de pago de WooCommerce

En su panel de WordPress , vaya a WooCommerce > Pago. Allí encontrará todas las configuraciones para Checkout Manager.

Vaya a la pestaña Pago y diríjase a la sección Adicional para abrir la configuración de campos adicionales.

NOTA : En este ejemplo, agregaremos el campo en la sección Adicional, pero puede agregarlo a Facturación, Envío o cualquier sección del pago que desee simplemente yendo al área correspondiente en la pestaña Pago.

En la esquina derecha, verá un menú desplegable que le permite seleccionar la posición en la que desea mostrar estos campos adicionales. Haga clic en el botón " Agregar nuevo campo " para comenzar a crear un nuevo campo adicional.

Configurar el campo Carga personalizada

Después de eso, irá a una nueva página con un menú de configuración. Aquí puede especificar los parámetros para el campo que desea agregar. Dado que queremos agregar un campo de carga personalizado, seleccione Archivo en Tipo y configure la etiqueta personalizada y el texto del botón. Luego, presione “ Guardar ”.

Después de haber creado algunos campos adicionales, puede administrar los diferentes parámetros desde el menú de configuración de campos adicionales. Estos parámetros incluyen:

• Reposicionar: utilice las flechas hacia arriba y hacia abajo para mover un campo hacia arriba o hacia abajo. Alternativamente, puede hacer clic y arrastrar el icono de tres líneas horizontales para cambiar la posición de un campo.
• Requerido: Habilitar el campo requerido hace que el campo sea obligatorio. Esto significa que el usuario no puede continuar hasta que complete ese campo.
• Posición: Puede seleccionar la posición en la que desea mostrar el campo. Hay tres opciones para elegir: izquierda, derecha o ancha.
• Borrar: Habilitar esto no permite que ningún otro campo aparezca a la izquierda o a la derecha de este campo en particular.
• Deshabilitar: al marcar el botón de deshabilitar, ese campo específico no se mostrará en la página de pago.
• Editar y eliminar: como sugiere el nombre, puede editar o eliminar un campo en particular haciendo clic en el botón correspondiente.

Una vez que haya configurado todos los ajustes, guarde los cambios.

Ahora echemos un vistazo a nuestro sitio desde el frente para ver los cambios. Como puede ver, ahora hay un botón para cargar archivos. De los 2 campos personalizados que creamos, solo el Campo de prueba está activado y no es obligatorio, por lo que aparece como opcional en la página de pago.

¡Eso es! Así de simple es agregar un campo de carga personalizado en WooCommerce. Con este botón, los clientes pueden cargar cualquier archivo o incluso cargar varios archivos durante el proceso de pago. Los archivos cargados se guardarán en la página de pedidos junto con otros detalles del pedido. Además, podrá administrar todos los archivos que los usuarios carguen a través del panel de administración de pedidos.

Pero eso no es todo lo que puede hacer con Checkout Manager. Tener un checkout optimizado es clave para aumentar las tasas de conversión, por lo que solo debes mostrar los campos que el cliente debe completar para completar el pedido. Veamos cómo puede agregar campos condicionales que solo aparecen cuando se cumple una determinada condición.

Bonificación: agregue un campo condicional en WooCommerce

Un campo condicional tiene dos partes: un campo principal y un campo secundario. El campo secundario depende de la entrada del campo principal. Esto significa que no está visible de forma predeterminada, pero aparece cuando el campo principal toma un valor específico.

Por ejemplo, si desea agregar un campo de carga personalizado a su tienda WooCommerce que solo será necesario en circunstancias específicas, la mejor solución es crear un campo condicional para que el campo solo aparezca cuando sea necesario.

Haremos esto en dos pasos. Primero, le preguntaremos al usuario si quiere subir un archivo o no. Si dicen “Sí”, y solo entonces, el campo de carga de archivos se hará visible. En este ejemplo, nuestra primera pregunta será el campo principal y el botón de carga de archivos será el campo secundario.

Ahora que sabemos qué es un campo condicional, veamos cómo agregarlo a WooCommerce usando el complemento Checkout Manager.

Crear un campo condicional con Checkout Manager

Primero, agreguemos el campo principal. Siguiendo el mismo ejemplo, lo agregaremos a la sección Adicional, pero puede agregarlo en la sección Facturación, Envío o cualquier sección del proceso de pago que desee.

Vaya a WooCommerce > Pago, diríjase a la pestaña Pago y abra la sección Adicional . Presione el botón " Agregar nuevo campo " y configure los parámetros para el campo principal. Usando el ejemplo anterior, elegiremos Seleccionar como el "Tipo" y agregaremos una etiqueta personalizada y un texto de marcador de posición.

Luego vaya a la pestaña Opciones en el lado izquierdo y configure todas las opciones posibles que el usuario puede seleccionar. En este ejemplo, estamos haciendo una pregunta al usuario que solo puede tener dos respuestas: "Sí" o "No". Como la respuesta a esta pregunta no agrega ningún cargo adicional (como entrega rápida o envío internacional, por ejemplo), establecemos el precio en 0. Una vez que haya configurado todos los parámetros, guarde los cambios.

Crear el campo hijo

A continuación, debe crear el campo secundario, el campo de carga personalizado, y configurar los parámetros condicionales.

Para ello, cree un campo, establezca el tipo, la etiqueta y el marcador de posición del botón. Luego vaya a la sección derecha y marque la casilla " Activar requisito de campo condicional ". Después de eso, elija el campo que acaba de crear en el paso anterior como campo principal y seleccione el valor del campo principal para el cual se debe activar el campo secundario. En este caso, solo queremos mostrar el archivo cargado cuando el usuario responde "Sí" a la primera pregunta.

Una vez que haya terminado, recuerde guardar los cambios.

¡Eso es! Ahora ha configurado con éxito un campo condicional en su página de pago de WooCommerce.

Ahora vaya a su página de pago y verifique que el campo condicional funcione correctamente. Inicialmente, solo se mostrará el campo principal, pero si selecciona "Sí", aparecerá el botón para cargar archivos.

Para obtener más información sobre cómo agregar campos condicionales a WooCommerce, consulte nuestra guía completa.

Conclusión

En general, agregar un campo de carga personalizado en el pago de WooCommerce puede ser útil, ya que permite a sus clientes cargar los archivos necesarios durante el proceso de pago.

Puede haber varias situaciones en las que los usuarios necesiten cargar archivos o imágenes. Por ejemplo, verificación de identidad para reservas de hotel en línea, al comprar boletos de avión, diseño personalizado para ropa, cambio o reembolso de artículos, o servicios que requieren cierta certificación. Es por eso que permitir que sus compradores carguen archivos en el proceso de pago hace que todo el proceso sea más simple y conveniente.

En este artículo, hemos discutido:

• Beneficios de agregar un campo de carga personalizado
• Instrucciones paso a paso sobre cómo agregar un campo de carga personalizado en WooCommerce con Checkout Manager
• Qué son los campos condicionales y cómo funcionan
• Cómo puede agregar un campo condicional en WooCommerce para optimizar el pago

¿Ha agregado un campo de carga personalizado a su tienda? ¿Conoces algún otro método que debamos incluir? ¡Háganos saber en los comentarios a continuación!