Cómo agregar un nuevo menú en el menú de la página Mi cuenta en Woocommerce
Publicado: 2020-01-29
¿Está buscando una forma sencilla de agregar una nueva pestaña en la página de mi cuenta en WooCommerce que cualquier usuario de WooCommerce pueda implementar rápida y fácilmente, independientemente de su nivel de habilidad? La solución rápida para agregar una nueva pestaña en la página de mi cuenta implica agregar dos ganchos de filtro de WooCommerce que se encargan de agregar el menú y el otro se encarga de redirigir a la nueva página agregada a la URL respectiva.
En este tutorial, le mostraré cómo agregar exactamente un menú en el menú de mi cuenta de WooCommerce y luego crear un filtro de redirección para redirigir a los usuarios a cualquier página que prefiera, incluida una redirección externa. Entonces, comencemos por comprender cómo funciona la página del menú Mi cuenta.
Cómo funciona el menú de la página MyAccount WooCommerce
Estas pestañas en WooCommerce son básicamente menús y es posible filtrar el contenido de esa página y obtener la matriz que muestra los menús, luego agregar el contenido a la matriz y devolver el contenido.
Ganchos de filtro de WooCommerce/WordPress
Si no has trabajado con filtros antes, escribí una introducción detallada al filtro en este tutorial apply_filters y do_action donde mencioné cómo funcionan los filtros de WordPress .
Otro buen ejemplo es el filtro que aplicamos en the_content en este tutorial de WordPress, para agregar contenido antes o después de la publicación predeterminada de WordPress o el contenido de la página .
Suficiente información sobre los ganchos de filtro, ahora centrémonos en cómo agregar un menú en la página de mi cuenta en WooCommerce.
Me gusta comenzar todos mis tutoriales con un resumen rápido paso a paso para ayudarlo a aprender y comprender lo que sucede en el código. No me gusta simplemente compartir el código y pedirle que copie y pegue sin explicar qué hace el código. Este es un buen enfoque ya que los lectores pueden ser más innovadores y agregar funciones más específicas al fragmento de código.
Pasos sobre cómo agregar una nueva pestaña en la página de mi cuenta WooCommerce
Para agregar una nueva pestaña en la página de mi cuenta, implica tres pasos que son los siguientes:
- Cree un enlace de filtro para agregar la nueva pestaña en la página de mi cuenta y el filtro debe recopilar todos los datos que se muestran en el menú y luego insertar sus nuevos datos . (recuerde esa palabra EMPUJAR, lo explicaré con más detalles más adelante en esta publicación)
- Cree un segundo filtro que agregue la redirección de URL del menú que agregó en el primer paso a la página que ha creado.
- Agregue este código a su archivo functions.php en su tema o puede agregar este código a una clase o función de complemento y agregará con éxito el nuevo menú en la página de mi cuenta en WooCommerce.
Agregar menú en la página Mi cuenta en Woocommerce
En los últimos días, un cliente me solicitó que agregara un nuevo menú en la página de mi cuenta en un sitio de WooCommerce existente. Idealmente, se suponía que el menú redirigiría al Foro que habíamos agregado previamente usando BuddyPress.
En este tutorial, quiero suponer que este es el caso y continuaremos y agregaremos el menú a la página Mi cuenta y debería redirigir al foro.
Para empezar, la imagen a continuación indica el producto final de cómo agregué la nueva pestaña en la página de mi cuenta de este sitio de WooCommerce y redirigí a los usuarios al Foro.
Agregue el primer filtro para agregar el menú a la página Mi cuenta
El código para agregar una nueva pestaña en la página de mi cuenta incluye un gancho de filtro y una función de devolución de llamada como se muestra a continuación:
//Primer enlace que agrega el elemento del menú al menú WooCommerce de mi cuenta
función example_forum_link ($menu_links){
// conectaremos "womanide-forum" más tarde
$nuevo = array( 'ejemplo-foro' => 'Ejemplo de foro' );
// o en caso de que necesite 2 enlaces
// $nuevo = array( 'enlace1' => 'Enlace 1', 'enlace2' => 'Enlace 2');
// array_slice() es bueno cuando quieres agregar un elemento entre los otros
$menu_links = array_slice ($menu_links, 0, 1, true)
+ $nuevo
+ array_slice ($menu_links, 1, NULL, verdadero);
devolver $menu_enlaces;
}
add_filter ('woocommerce_account_menu_items', 'example_forum_link');
Cuando agregue este código a functions.php, debería ver el nuevo menú en la página de mi cuenta como se muestra en la imagen a continuación:
Cómo funciona el código
- En este filtro estamos usando la variable $menu_links que pasamos a la función de devolución de llamada para obtener todos los menús en la página de mi cuenta en una matriz.
- Después de obtener la matriz de enlaces de menú, usamos la función array_slice() para extraer y luego PUSH en nuestro nuevo elemento de menú, luego colocamos todos los menús en una matriz y los adjuntamos al gancho de WooCommerce woocommerce_account_menu_items .
- En este punto, el elemento del menú ahora se muestra en el menú de mi cuenta
Como puede ver, el filtro ha agregado el nuevo menú en el menú predeterminado de mi cuenta. Cuando haga clic en el menú, será redirigido a una página 404 ya que la redirección en este nuevo elemento del menú ahora funciona como se muestra en la imagen a continuación:
Esta página no existe en el tablero de WooCommerce, pero puede ver el foro de ejemplo de slug, agregamos en el primer filtro y lo usaremos en el segundo filtro para redirigir a la página del foro.
Agregar segundo filtro para agregar menú a la página Mi cuenta
Como se mencionó anteriormente, el segundo filtro agregará la página a la que queremos redirigir este menú y, en este caso, podemos agregarla usando el código que se muestra a continuación:
// Segundo filtro para redirigir el punto final de WooCommerce a una URL personalizada
función forum_example_hook_endpoint( $url, $punto final, $valor, $permalink){
if( $punto final === 'ejemplo-foro' ) {
// Aquí es donde agrega la URL personalizada, podría ser externa, en este caso, necesitamos ir a mi perfil en el foro de bbpress
// Usaré esta función (bp_core_get_username( bp_loggedin_user_id() );) para obtener la identificación de usuario de mi perfil y agregarla a la URL como se muestra a continuación
$url = site_url() .'/miembros/' . bp_core_get_username( bp_loggedin_user_id() );
}
devolver $url;
}
add_filter('woocommerce_get_endpoint_url', 'forum_example_hook_endpoint', 10, 4);
Cuando agrega este código justo debajo del primer filtro que agregamos en el paso anterior, su menú de ejemplo de foro debe redirigir al perfil de usuario específico como se muestra en la imagen a continuación, donde he redirigido a mi perfil en el foro de BBPpress.
Fragmento de código completo para agregar una nueva pestaña en la página Mi cuenta y redirigir a cualquier página
Para agregar el nuevo menú al menú de la página de mi cuenta en WooCommerce, debe agregar el fragmento de código completo que se comparte a continuación, en su archivo functions.pfp de su tema y reemplazar las variables con su respectivo slug y página donde desea redirigir el menú.
//Primer enlace que agrega el elemento del menú al menú WooCommerce de mi cuenta
función example_forum_link ($menu_links){
// conectaremos "womanide-forum" más tarde
$nuevo = array( 'ejemplo-foro' => 'Ejemplo de foro' );
// o en caso de que necesite 2 enlaces
// $nuevo = array( 'enlace1' => 'Enlace 1', 'enlace2' => 'Enlace 2');
// array_slice() es bueno cuando quieres agregar un elemento entre los otros
$menu_links = array_slice ($menu_links, 0, 1, true)
+ $nuevo
+ array_slice ($menu_links, 1, NULL, verdadero);
devolver $menu_enlaces;
}
add_filter ('woocommerce_account_menu_items', 'example_forum_link');
// Segundo filtro para redirigir el punto final de WooCommerce a una URL personalizada
función forum_example_hook_endpoint( $url, $punto final, $valor, $permalink){
if( $punto final === 'ejemplo-foro' ) {
// Aquí es donde agrega la URL personalizada, podría ser externa, como en este caso, necesitamos ir a mi perfil en el foro de bbpress
// Usaré esta función (bp_core_get_username( bp_loggedin_user_id() );) para obtener la identificación de usuario de mi perfil y agregarla a la URL como se muestra a continuación
$url = site_url() .'/miembros/' . bp_core_get_username( bp_loggedin_user_id() );
}
devolver $url;
}
add_filter('woocommerce_get_endpoint_url', 'forum_example_hook_endpoint', 10, 4);
Terminando
Crear una nueva pestaña de menú en la página de mi cuenta en WooCommerce ya no debería ser un desafío después de leer este tutorial. He explicado paso a paso y con un ejemplo práctico sobre cómo agregar una nueva pestaña en la página de mi cuenta y crear una redirección a una página de su elección. También he escrito otros tutoriales sobre cómo agregar la redirección de WooCommerce después del pago y la redirección de WooCommerce después del registro. Si no puede implementar esta solución, puede buscar la ayuda de un desarrollador profesional de WooCommerce.