La usabilidad de la página «Mi Cuenta» en WooCommerce es crucial para ofrecer una experiencia de usuario satisfactoria y eficiente. Un panel de usuario bien estructurado y fácil de navegar puede marcar la diferencia entre un cliente fiel y uno que abandona tu tienda. Actualmente cuando el cliente entra en la página de mi cuenta su primera impresión es esta:
Sí, una página nada trabajada y sin usabilidad ninguna, además que no aprovechamos para realizar una llamada a la acción como esta otra que vamos a cambiar en este tutorial:
En este artículo, te mostraré por qué mejorar la usabilidad del panel de Mi Cuenta es importante, sus ventajas y cómo implementar mejoras clave, incluyendo la adición de un botón de «Valorar en Google» y otros elementos esenciales.
Índice
Ventajas de mejorar la página de Mi Cuenta en WooCommerce
- Mayor retención de clientes: Un panel de usuario intuitivo permite que los clientes encuentren rápidamente la información que necesitan.
- Reducción de consultas de soporte: Si los clientes pueden autogestionarse, disminuirán las solicitudes de ayuda.
- Mejor experiencia del usuario: Una interfaz clara y organizada genera confianza y fomenta futuras compras.
- Incremento de las ventas: Facilitar la navegación a productos adquiridos y opciones de recompra puede aumentar los ingresos.
- Fortalecimiento de la reputación online: Añadir elementos como reseñas o programas de fidelización impulsa la imagen de la tienda.
Elementos clave a mejorar en la página de Mi Cuenta
- Navegación intuitiva: Presenta las opciones más importantes (pedidos, direcciones, métodos de pago, etc.) de forma clara y accesible.
- Diseño responsive: Asegúrate de que la página funcione correctamente en dispositivos móviles y de escritorio.
- Personalización del cliente: Agrega saludos personalizados o recomendaciones basadas en compras anteriores.
- Llamadas a la acción (CTAs): Botones visibles para acciones clave como actualizar información o volver a comprar productos.
- Fomentar la participación: Añadir enlaces directos para dejar reseñas o recomendar productos a amigos.
Cómo añadir un botón de «Valorar en Google» en Mi cuenta en WooCommerce
Fomentar reseñas positivas es una excelente manera de mejorar la reputación de tu negocio. Puedes agregar un botón de «Valorar en Google» en la página de Mi Cuenta añadiendo este código al fichero functions.php de tu Child Theme o bien a tu plugin de funcionalidades como explico aquí.
add_action('woocommerce_account_dashboard', 'custom_google_review_button', 5);
function custom_google_review_button() {
?>
<div class="google-review-button">
<a href="https://g.page/r/CODIGO_DE_TU_NEGOCIO/review" target="_blank" class="review-btn">
<i class="fas fa-star"></i> ¡Déjanos tu reseña en Google!
</a>
</div>
<?php
}Reemplaza CODIGO_DE_TU_NEGOCIO con el ID de tu perfil de negocio en Google. O bien si quieres poner otra llamada a la acción modifica en el código el enlace y el título del botón. Por otro lado, para dar los estilos que se muestran en la imagen añade este código CSS al personalizador:
.google-review-button {
text-align: center;
margin-bottom: 20px;
}
.google-review-button .review-btn {
display: inline-block;
padding: 15px 30px;
font-size: 18px;
font-weight: bold;
color: var(--wd-primary-color, #ffffff);
background-color: var(--wd-alternative-color, #d72638);
border-radius: 5px;
text-decoration: none;
box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
transition: all 0.3s ease-in-out;
}
.google-review-button .review-btn:hover {
background-color: var(--wd-primary-color, #a61e2e);
transform: translateY(-3px);
}
.google-review-button .review-btn i {
margin-right: 10px;
color: #ffc107;
font-size: 20px;
}Cómo crear un panel de botones en la sección Escritorio de mi cuenta
En este caso, debemos añadir otro código, recuerda que si tus endpoints de mi cuenta son diferentes, deberás cambiarlos por los tuyos. Si no sabes cuales son debes ir a WooCommerce > Ajustes > Avanzado > Instalación de páginas > Variables de la cuenta. Revisa si son diferentes y cámbialas en consecuencia:
Una vez que ya sabes que hay que comprobar estas opciones, este código también tiene la sección de lista de deseos que va a una url, si no lo tienes borra esa sección y si la tienes cambia la url de la página. Si no sabes algo del proceso recuerda ver el vídeo anclado a este post dónde lo explico todo paso a paso.
add_action('woocommerce_account_dashboard', 'custom_account_dashboard_links');
function custom_account_dashboard_links() {
$current_url = home_url(add_query_arg(array(), $_SERVER['REQUEST_URI']));
$dashboard_url = wc_get_page_permalink('myaccount');
?>
<div class="wd-my-account-links wd-grid-g">
<?php if ($current_url !== $dashboard_url) : ?>
<div class="dashboard-link">
<a href="<?php echo esc_url($dashboard_url); ?>">
<i class="fas fa-tachometer-alt"></i>
<span>Escritorio</span>
</a>
</div>
<?php endif; ?>
<div class="orders-link">
<a href="<?php echo esc_url(wc_get_endpoint_url('orders')); ?>">
<i class="fas fa-shopping-cart"></i>
<span>Pedidos</span>
</a>
</div>
<div class="productos-adquiridos-link">
<a href="<?php echo esc_url(wc_get_endpoint_url('productos-adquiridos')); ?>">
<i class="fas fa-box"></i>
<span>Productos Adquiridos</span>
</a>
</div>
<div class="downloads-link">
<a href="<?php echo esc_url(wc_get_endpoint_url('downloads')); ?>">
<i class="fas fa-download"></i>
<span>Descargas</span>
</a>
</div>
<div class="edit-address-link">
<a href="<?php echo esc_url(wc_get_endpoint_url('edit-address')); ?>">
<i class="fas fa-map-marker-alt"></i>
<span>Direcciones</span>
</a>
</div>
<div class="payment-methods-link">
<a href="<?php echo esc_url(wc_get_endpoint_url('payment-methods')); ?>">
<i class="fas fa-credit-card"></i>
<span>Métodos de pago</span>
</a>
</div>
<div class="edit-account-link">
<a href="<?php echo esc_url(wc_get_endpoint_url('edit-account')); ?>">
<i class="fas fa-user"></i>
<span>Detalles de la cuenta</span>
</a>
</div>
<div class="wishlist-link">
<a href="<?php echo esc_url(home_url('/favoritos/')); ?>">
<i class="fas fa-heart"></i>
<span>Wishlist</span>
</a>
</div>
<div class="customer-logout-link">
<a href="<?php echo esc_url(wc_logout_url()); ?>">
<i class="fas fa-sign-out-alt"></i>
<span>Salir de la sesión</span>
</a>
</div>
</div>
<?php
}Por supuesto añadir también los estilos CSS:
.wd-my-account-links {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 30px;
}
.wd-my-account-links div {
background-color: #f7f7f7;
padding: 30px;
text-align: center;
border-radius: 5px;
transition: all 0.3s ease-in-out;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.wd-my-account-links div:hover {
background-color: #eaeaea;
transform: translateY(-5px);
}
.wd-my-account-links a {
text-decoration: none;
font-weight: bold;
color: #333;
font-size: 18px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.wd-my-account-links i {
font-size: 32px;
color: var(--wd-primary-color, #d72638);
}
/* Responsivo para tablets */
@media (max-width: 1024px) {
.wd-my-account-links {
grid-template-columns: repeat(2, 1fr);
}
}
/* Responsivo para móviles */
@media (max-width: 768px) {
.wd-my-account-links {
grid-template-columns: repeat(1, 1fr);
}
}
Deja una respuesta