Como añadir un nuevo menú/enlace a la página “My account” en Woocommerce

Desde su versión 2.6.0, lanzada a mitad del año 2016, la página de “Mi cuenta” (o “My account”) del plugin para WordPress Woocommerce cambió radicalmente de diseño y empezó a funcionar mediante una combinación de pestañas (tabs) y de endpoints que facilitan mucho el acceso a las diferentes secciones del perfil de un usuario: pedidos realizados, direcciones de envío, facturación, desconexión… Pero, ¿qué pasa si queremos añadir un nuevo menú en la página de “Mi cuenta”?.

Este proceso requiere de unos mínimos conocimientos técnicos, ya que es necesario el acceso mediante FTP a vuestro servidor y un editor de código/texto para añadir unas lineas en un determinado fichero. Es fácil, pero sin esto que os acabo de comentar no será posible llevarlo a cabo.

Lo primero de todo será crear una nueva página en nuestro backend de WordPress, la cual será la que queramos cargar desde la página “Mi cuenta” a través de un nuevo enlace que vamos a añadir. En cuanto le demos a “Publicar”, veremos que la barra del navegador muestra una ruta de este estilo:

https://www.tupagina.com/wp-admin/post.php?post=699&action=edit

Si os fijáis en lo marcado en negrita, tendréis un número el cual debéis recordar (o apuntar) porque será necesario posteriormente (es un número variable para cada Web).

Lo siguiente será acceder mediante FTP a nuestro servidor y localizar el fichero “functions.php” que se encuentra en la ruta “/wp-content/themes/nombretheme/”. Tras ello, podéis descargarlo y abrirlo con vuestro editor de código/texto para después de la edición volver a guardar y volver a subir, o mejor todavía, hacer click con el botón derecho en el nombre del fichero (directamente en vuestro gestor FTP) y darle a “Ver/Editar”.

Una vez abierto el fichero functions.php, hay que ir hasta la última linea del fichero. En ella, si se encuentra el símbolo “?>” habrá que dejar una linea en blanco justo arriba para copiar ahí la nueva función. Si no existiera este código, bastará con copiar la función en una nueva última linea.

Código a insertar en el fichero functions.php

A continuación os comparto el código que se debe pegar en el fichero functions.php, en el cual he marcado en negrita los contenidos que debéis personalizar:

//Endpoint personalizado en My account
function custom_wc_end_point() {
 if(class_exists('WooCommerce')){
 add_rewrite_endpoint( ‘slug’, EP_ROOT | EP_PAGES );
}
}
add_action( 'init', 'custom_wc_end_point' );
function custom_endpoint_query_vars( $vars ) {
 $vars[] = ‘slug’;
 return $vars;
}
add_filter( 'query_vars', 'custom_endpoint_query_vars', 0 );
function ac_custom_flush_rewrite_rules() {
 flush_rewrite_rules();
}
add_action( 'after_switch_theme', 'ac_custom_flush_rewrite_rules' );
function custom_endpoint_acct_menu_item( $items ) {
 
 $logout = $items['customer-logout'];
 unset( $items['customer-logout'] );
 $items['slug'] = __( 'NOMBRE A MOSTRAR', 'woocommerce' );
 $items['customer-logout'] = $logout;
 return $items;
}
add_filter( 'woocommerce_account_menu_items', 'custom_endpoint_acct_menu_item' );
function fetch_content_custom_endpoint() {
 global $post;
 $id = “IDDEPAGINA”;
 ob_start();
 $output = apply_filters('the_content', get_post_field('post_content', $id));
 $output .= ob_get_contents();
 ob_end_clean();
 echo $output;
}
add_action( 'woocommerce_account_slug_endpoint', 'fetch_content_custom_endpoint' );
Nuevo enlace ya añadido a la página de MI CUENTA en Woocommerce
Nuevo enlace ya añadido a la página de MI CUENTA en Woocommerce

Para entendernos:

En todos los lugares donde esté la palabra “slug” (hay un total de 4)  se debe modificar por el correspondiente slug (nombre corto) de la página creada anteriormente. Por ejemplo, si he creado una página con título “Centro de soporte” y el slug que he creado es “centro-soporte”, este será el texto que deba modificar.

En el lugar donde pone “NOMBRE A MOSTRAR” se debe añadir el texto para el enlace en sí, que es lo que los usuarios verán como nuevo tab en “Mi cuenta”. En el caso de ejemplo, sería “Centro de soporte”, “Helpdesk”, “Tickets soporte”…

Y por último, en el lugar donde pone “IDDEPAGINA” es donde debéis anotar el número que corresponde a la ID de página creada (el que hemos recordado/anotado al principio de este tutorial). En mi ejemplo sería “ $id = “699”; ”

Ahora, que ya tenemos personalizado el código, bastará con pegarlo en el fichero functions.php, reemplazar el existente mediante FTP… ¡y listo!. Ya podéis loguearos como usuario en vuestra tienda online Woocommerce, acceder a la página de “Mi cuenta” y veréis el nuevo enlace en el lateral.

Como añadir un nuevo menú/enlace a la página “My account” en Woocommerce
5 5 votos

Temas

Dedico muchas horas de mi día a día al marketing online, pero aquí también os hablaré de mis hobbies, tecnología y todo aquello que forma parte de mi día a día (y que merece la pena compartir).

11 comentarios

  • Hola Nacho, Gracias por tu publicación. sabes como editar el texto de las cajas de la derecha, digamos que no quiero que diga “direcciones” si no “Datos de suscripción” por ejemplo.

    • Hola Jhon. Esos textos en principio deberías encontrarlos en el fichero .PO que encontrarás en la ruta “wp-content/languages/plugins”. Descarga a tu escritorio los ficheros .PO y .MO de Woocommerce y edita el .PO con el programa POEDIT (es gratis). Luego sube ambos de nuevo y listo.

  • Uau! Magnifico! Y se podría hacer que segun el rol de usuario apareciera o no? Por que así por defecto le aparece a todos los roles de usuario, no?

  • Hola, muchas gracias por el post pero cada vez que lo intento pegar cuando salgo del archivo luego en mi web me da un error que no me deja ni acceder a ella mi código del archivo functions.php es el siguiente ¿donde debo pegarlo exactamente?.
    Saludos y Gracias.

    • $storefront_version,

      /**
      * Initialize all the things.
      */
      ‘main’ => require ‘inc/class-storefront.php’,
      ‘customizer’ => require ‘inc/customizer/class-storefront-customizer.php’,
      );

      require ‘inc/storefront-functions.php’;
      require ‘inc/storefront-template-hooks.php’;
      require ‘inc/storefront-template-functions.php’;

      if ( class_exists( ‘Jetpack’ ) ) {
      $storefront->jetpack = require ‘inc/jetpack/class-storefront-jetpack.php’;
      }

      if ( storefront_is_woocommerce_activated() ) {
      $storefront->woocommerce = require ‘inc/woocommerce/class-storefront-woocommerce.php’;

      require ‘inc/woocommerce/storefront-woocommerce-template-hooks.php’;
      require ‘inc/woocommerce/storefront-woocommerce-template-functions.php’;
      }

      if ( is_admin() ) {
      $storefront->admin = require ‘inc/admin/class-storefront-admin.php’;

      require ‘inc/admin/class-storefront-plugin-install.php’;
      }

      /**
      * NUX
      * Only load if wp version is 4.7.3 or above because of this issue;
      * https://core.trac.wordpress.org/ticket/39610?cversion=1&cnum_hist=2
      */
      if ( version_compare( get_bloginfo( ‘version’ ), ‘4.7.3’, ‘>=’ ) && ( is_admin() || is_customize_preview() ) ) {
      require ‘inc/nux/class-storefront-nux-admin.php’;
      require ‘inc/nux/class-storefront-nux-guided-tour.php’;

      if ( defined( ‘WC_VERSION’ ) && version_compare( WC_VERSION, ‘3.0.0’, ‘>=’ ) ) {
      require ‘inc/nux/class-storefront-nux-starter-content.php’;
      }
      }

      /**
      * Note: Do not add any custom code here. Please use a custom plugin so that your customizations aren’t lost during updates.
      * https://github.com/woocommerce/theme-customisations
      */

  • Hola! Muchas gracias por este breve y clarísimo tutorial.
    Una pregunta…. el enlace me lleva a la página del slug pero me gustaría que el contenido de la página enlazada apareciera dentro de la página mi cuenta, como lo hacen las tablas de descargas, etc.
    ¿Es posible? Gracias.

¿Algún comentario? :)