Como personalizar la página “Mi cuenta” de WooCommerce

WooCommerce se envió de fábrica con un diseño de página «Mi cuenta», que es un tablero donde los clientes inician sesión para ver todos sus detalles, como pedidos, direcciones, detalles de cuenta, etc., cuenta, etc. Sin embargo, después de cambiar el tema, es posible que la página Mi cuenta ya no esté visible o incluso no esté formateada, y eso ciertamente no se ve muy profesional, ¿verdad? como saben, woocommerce usa un sistema de plantillas, pero puede ser demasiado complicado para algunos, así que esta vez configuraremos la página de mi cuenta usando Elementor Pro (aunque hay una opción para hacer esto).

Está en la versión gratuita, pero cubriremos eso más adelante) para que obtengamos algo que se vea más profesional y no tenga que ser un gran problema, aunque terminarás teniendo que jugar un poco con el código, pero debería ser oscuro.

Soporte básico para las páginas requeridas de WooCommerce

WooCommerce necesita algunas páginas predefinidas con códigos cortos incrustados que se encargan de mostrar toda la funcionalidad necesaria; estas son las páginas Carrito de compras, Pago, Mi cuenta y Términos y condiciones; Los encontrarás en WooCommerce > Configuración > Avanzado:

Cada una de estas páginas contiene solo un código abreviado y estos son

Tu carrito está vacío.

Antes de proceder al pago, debe agregar algunos productos a su carrito de compras.
Encontrará muchos productos interesantes en nuestra página.

Volver a la tienda

,
y
; entonces no hay un código hash, ya que esta es la página normal que debe hacer y le recomiendo que lo haga, ya que debe usarse en su sitio web y también puede usarse en Woocommerce al finalizar la compra.

Cabe señalar que estas páginas se pueden crear automáticamente durante la configuración inicial de WooCommerce (a través del asistente), pero puede cambiarlas a cualquier página que desee. Esto es importante para nosotros y trabajaremos a partir de ahora.

Página estándar de WooCommerce «Mi cuenta»

Si abre la página Mi cuenta, Haga clic en la pestaña de documentos (1) y guarde el contenido de esta página (2, en este caso, la sección /cuenta es importante para nosotros), ya que la necesitaremos más adelante. Dice que el caracol es la última parte de la URL (generalmente) y si su sitio se llama mysite.com será mysite.com/my-account. Si cambia el caracol en la página Mi cuenta, tendrá que reemplazarlo donde haya usado el caracol anterior.

Para mejorar nuestra página personalizada «Mi cuenta»

A pesar de que la página Mi cuenta mejora, todavía hay algunas cosas que debemos mejorar en nuestro proyecto:

Persistencia en la Navegación: A diferencia de otras implementaciones, nuestros menús personalizados no tienen persistencia de selección, lo que significa que no sabes en cuál te encuentras, aunque es fácil de razonar intuitivamente. Sin embargo, esto podría mejorarse usando un menú personalizado para esta área, o cambiando la puntuación del código abreviado

que les dejo, o si es necesario, probablemente lo incluiría como una futura mejora del artículo.

Manejo del cierre de sesión: como habrás notado, el código abreviado de salida

incluye el cierre de sesión, que funciona bien. Es posible que haya notado que no puse cerrar sesión en nuestro menú porque la URL para cerrar sesión en la cuenta tiene una identificación especial para mayor seguridad y no se puede eliminar fácilmente de la cuenta. Nuevamente, no es difícil, pero hay formas de hacerlo y estoy preparando un artículo sobre este tema.

Cambiar salida de shortcode

Si desea realizar cambios en la salida que muestra el código abreviado

, debe reemplazar la plantilla para hacerlo. No se preocupe, es muy simple, solo siga estos pasos (necesita acceder a sus archivos a través de FTP o panel de control de alojamiento):

Las plantillas de WooCommerce se pueden reemplazar copiando la plantilla original de la carpeta de origen a la carpeta del tema actual; vaya a /wp-content/plugins/woocommerce/templates/myaccount y copie el archivo dashboard.php en la carpeta /wp-content/themes/<folder_of_your_active_theme>/woocommerce/myaccount, por supuesto, reemplace <folder_of_your_active_theme> con el nombre de la actividad directorio de temas dinámicos. Allí, edite el archivo como desee;

Por ejemplo, si desea eliminar el nombre del cliente y el enlace de cierre de sesión por los motivos mencionados anteriormente, abra el archivo, busque el siguiente bloque y elimínelo:
Guarde sus cambios, vuelva a cargar su página Mi cuenta personalizada y verá que ambos han desaparecido. Puede proporcionar soporte para el cierre de sesión a través de código, complementos o cualquier otro método.

Mi cuenta

Base para Helados

Máquinas para helados

Cafetera Electrica

Barquillo Marmoleado

Leche en Polvo