Cómo autocompletar la dirección en WordPress

¿Quieres completar automáticamente las direcciones en tu sitio? Has venido al lugar correcto. En esta guía, le mostraremos cómo completar automáticamente una dirección en WordPress (no se requiere codificación).

Hoy en día, la mayoría de las tiendas de comercio electrónico solicitan a los clientes que completen un formulario que incluye su dirección cuando compran algo. Puede dejar que los usuarios ingresen sus direcciones manualmente o ayudarlos con una herramienta de autocompletar. Al completar automáticamente la dirección, los usuarios pueden seleccionar una ubicación sugerida entre algunas direcciones que aparecerán en tiempo real a medida que escriben.

El uso de autocompletar para los campos de dirección es muy común en las tiendas de comercio electrónico, especialmente en la sección de dirección de facturación y envío, en la página de pago o en la página Mi cuenta.

¿Por qué autocompletar la dirección en WordPress?

El autocompletado de direcciones en WordPress puede ayudarte a mejorar la experiencia del usuario en tu sitio web . Los clientes no solo podrán ingresar sus direcciones más rápido, sino que también evitará errores y errores tipográficos.

A medida que los compradores ingresan su dirección, las posibles direcciones aparecerán en su pantalla para que solo tengan que seleccionar la correcta. Esto te ayudará a reducir los errores porque las opciones que se muestran al usuario están integradas con Google Places y la API de Google Maps.

Esta es una de las funcionalidades más convenientes que puede proporcionar a sus usuarios. Al mejorar la experiencia del usuario en su sitio, es más probable que aumente sus ventas y convierta a ese comprador ocasional en un cliente recurrente.

Ahora que comprendemos mejor los beneficios de agregar una función de dirección de autocompletar en WordPress, veamos cómo agregarla a su sitio.

Cómo autocompletar la dirección en WordPress

El método más fácil y efectivo para agregar una dirección de autocompletar en WordPress es usar un complemento. Para este tutorial, usaremos Autocompletar dirección de Google . Tiene una interfaz fácil de usar y es extremadamente fácil de usar.

Para usar este complemento, solo necesita una clave API de Google Places y la ID del formulario del campo de dirección. Luego, hay una serie de pasos simples que debe seguir para agregar una dirección de autocompletar a un sitio web de WordPress. Los pasos son los siguientes:

1. Instalar y activar el complemento

Para instalar y activar el complemento Autocompletar dirección de Google, en su administrador de WordPress, vaya a Complementos > Agregar nuevo . Luego, busque el complemento en la barra de búsqueda. Después de eso, haga clic en Instalar ahora y luego actívelo.

2. Ingrese la clave API de Google Place

Una vez que active el complemento, vaya a la pestaña Autocompletar en su tablero. Necesitará la clave API de Google Place para su sitio web.

Veamos cómo hacer eso.

2.1. Cómo acceder a la clave API de Google Places

Para acceder a la clave API, inicie sesión en su cuenta de Google y vaya a Google Developer Console . Luego, presione Seleccionar un proyecto y cree un Nuevo Proyecto .

Deberá ingresar el nombre del proyecto y hacer clic en Crear . Luego, será redirigido a su nuevo proyecto.

El siguiente paso es habilitar las API. Para esto, vaya a la sección Biblioteca en el tablero.

Aquí, debe buscar la API de Google Places. Por lo general, es una de las primeras opciones que ve en esta pantalla, pero si no puede encontrarla, use la barra de búsqueda para buscarla.

Ahora, se encontrará en la página de descripción general de la API de Places. Haga clic en Habilitar para autorizar la API.

Ahora, regrese a su tablero, vaya a la pestaña Credenciales y presione Crear Credenciales . Verá un menú desplegable donde debe seleccionar la opción de clave API .

¡Eso es! Ha creado correctamente su clave API. Simplemente cópielo y péguelo en la pestaña Autocompletar en su tablero de WordPress.

Para asegurarse de que la función de autocompletar direcciones funcione correctamente en WordPress, debe habilitar la API de JavaScript de Google Maps . Veamos cómo hacer eso.

2.2. Habilitar la API de JavaScript de Google Maps

Para habilitar la API de JavaScript de Google Maps, primero, vaya a la pestaña Biblioteca desde el panel de control de Google Developer Console . Luego, ubique la API de JavaScript de Google Maps , selecciónela y habilítela .

¡Eso es! Ahora estamos listos para pasar al siguiente paso y agregar la ID del formulario.

3. Ingrese la ID del formulario

Una vez que haya ingresado la clave API de Google Place, también necesitará el ID de formulario del campo de dirección donde desea agregar la función de autocompletar dirección. En su tablero de WordPress, vaya a Autocompletar . Justo debajo del campo de la clave API, encontrará otro campo para ingresar la ID del formulario .

Para encontrar el ID del formulario, simplemente siga estos pasos.

3.1. Cómo encontrar la identificación del formulario

Para encontrar el ID del formulario para agregar la función de autocompletar dirección, vaya a la página donde se encuentra el campo. Luego, haga clic derecho en el campo de dirección y seleccione la opción Inspeccionar . Alternativamente, puede hacer clic en el área de texto del campo y usar el atajo de teclado Ctrl+Shift+i.

Ahora, en la pestaña Elementos , verá la herramienta para desarrolladores donde puede inspeccionar y ver todos los elementos de la página web. Si no está familiarizado con los códigos y la programación, no necesita preocuparse. Se resaltarán los códigos para el campo. En nuestro caso, el ID del formulario es address-form-1 , como puede ver a continuación.

Como puede ver, dice id = "dirección-formulario-1", pero la ID del formulario real es solo dirección-formulario-1.

Simplemente encuentre su ID de formulario y cópielo en el campo de ID de formulario en su panel de administración de WordPress.

Ahora, ingrese la identificación del formulario en la pestaña Autocompletar de su tablero y guarde los cambios, vaya a la página con el campo de dirección.

Finalmente, pega el ID del formulario en el campo correspondiente y guarda los cambios . Si desea autocompletar más de un campo de dirección, agregue cada ID de formulario y sepárelos con una coma.

¡Eso es! Acaba de agregar una función de dirección de autocompletar en WordPress. A partir de ahora, cuando los usuarios comiencen a escribir una dirección, aparecerá un menú desplegable con todas las sugerencias para la ubicación. Todo lo que necesitan hacer es seleccionar su ubicación y la dirección completa se ingresará automáticamente.

Autocompletar direcciones es solo el primer paso. Si desea dar un paso más y mejorar aún más la experiencia de sus clientes, también puede autocompletar pedidos en su tienda. Veamos cómo hacerlo.

Bonificación: cómo autocompletar pedidos

Agregar una función de autocompletar pedidos es otra excelente manera de mejorar la experiencia del cliente en su sitio. Al completar automáticamente los pedidos, puede procesar y confirmar los pedidos al instante para que los compradores no tengan que esperar para obtener una confirmación de su transacción que puede demorar horas. Además de eso, como los usuarios pueden acceder a los productos o servicios que compran al instante, no tienes que verificar manualmente sus pedidos. Esto funciona muy bien para productos virtuales y descargables.

La forma más fácil y rápida de autocompletar pedidos en su sitio es mediante un complemento. Existen varias herramientas, pero para esta demostración, usaremos Autocompletar pedidos de WooCommerce. Esta herramienta gratuita es uno de los mejores complementos que existen y se integra a la perfección con WooCommerce y pasarelas de pago como PayPal para autocompletar pedidos y confirmar compras en poco tiempo.

Avancemos y veamos cómo usar este complemento. Antes de comenzar, asegúrese de haber configurado correctamente WooCommerce en su sitio web.

1. Instalar y configurar WooCommerce Autocompletar pedidos

Para instalar el complemento, en su panel de control de WordPress, vaya a Complementos > Agregar nuevo y busque Autocompletar pedidos de WooCommerce . Luego, haga clic en Instalar ahora y actívelo.

Después de eso, ve a WooCommerce > Configuración y abre la pestaña Autocompletar pedidos . Luego, seleccione Pedidos pagados de productos virtuales solo en Modo y guarde los cambios.

2. Acceda a la clave de identidad de transferencia de datos de PayPal

Ahora, deberá obtener la clave de identidad de transferencia de datos de PayPal. Para esto, inicie sesión en su PayPal y vaya a la configuración. En la pestaña Herramientas del vendedor , haga clic en el botón Actualizar para las preferencias del sitio web .

Se le redirigirá a las opciones de preferencia del sitio web donde tendrá que buscar la sección Retorno automático y seleccionar el botón de opción Activado para habilitar el retorno automático. Luego, ingrese su URL de retorno y guárdela.

Después de eso, desplácese hacia abajo hasta la sección Transferencia de datos de pago y seleccione el botón de opción Activado para habilitarlo. Se mostrará su token de identidad para la transferencia de datos de pago. Necesitará esta clave de identidad, así que cópiela y colóquela en algún lugar a mano.

3. Ingrese la clave de identidad de PayPal en WooCommerce

Para ingresar la clave de identidad de PayPal en WooCommerce, vaya a WooCommerce > Configuración y abra la pestaña Pago . Luego, presione el botón Administrar para PayPal.

Aquí, busque la opción de clave de identidad de PayPal e ingrese la clave de identidad de transferencia de datos de PayPal que acaba de copiar en el área de texto. Finalmente, configure otros detalles para su cuenta de PayPal y guarde los cambios.

Así es como puede agregar una función de autocompletar pedidos para WooCommerce. Para obtener más detalles sobre cómo configurarlo, le recomendamos que eche un vistazo a esta guía paso a paso. Además, puede echar un vistazo a la documentación de Autocompletar pedidos de WooCommerce que tiene mucha información útil.

Conclusión

En resumen, las direcciones de autocompletado son una excelente manera de mejorar la experiencia del usuario en su sitio. Permite a los compradores ahorrar tiempo al escribir sus direcciones y lo ayuda a evitar errores y errores tipográficos.

En esta guía, hemos visto cómo incluir una función de dirección de autocompletar en su sitio de WordPress sin ningún tipo de codificación. Hemos visto cómo:

• Active y configure el complemento Autocompletar dirección de Google
• Obtener la clave API de Google Place
• Encuentre los ID de formulario de los campos de dirección para agregar autocompletar

Además, hemos visto cómo autocompletar pedidos usando el complemento Autocompletar pedidos de WooCommerce . Esto lo ayudará a confirmar pedidos al instante y aumentar sus ventas.

Si este artículo le resultó útil, aquí hay algunas otras guías para aprovechar al máximo su sitio:

• Cómo editar los campos de pago de WooCommerce
• Cómo integrar Google Maps en WordPress
• Optimización de pago: la guía completa

¿Ha comenzado a autocompletar direcciones en su sitio de WordPress? ¿Qué método usaste? ¡Háganos saber en la sección de comentarios!