Cómo personalizar la página de mi cuenta en WooCommerce (complementos y mediante programación)

¿Busca formas sencillas de editar y personalizar su página Mi cuenta? En esta guía, aprenderá cómo personalizar la página Mi cuenta de WooCommerce tanto mediante programación como con complementos para llevar su tienda al siguiente nivel.

Configurar una página de Mi cuenta puede ser crucial para cualquier tienda en línea. La mayoría de los propietarios de tiendas suelen pasar por alto esta página, pero puede ayudarlo a destacarse de sus competidores y brindar a sus compradores una experiencia de cliente mucho mejor. Antes de pasar a cómo editarlo, echemos un vistazo más de cerca a por qué es tan importante personalizar la página Mi cuenta de WooCommerce.

¿Qué es mi página de cuenta y por qué debería personalizarla?

La página Mi cuenta en WooCommerce es donde los propietarios de las tiendas guardan información sobre la información personal, la facturación y la dirección de envío de los clientes. Además, es donde los usuarios pueden consultar sus pedidos. La página predeterminada de Mi cuenta es una página simple de WordPress que contiene un código abreviado de WooCommerce.

 [ woocommerce_my_account ]

Esta página predeterminada tiene toda la información básica que necesitan los usuarios, pero puede aprovecharla al máximo a menos que personalice la página Mi cuenta. Puede utilizar esta página para una amplia gama de propósitos. Además de brindar a sus clientes información sobre sus pedidos, puede configurar cupones y códigos de descuento y mostrarlos allí, o incluso proporcionarles alertas exclusivas, ofertas de descuento y alertas de ventas.

La página Mi cuenta abre toneladas de oportunidades para una interacción adicional con sus clientes mientras mejora mucho sus experiencias de compra. Por ejemplo, puede permitir que los compradores guarden los detalles de pago, las direcciones de envío y los detalles adicionales de la cuenta e integrarlos con el proceso de pago.

Del mismo modo, puede proporcionarles una lista de descargas y productos virtuales que hayan traído directamente en su página Mi cuenta e incluso permitirles abrir tickets de soporte premium y contactarlos directamente desde su página Mi cuenta.

Si está ejecutando una página de WooCommerce y desea que sea lo más conveniente posible para sus clientes, definitivamente debe personalizar su página Mi cuenta en WooCommerce.

Cómo personalizar la página Mi cuenta en WooCommerce

Hay dos formas de editar la página Mi cuenta:

1. Con complementos
2. Programáticamente

En esta guía, describiremos ambos métodos para que puedas elegir el que mejor se adapte a ti.

1) Editar la página Mi cuenta con complementos

Hay varios complementos para editar la página Mi cuenta. Para hacerte la vida más fácil, echamos un vistazo a nuestra selección de las mejores herramientas. Estos complementos vienen con toda la personalización que necesita para que su página Mi cuenta de WooCommerce sea única, cómoda y fácil de usar. Si no tiene habilidades de codificación, usar complementos es el camino a seguir.

Puede editar las pestañas de la página Mi cuenta, crear otras nuevas e incluso personalizar su apariencia usando personalizadores dedicados y toneladas de opciones de personalización. Sin más preámbulos, esta es nuestra recomendación personal de complementos que puede usar para personalizar su página Mi cuenta en WooCommerce.

1) Personalizador de tienda

StoreCustomizer es un complemento gratuito de WordPress que puede ayudarlo a personalizar todas sus páginas de WooCommerce. Esto incluye todo, desde agregar elementos a sus menús hasta administrar su tienda, productos, páginas de pago e incluso su Mi cuenta. Puede cambiarle el nombre libremente, eliminar pestañas y diferentes opciones para cambiar el estilo de su página Mi cuenta de 2 maneras diferentes.

Una gran ventaja de StoreCustomizer es que no requiere ningún cambio en las plantillas de su tema ni siquiera la configuración de ganchos de WooCommerce. El complemento es extremadamente ligero y fácil de usar. Además, con la versión premium, tiene acceso a más opciones para personalizar su página Mi cuenta, como agregar pestañas personalizadas y editar el contenido de la pestaña usando los editores de Gutenberg como complemento del creador de páginas.

Características clave

• Un complemento fácil de usar que personaliza las páginas de WooCommerce sin cambiar los archivos de su tema.
• Totalmente integrado con WordPress Live Customizer.
• Permite cambiar el nombre y eliminar las pestañas de Mi cuenta, así como cambiar el estilo de las pestañas.
• La versión Premium permite la personalización completa de la pestaña Mi cuenta, así como la adición de pestañas personalizadas.

Precio

Este es un complemento gratuito. Tiene una versión gratuita con funciones básicas y cuatro planes premium que comienzan en 29 USD por año.

2) refuerzo

Booster es la respuesta completa para personalizar las páginas de WooCommerce sin necesidad de codificación. Este complemento viene con una amplia gama de módulos para ayudarlo a editar varias funciones y páginas de WooCommerce. Esto también incluye la página Mi cuenta. Puede cambiar fácilmente los extremos de las pestañas para que al hacer clic en las pestañas vaya a cualquier página que especifique.

Además, puede agregar páginas personalizadas e incluso personalizar páginas y pestañas específicas. Por ejemplo, puede personalizar los mensajes del tablero e incluso permitir que sus clientes cambien el estado del pedido manualmente desde su pestaña de pedidos. Si está buscando una solución completa para personalizar su página Mi cuenta, Booster es definitivamente una gran respuesta.

Características clave

• Complemento todo en uno para personalizar páginas, funciones y plantillas de WooCommerce.
• Personalización de puntos finales de pestañas para las páginas de Mi cuenta.
• Proporciona opciones para la personalización de las pestañas del panel.
• Agregue pestañas personalizadas y cambie el nombre, estilo y reordene las pestañas de Mi cuenta.

Precio

Booster tiene una versión gratuita con funciones limitadas y cuatro planes premium que comienzan en 99,99 USD por año.

3) Personalizar mi cuenta para WooCommerce

Personalizar mi cuenta para WooCommerce es una opción premium para personalizar y personalizar su página Mi cuenta de la manera que desee. Con esta herramienta, puede editar y agregar tantos puntos finales como desee. Puede cambiar el nombre, reordenar y personalizar todas sus pestañas con el personalizador en vivo. Además de eso, puede cambiar libremente las etiquetas de las pestañas, agregar iconos e incluso incluir contenido personalizado en sus pestañas sin necesidad de codificación alguna.

Además, este complemento incluye potentes opciones de edición junto con el personalizador en vivo para personalizar su página Mi cuenta. Puede cambiar el tamaño y los colores de la fuente, las imágenes de fondo, los colores, el relleno y el margen. También puede agregar su propio código CSS personalizado para llevar la personalización a un nivel completamente nuevo.

Características clave

• Fácil de usar y totalmente integrado con el personalizador Live.
• Personalización completa de todas las pestañas y puntos finales en la página Mi cuenta.
• Opciones para cambiar las etiquetas de las pestañas, agregar contenido personalizado, imágenes e íconos de pestañas.
• Admite código CSS personalizado para personalización adicional.

Precio

Personalizar mi cuenta para WooCommerce es un complemento premium que le costará 49 USD por año.

Personalización de la página Mi cuenta con WooCommerce StoreCustomizer

Ahora, echemos un vistazo a cómo usar StoreCustomizer para personalizar su página Mi cuenta de WooCommerce. La versión gratuita le permite editar los nombres de las pestañas o cambiar el estilo de las pestañas, mientras que para agregar nuevas pestañas necesitará el plan profesional. Incluso si elige un complemento diferente, esta sección lo ayudará a tener una mejor idea de cómo usar el complemento para personalizar su página Mi cuenta.

Primero, instalemos el complemento StoreCustomizer . Abra su Panel de administración de WordPress y vaya a Complementos> Agregar nuevo. Luego, use la barra de búsqueda en la parte superior derecha para buscar StoreCustomize r. Haga clic en Instalar y luego en Activar . Ahora, el complemento debe estar activado e instalado.

Para comenzar a personalizar su página Mi cuenta, vaya a WooCommerce > StoreCustomizer .

Esto abrirá la interfaz del complemento y le proporcionará todas las opciones de personalización que ofrece el complemento. Como vamos a personalizar la página Mi cuenta, presione el botón Personalizar su configuración en la parte inferior de la página.

Uso de StoreCustomizer

Esto debería abrir una ventana del Personalizador en vivo y debería poder ver una pestaña del Personalizador de la tienda en el menú. Haga clic en él y luego vaya a la pestaña Página de cuenta debajo de él.

Ahora, comencemos a editar la página Mi cuenta. Primero, cambiemos las opciones de estilo de las pestañas. Haga clic en la opción Diseño de pestaña de cuenta y cámbiela a Estilo horizontal o Estilo de pestaña lateral.

También podemos optar por eliminar pestañas o cambiarles el nombre, así que cambiemos el nombre de la pestaña Direcciones a Dirección de envío y eliminemos la pestaña Descargas.

Cambiar el nombre de las pestañas de la página Mi cuenta usando el Personalizador de la tienda

Para cambiar el nombre, vaya a la pestaña que desea cambiar de nombre y haga clic en Editar texto de pestaña . Luego, simplemente ingrese el nuevo texto de la pestaña que desea en el campo de título de la pestaña, y debería aparecer en la ventana de personalización en vivo de la derecha. También puede optar por cambiar el título de la página que aparece cuando hace clic en la pestaña. Simplemente cambie el Texto debajo del Título de la página, y eso debería hacerlo.

Eliminación de las pestañas de la página Mi cuenta con el Personalizador de la tienda

Para eliminar una pestaña, simplemente haga clic en el botón Eliminar pestaña debajo de la pestaña que desea ocultar. Por ejemplo, si desea eliminar la pestaña Descargas, simplemente seleccione la opción Eliminar pestaña debajo de ella.

Recuerda que puedes restablecer cualquiera de tus cambios de pestaña en cualquier momento. Al hacer clic en el icono de reinicio debajo de las pestañas, puede restablecer las pestañas de Mi cuenta a sus valores predeterminados.

Ahora, le recomendamos que continúe y personalice las pestañas de la página Mi cuenta de WooCommerce tanto como desee y edite sus pestañas. Sin embargo, si desea agregar nuevas pestañas y puntos finales, deberá comprar la versión premium de StoreCustomizer . El proceso para agregar nuevas pestañas es idéntico, y simplemente puede abrir la pantalla de personalización para hacerlo.

También puede consultar la documentación del complemento para aprovechar al máximo el complemento y toda su gama de personalizaciones de WooCommerce. Una vez que haya terminado de personalizar su página Mi cuenta, recuerde hacer clic en Publicar en la parte superior de la pantalla del personalizador para guardar los cambios.

Si bien la opción de personalizar su página Mi cuenta usando un complemento es más fácil y optimizada, la mayoría de los complementos cuestan una cantidad significativa de dinero para brindarle una amplia gama de funciones. Entonces, si desea aprovechar al máximo su página Mi cuenta pero tiene un presupuesto limitado, la codificación de su propia solución es una excelente alternativa.

Veamos cómo puede personalizar su página Mi cuenta de WooCommerce mediante programación .

2) Personalizar la página de mi cuenta en WooCommerce mediante programación

Si tiene habilidades de codificación, también puede personalizar la página Mi cuenta mediante programación editando los archivos de plantilla de WooCommerce o usando ganchos de WooCommerce . Antes de comenzar, le recomendamos que cree un tema secundario o use cualquiera de estos complementos y genere una copia de seguridad completa para su instalación de WordPress.

Para nuestra demostración, le mostraremos cómo personalizar su página Mi cuenta mediante programación usando ganchos de WooCommerce. Esto no requiere editar sus archivos de plantilla, por lo que hay menos posibilidades de romper algo.

Sin embargo, si desea más opciones para personalizar su página Mi cuenta con un poco de codificación, consulte nuestra guía completa sobre cómo editar la página Mi cuenta mediante programación. Para obtener más información sobre cómo personalizar plantillas, consulte este tutorial.

Personalización de la página Mi cuenta en WooCommerce usando ganchos de WooCommerce

Si no está familiarizado con los ganchos de WooCommerce, le recomendamos que consulte nuestra guía sobre los ganchos de WooCommerce para comprender mejor cómo funcionan. Después de eso, simplemente siga los siguientes pasos para personalizar y realizar cambios en sus páginas de Mi cuenta.

Para comenzar con el proceso, en su panel de administración de WordPress , vaya a Apariencia > Editor de temas para abre tu editor de temas .

Luego, vaya al archivo functions.php en la lista de archivos de temas en la barra lateral derecha. Ahora, usando el editor, puede agregar sus funciones personalizadas al archivo de funciones de su tema hijo.

Cambiar el nombre de las pestañas usando WooCommerce Hooks

Para cambiar el nombre de una pestaña usando ganchos de WooCommerce, agregue el siguiente script a su archivo functions.php . Esta secuencia de comandos cambiará el nombre de la pestaña Direcciones a Tus direcciones , pero puedes editar la secuencia de comandos y usar el nombre que desees.

 add_filter('woocommerce_account_menu_items', 'QuadLayers_rename_acc_adress_tab', 9999);
función QuadLayers_rename_acc_adress_tab ($ artículos) {
$items['edit-address'] = 'Sus direcciones';
devolver $ artículos;
} 

Luego guarde los cambios y verifique la interfaz para ver los cambios.

También puede editar este script y cambiar cualquiera de los nombres de sus pestañas. Para hacer esto, simplemente cambie el nombre de la matriz $items . Puede consultar la lista completa de slugs disponibles para la matriz $items aquí.

 $elementos = matriz(
'tablero' => __( 'Tablero', 'woocommerce' ),
'pedidos' => __( 'Pedidos', 'woocommerce' ),
'descargas' => __( 'Descargas', 'woocommerce' ),
'editar dirección' => _n( 'Direcciones', 'Dirección', (int) wc_shipping_enabled(), 'woocommerce' ),
'métodos de pago' => __( 'Métodos de pago', 'woocommerce' ),
'editar-cuenta' => __( 'Detalles de la cuenta', 'woocommerce' ),
'cierre de sesión del cliente' => __( 'Cerrar sesión', 'woocommerce'),
);

Por ejemplo, si desea cambiar el nombre de la pestaña Pedidos a Sus pedidos , puede modificar la tercera línea del script a $items['orders'] = 'Your Orders'. También debe cambiar el nombre del filtro a QuadLayers_rename_orders_tab para que su nueva función no tenga el mismo nombre que la anterior. Entonces, con estos cambios, su nuevo script será:

 add_filter('woocommerce_account_menu_items', 'QuadLayers_rename_orders_tab', 9999);
función QuadLayers_rename_orders_tab ($ artículos) {
$items['orders'] = 'Tus pedidos';
devolver $ artículos;
}

De esta manera, puede editar el archivo functions.php y cambiar el nombre de todas sus pestañas. Una vez que esté satisfecho con los cambios, haga clic en Actualizar archivo y listo.

Eliminar pestañas usando ganchos de WooCommerce

Además de cambiar el nombre de las pestañas, también puede eliminar pestañas en su página Mi cuenta usando la función unset() con la matriz $items. Por ejemplo, para eliminar la pestaña Detalles de la cuenta , debe usar el siguiente script.

 add_filter('woocommerce_account_menu_items', 'QuadLayers_remove_acc_tab', 999);
función QuadLayers_remove_acc_tab ($ artículos) {
unset($elementos['editar-cuenta']);
devolver $ artículos;
} 

Guarde los cambios y luego verifique la interfaz. Verá que la pestaña Detalles de la cuenta no está allí.

Usando el mismo script, puede ajustarlo y eliminar cualquier pestaña que desee. Por ejemplo, si desea ocultar la pestaña de descargas, debe cambiar el nombre de la función y la matriz de elementos de $elementos['editar-cuenta'] a $elementos['descargas']. Así que ahora su nuevo guión será algo como esto.

 add_filter('woocommerce_account_menu_items', 'QuadLayers_remove_download', 9999);
función QuadLayers_remove_downloads ($ artículos) {
unset( $elementos['descargas'] );
devolver $ artículos;
}

Luego, haga clic en Actualizar archivo para aplicar los cambios. Estas son solo algunas de las cosas que puede hacer para personalizar la página Mi cuenta en WooCommerce, pero no solo se limita a eliminar y cambiar el nombre. También puede fusionar pestañas, crear pestañas personalizadas y mucho más. Para aprender a aprovechar al máximo su página Mi cuenta mediante programación, le recomendamos que siga nuestra guía paso a paso.

Conclusión

Y así concluye nuestra guía sobre cómo personalizar la página Mi cuenta de WooCommerce . Esto te ayudará a mejorar la experiencia de tus clientes y a diferenciarte de tus competidores.

En cuanto a nuestra recomendación sobre qué método usar para editar la página Mi cuenta, depende de sus necesidades y habilidades. Si no tiene habilidades de codificación o no desea editar los archivos de plantilla de su tema, los complementos son su mejor opción. Esta alternativa es más conveniente y amigable para principiantes. Además, te aseguras de no romper nada en tu instalación de WordPress usando funciones y plantillas personalizadas.

En esta publicación, le mostramos algunos de los 3 mejores complementos para editar la página Mi cuenta. Si quieres echar un vistazo a otras opciones, echa un vistazo a esta publicación. Por otro lado, si sabe cómo codificar y desea una flexibilidad total, puede personalizar la página Mi cuenta mediante programación. Para esto, puede anular los archivos de plantilla predeterminados de WooCommerce o usar ganchos de WooCommerce.

En esta guía, le mostramos cómo usar ganchos, pero si desea obtener más información sobre cómo personalizar la página Mi cuenta con scripts personalizados, le recomendamos que consulte este tutorial.

• Cómo personalizar la página de la tienda en WooCommerce
• Personaliza el botón Agregar al carrito en WooCommerce
• Cómo editar el pago de WooCommerce (codificación y complementos)
• Cómo personalizar la página del producto WooCommerce en Divi

Finalmente, independientemente del método que elija, infórmenos en los comentarios si tiene algún problema para configurar su página Mi cuenta.