Cómo personalizar la página «Mi cuenta» de WooCommerce

Si una de las prioridades de cualquier ecommerce debe ser la personalización para el cliente de la tienda, una de las páginas fundamentales es la de «Mi cuenta«, donde tendrá sus pedidos, datos, etc.

Así que es fundamental que esta página sea un espacio único, personalizado, donde encuentre toda la información fácilmente.

La página «Mi cuenta» por defecto

La página que WooCommerce crea por defecto para la cuenta de cliente contiene enlaces a las principales secciones, o variables, de su cuenta:

  • Escritorio
  • Pedidos
  • Descargas
  • Datos de la cuenta
  • Direcciones
  • Métodos de pago

Y ya, lo único que identifica esta página es que los pedidos sean los del cliente, poco más, así que es muy susceptible de modificar y, sobre todo, mejorar.

Cómo personalizar la página «Mi cuenta» sin códigos ni plugins

Un modo básico pero interesante con el que puedes personalizar esta página es simplemente abriéndola para editarla y añadirle, antes o después del shortcode que muestra las variables, lo que quieras.

Puedes añadir banners, shortcodes para mostrar productos destacados o rebajados, incluso saludos personalizados.

En este ejemplo he metido:

  • Un saludo personalizado antes del shortcode que mostrará las variables.
  • Un texto personalizado de ayuda
  • Un shortcode de WooCommerce al final que muestre los últimos 4 productos rebajados

Y lo que obtienes es esto:

Como ves, es un modo genial y sencillo de personalizar la página «Mi cuenta«, sin necesidad de saber de código ni instalar ningún plugin adicional.

Cómo personalizar la página «Mi cuenta» programando

Si quieres llegar a más personalizaciones y sabes programar haz lo siguiente:

  1. Accede por FTP o el panel de archivos de tu hosting y copia el archivo my-account.php de la carpeta wp-contents/plugins/woocommerce/templates/myaccount a tu ordenador.
  2. Edita el contenido de tu copia de my-account.php incluyendo los códigos y estilos que quieras añadir o modificar.
  3. Por FTP o el panel de archivos del hosting crea en la ruta wp-content/themes/carpeta-de-mi-tema/ una carpeta llamada woocommerce, y dentro de ella otra carpeta llamada my-account. Quedará tal que wp-content/themes/carpeta-de-mi-tema/woocommerce/my-account/. Por supuesto cambia lo de carpeta-de-mi-tema por el nombre de la susodicha.
  4. Sube por FTP o el panel de archivos del hosting el archivo my-account.php a la recién creada carpeta wp-content/themes/carpeta-de-mi-tema/woocommerce/my-account/.
  5. Comprueba los cambios en la página de «Mi cuenta».

En la nueva página puedes añadir o modificar lo que quieras.

Por supuesto, para crear una página personalizada es prácticamente imprescindible que conozcas de manera profunda cómo programar en WordPress y las funciones y API de WooCommerce con las que personalizar esta página.

Cómo personalizar la página «Mi cuenta» con funciones

También puedes personalizar la página de «Mi cuenta» programando funciones que, sin necesidad de crear una nueva plantilla, modifiquen la página a tu gusto.

En este ejemplo vamos a ver cómo añadir una nueva variable a la página de «Mi cuenta«, con su propio enlace y contenido.

Solo tienes que añadir tus funciones a tu plugin de personalizaciones o al archivo functions.php del tema activo.

Primero añadimos el enlace en el menú:

/**
 * Elemento nuevo en menú de página Mi cuenta
 *
 * @param arr $items
 * @return arr
 */
function ayudawp_account_menu_items( $items ) {

    $items['informacion'] = __( 'Información', 'ayudawp' );

    return $items;

}

add_filter( 'woocommerce_account_menu_items', 'ayudawp_account_menu_items', 10, 1 );

Luego creamos la variable:

/**
 * Añadimos la variable nueva
 */
function ayudawp_add_my_account_endpoint() {

    add_rewrite_endpoint( 'informacion', EP_PAGES );

}

add_action( 'init', 'ayudawp_add_my_account_endpoint' );

Luego solo te queda añadir contenido a tu nueva variable, así:

/**
 * Contenido de la variable
 */
function ayudawp_information_endpoint_content() {
    echo 'Contenido personalizado de la nueva variable';
}

add_action( 'woocommerce_account_information_endpoint', 'ayudawp_information_endpoint_content' );

Esto es solo un ejemplo, pero puede servirte de punto de partida para otras personalizaciones.

Cómo personalizar la página «Mi cuenta» con un plugin

Y, claro, si prefieres personalizar la página «Mi cuenta» con la ayuda de un plugin te recomiendo Yith WooCommerce Custom My Account Page, una joya, y muy fácil de utilizar y configurar.

Sus características permiten:

  • Cambiar los estilos de la página a barra lateral o pestañas.
  • Poner la barra lateral de variables a derecha o izquierda.
  • Personalizar todos los colores de las variables, en pestaña o barra lateral.
  • Permitir al usuario subir su propio avatar o mostrar el gravatar de su cuenta de cliente.
  • Añadir variables.
  • Añadir grupos de variables, plegados o desplegados.
  • Personalizar el contenido de las variables por defecto y personalizadas.
  • Personalizar los iconos de las variables por defecto y las personalizadas.
  • Configurar qué perfil de usuario podrá ver qué variables, ya sean las variables por defecto o las personalizadas.

Cambiando estilos

Una vez instalado y activo solo tienes que pasarte por su página de ajustes para empezar dando tu estilo a la página.

Lo primero es elegir si quieres ver la página en modo barra lateral, a la izquierda o a la derecha:

Estilo barra lateral derecha

 

Estilo barra lateral izquierda

 

Como ves, aquí ya se aprecian cambios aún sin personalizar nada más, pues tienes el avatar del usuario y un cómodo botón para salir. Además de poder poner las variables a la derecha si te gusta más.

Pero personalmente me parece mucho más interesante el diseño de pestañas:

Estas primeras decisiones las tomas en los ajustes generales del plugin:

Avatares personalizados

Y, si te has fijado en la captura anterior, si tienes activa la casilla de avatares personalizados, el usuario podrá subir haciendo clic en su avatar actual, un avatar personalizado distinto.

Colores personalizados

A partir de aquí, sin salir de esta página de ajustes, podemos personalizar los estilos de la página:

Consiguiendo páginas de cuenta adaptadas a los estilos corporativos de la web o personalizados:

Personalizando variables

En la siguiente pantalla de ajustes es donde están las variables, que puedes modificar para cambiarles el nombre o el icono por defecto a lo que prefieras. Puedes también especificar qué perfiles de usuario verá cada variable.

Añadiendo variables y grupos de variables personalizados

Pero para ir más allá puedes también añadir tus propias variables e incluso grupos de variables personalizados, en los que incluir variables a su vez, ya sean personalizadas o por defecto.

Para ello simplemente elige el botón para Añadir grupo o Añadir variable y ponle nombre. A partir de ahí los gestionas como cualquier otra variable.

Y todo aparecerá en tu página «Mi cuenta» totalmente personalizada

Unificando todo

Y para terminar, lo mejor de todo, podemos seguir aplicando personalizaciones como las que vimos al principio, editando la página de «Mi cuenta» a nuestro gusto añadiendo enlaces o lo que sea, conjuntamente con las personalizaciones del plugin Yith WooCommerce Custom My Account Page.

De este modo tendremos lo mejor de, al menos, 2 de los 4 métodos para personaliza la página «Mi cuenta» de WooCommerce.


¿Y a ti? ¿qué método te ha gustado más para personalizar la página «Mi cuenta» de WooCommerce?

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(13 votos, promedio: 4.7)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

13 comentarios en “Cómo personalizar la página «Mi cuenta» de WooCommerce”

  1. Hola! Gracias por tu artículo.
    He intentado descargarme Yith WooCommerce Custom My Account Page pero no aparece… sabes si ya no existe o si existe otro parecido?
    Gracias!

  2. Hola!!! Quería saber como modificar la página de productos, poner que salga una descripción corta del articulo debajo de cada uno. Se podría??

  3. Hola, gracias por el blog…. tendría una duda, como puedo hacer que debajo del nombre, precio y categorias salga una breve descripción del producto?

  4. Muy útil! Mil gracias por el artículo. Tengo un PROBLEMA, y es que me sale el botón de «Compra» una fila por debajo del selector de cantidad de artículos que desea comprar (lo normal es que salga en la misma fila) y no sé cómo demonios cambiarlo. Gracias por adelantado!

    PD: Mi plantilla es DIVI

  5. Hola Fernando,
    Muchas gracias por la aportación.
    Yo lo que no entiendo es una cosa o, por lo menos a mi me sucede que, cuando personalizas con código…., la página de mi cuenta, por ende, estoy personalizando la página del registro, es decir, son la misma. En la página de mi cuenta queda bien pero en el registro pues, por ejemplo, dar la bienvenida sin todavía estar registrado….

    Un saludo.

  6. Christian Valdepeña

    Como podría en una pestaña nueva agregar un calendario que sirva al usuario como recordatorio de eventos como cumpleaños o aniversarios y claro a mi como administrador de la pag web conocer esos eventos, para sí usar esa información y ofrecerle un producto para esa ocasión

  7. Muy bueno el artículo, me a servido mucho, pero me gustaría como puedo modificar, ocultar o eliminar el mensaje:

    Hola XXXXXX (¿no eres XXXXXX? Cerrar sesión)

    Desde el panel de control de tu cuenta puedes ver tus pedidos recientes. (todo esto >> gestionar tus direcciones de envío y facturación y editar tu contraseña y los detalles de tu cuenta <<)

  8. Buenos días Fernando
    Muchas gracias por tu explicación, me ha sido muy útil
    Podrías ahora comentar como personalizar el login la página mi-cuenta que aparece cuando no estamos logueados
    Muchas gracias de antemano
    Un abrazo

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido