Eliminar pestañas en los ajustes de WooCommerce

La sección de ajustes de WooCommerce dispone de varias pestañas con diferente información para configurar nuestro ecommerce a nuestras necesidades pero en ocasiones no utilizamos todas esas pestañas y puede que nos estorben a nosotros o incluso a alguno de nuestros colaboradores.

En primer lugar vamos a ver a qué me refiero y para ello, desde el panel de administración de WordPress vamos a WooCommerce –> Ajustes. Ahí podremos ver algo similar a lo siguiente:

Eliminar pestañas en los ajustes de WooCommerce

Para este ejemplo, vamos a suponer que nosotros queremos ocultar o eliminar la pestaña «Integración» porque no la vamos a usar y por lo que sea, nos estorba, confunde o cualquier otro motivo.

Pero antes de nada vamos a ver cuales son las pestañas que hay, a mostrar el array con los nombres de las pestañas para poder elegir la que queremos.

Mostrar el array con los nombres de las pestañas de ajustes

Para realizar esto de manera sencilla y rápida, podemos utilizar el siguiente snippet de código que lo que hace es eso, mostrarnos en el admin el array con los diferentes nombres de las pestañas de ajustes de WooCommerce.

Como siempre, este snippet lo podemos añadir al final del fichero functions.php de nuestro tema activo o a nuestro plugin de funciones. De todas formas, como es algo temporal, lo pondremos y lo quitaremos porque sólo lo queremos para eso, para saber los nombres de las pestañas de ajustes que hay ahora mimos para quitar una o varias de ellas.

Bien, una vez añadido el código, en el admin nos mostrará el array de las pestañas de ajustes de WooCommerce. Algo similar a lo siguiente:

Array de las pestañas de los ajustes de WooCommerce

Como vemos en la imagen anterior, el array está compuesto de las siguientes pestañas:

  • gereral -> Generan
  • products -> Productos
  • tax -> Impuesto
  • shipping -> Envío
  • checkout -> Pagos
  • account -> Cuentas y privacidad
  • email -> Correos electrónicos
  • integration -> Integración
  • advanced -> Avanzado

Ahora, antes de seguir adelante, elegimos la o las pestañas que queremos ocultar o eliminar. En este caso, para este ejemplo, yo voy a ocultar la pestaña de Integración (integration).

Quitar una pestaña de los ajustes de WooCommerce

Ahora que ya lo tenemos claro, que sabemos qué pestaña o pestañas queremos ocultar o eliminar, vamos a proceder con el código necesario para realizar esto.

El código para quitar la pestaña «Integración es el siguiente»:

Y el resultado será el siguiente:

Quitar una pestaña de ajustes de WooCommerce

Bien, no?

Hemos quitado u ocultado la pestaña «Integración» muy facilmente.

Este código es para el caso de la pestaña integración pero si queremos ocultar otra pestaña, no tenemos mas que cambiar el nombre de la pestaña en $tabs_array[‘pestaña’].

Quitar varias pestañas de los ajustes de WooCommerce

Ahora que ya sabemos cómo quitar u ocultar una pestaña de los ajustes de WooCommerce, vamos a ver cómo quitar 2 o más en una misma línea de código.

Es tan sencillo como separar cada pestaña entre comas. Pero para muestra, un ejemplo.

Para este ejemplo vamos a ocultar las pestañas «Integración», «Cuentas y privacidad» y «Avanzado».

El código sería el siguiente:

Y el resultado seria:

Quitar varias pestañas de los ajustes de WooCommerce

Ya vemos que es realmente sencillo ocultar o quitar pestañas de los ajustes de WooCommerce.

Ahora, si queremos quitar otras pestañas, lo único es sustituir por los nombres adecuados.

Ocultar pestañas de los ajustes de WooCommerce por rol de usuario

Esto que acabamos de hacer también lo podemos hacer para que sólo uno o varios roles de usuario vean o no vean esas pestañas porque puede que nos interese que ciertos roles de usuario no vean ciertas pestañas.

Para este ejemplo voy a ocultar esas tres pestañas del ejemplo anterior para los usuarios con el rol de «administrador».

El código sería el siguiente:

Y el resultado ya nos lo podemos imaginar, ¿verdad?

El video

Pues esto es lo que hemos hecho hoy, espero que os haya gustado y os sea de provecho.

Como siempre, cualquier cosa me dejáis un comentario.

Saludos y mucho ánimo!

Cómo eliminar pestañas en los ajustes de producto de WooCommerce

Cómo eliminar pestañas en los ajustes de producto de WooCommerce

WooCommerce añade una sección dentro de cada página de procuto, en el modo edición desde donde podemos realizar varios ajustes a nivel de producto. Esto quiere decir que los ajuste que hay ahí son solo para cada producto individual y los cambios que realicemos en un producto no afectan a los demás productos.

En la siguiente imagen podemos ver la sección de «Datos del producto» a la que me estoy refiriendo.

Cómo eliminar pestaña avanzado en datos de producto en WooCommerce

Si nos fijamos, esta sección (Datos del producto), en su parte izquierda dispone de diferente pestañas o tabs sobre las que podemos pulsar para que se muestren los ajustes de cada una de ellas.

Estas pesañas, por defecto son «General«, «Inventario«, «Envío«, «Productos relacionados«, «Atributos» y «Avanzado«.

Como digo, estas son las pestañas por defecto de WooCommerce porque es posible que algún plugin añada alguna otra para añadir sus propios ajustes.

Nosotros nos vamos a centrar en estas.

Si queremos aliminar alguna de estas pestañas para que no se muestren, lo podemos hacer utilizando el hook «woocommerce_product_data_tabs» de la siguiente forma:

El snippet anterior tendríamos que adaptarlo a nuestras necesidades ya que quita todas las pestañas pero si por ejemplo queremos quitar sólo la pestaña «Avanzado» usaríamos el siguiente código:

Nos quedarías así:

Cómo eliminar pestaña avanzado en datos de producto en WooCommerce

Y así, dependiendo de la pestaña, podemos quitar las que queramos.

Espero que este post os sea de utilizar y que me dejéis cualquier observación en los comentarios.

Saludos y mucho ánimo!

Cómo renombrar las pestañas de los datos de productos en la edición de productos de WooCommerce

Cómo renombrar las pestañas de los datos de productos en la edición de productos de WooCommerce

WooCommerce, como ya hemos visto en otros tutoriales, es una herramienta muy potente que pone a nuestra disposición una serie de funcionalidades para crear y gestionar nuestro propio e-commerce de manera muy sencilla.

En el apartado de configuración y ajustes de WooCommerce, disponemos del apartado ajustes y desde ahí podemos configurar muchas opciones del comportamiento de WooCommerce.

Pues bien, existe también otro apartado para realizar ajustes, en este caso ajuste de cada producto y este apartado lo tenemos disponible en el editor de producto como podemos observar en la siguiente imagen:

WooCommerce - cambiar nombre pestaña datos producto

Este apartado (Datos del producto) incluye diferentes campos para poder realizar ajustes de configuración de cada producto individualmente. Es decir, aquí ajustaremos cada uno de los productos por separado.

Por ejemplo, dentro de la pestaña «General» de «Datos del producto» podemos establecer o cambiar el precio del producto y este precio es específico para cada producto, ok?

Una vez sentadas las bases nos centramos en esta sección: Datos del producto.

En este apartado disponemos de varias pestañas accesibles desde la parte izquierda de este bloque como son: General, Inventario, Envío, Productos relacionados, Atributos y Avanzado.

Estas son las pestañas que WooCommerce crea por defecto pero es posible que algún plugin añada alguna otra pestaña para añadir funcionalidades extra a nivel de producto.

En un post anterior vimos cómo podríamos quitar o eliminar estas pestañas.

Vamos a trabajar cobre el mismo concepto y el mismo hook: «woocommerce_product_data_tabs«.

En este caso lo que haremos será seleccionar la petaña «Avanzado» y estableceremos tu propiedad «label» a «Experto» de la siguiente forma:

$tabs['advanced']['label'] = "Experto";

Por lo tanto, el código completo de este snippet sería:

Y el resultado lo podemos ver en la siguiente captura de imagen

WooCommerce - cambiar nombre pestaña datos producto

Esto lo podríamos hacer con todas y cada una de las pestañas de esta sección. A Continuación teneís una lista con las pestañas que tiene WooCommerce por defecto en Datos del producto:

  • [‘general’]
  • [‘inventory’]
  • [‘shipping’]
  • [‘linked_product’]
  • [‘attribute’]
  • [‘advanced’]

Cualquier duda u observación, dejadme un comentario y lo vemos.

Saludos muchísimo animo!

WooCommerce Snippet: Cambiar el título de las pestañas de producto

WooCommerce Snippet- Cambiar el título de las pestañas de producto

En un tutorial anterior vimos cómo ordenar las pestañas de la página de producto.

Continuando con «las pestañas» de la página de producto, en esta ocasión vamos a ver cómo podemos modificar o cambiar el texto del título de estas pestañas.

Como sabemos, WooCommerce establece por defecto «Comentarios» y «Descripción» a las dos pestañas que se activan con la instalación de este plugin.

Pues bien, nosotros/as por lo que sea, queremos modificar este título o texto de las pestañas a nuestro gusto por un título que nos atraiga más o con convenga más dependiendo de nuestras necesidades.

A continuación podemos ver una imagen en la que en la parte izquierda (Antes) los títulos de las pestañas son: «Comentarios» y «Descripción«.

En la parte derecha de la imagen hemos cambiado los títulos de estas pestañas por: «Valoraciones» e «Información«.

wc snippet cambiar titulo pestañas productos

Vamos a ver cómo hacer esto de una manera muy sencilla.

En primer lugar tenemos que utilizar un filter hook que en este caso será  «woocommerce_product_tabs«. Su propio nombre nos dice sobre qué elemento o elementos va actuar este hook, ¿verdad?

Pues bien, como siempre a la hora de trabajar con hooks, especificaremos una función que crearemos expresamente para que realice los cambios que queramos que en este caso es modificar los títulos de las pestañas.

Como digo, en primer lugar indicamos el hook con la función:

add_filter( 'woocommerce_product_tabs', 'oaf_wc_change_product_tabs_titles', 20 );

Muy bien, ahora vamos a crear la función «oaf_wc_change_product_tabs_titltes‘:

function oaf_wc_change_product_tabs_titles($tabs) {
 return $tabs;
}

Por el momento creamos la función e indicamos que recibe «$tabs«, que serán las pestañas con las que vamos a trabajar y que también devuelve el valor de $tabs una vez que hayamos modificado lo que nos interesa.

Ahora bien, como ya comenté en otro tutorial, $tabs es un array donde tenemos a nuestra disposición todas las pestañas con sus propiedades y valores. Lo que tenemos que hacer es identificar y seleccionar cada pestaña que nos interese y establecer la propiedad ‘title’ con el valor que queremos.

$tabs['pestaña']['title'] = 'Nuevo título';

Siguiendo la estructura anterior, para establecer el título «Información» en la pestaña «Descripción» (description), haremos lo siguiente:

$tabs['description']['title'] = 'Información';

Fácil, ¿verdad?

Y ahora para establecer el título «Valoraciones» en la pestaña «Comentarios» (reviews) haremos lo siguiente:

$tabs['reviews']['title'] = 'Valoraciones';

Ahora ya tenemos todo lo necesario.

A continuación tenéis el código completo de este Snippet:

Como siempre, este código lo podéis incluir directamente en el fichero «functions.php» de vuestro theme o crear un plugin.

Espero que os sea de utilidad.

Cualquier duda que tengáis sobre éste o cualquier otra cosa relacionada con los temas que trato en este blog, me la podéis hacer llegar a través del formulario de contacto o a través de las redes sociales.

Saludos y hasta la próxima!!

WooCommerce Snippet: Ordenar las pestañas en la página de producto

WooCommerce Snippet- WooCommerce Snippet- Ordenar las pestañas en la página de producto

Buenas.

Hoy os traigo un snippet (trocito de código) para ordenar las pestañas de la página de producto de WooCommerce.

Para que sepamos a lo que me refiero, pongo una imagen de dichas pestañas:

oscarabadfolgueira - petanias woocommerce producto

Seguramente sólo tengamos las dos que se muestran en la imagen, es decir: «Descripción» y «Comentarios«.

En este tutorial vamos a ver cómo ordenar estas dos en concreto. Si queréis que haga otro tutorial donde vamos cómo ordenar todas las pestañas que podamos tener, me enviáis un email a través del formulario de contacto y veremos lo que se puede hacer, ok?

Pues nada, como es típico, todo está en ingles. Me refiero al nombre de las pestañas. Por lo tanto para referirnos a ellas en el código, en lugar de «Descripción» y «Comentarios«, lo haremos como «description» y «reviews«.

Para referirnos a la pestaña «description» lo haremos a través del acceso al array como:

$tabs['reviews']

Ah, pero con esto no hacemos nada, ¿verdad? como lo que queremos es ordenar las pestañas lo haremos utilizando la propiedad «priority» del array de pestañas de la siguiente forma:

$tabs['reviews']['priority']

Ahora si, ahora accedemos a la propiedad de la prioridad y establecemos los valores que necesitemos.

Antes de establecer los valores de prioridad a cada pestaña, debemos recordar que se le asigna un valor numérico y cuanto mas pequeño sea el valor, más prioridad. Es decir que cuanto más pequeño sea el valor, antes aparecerá dicha pestaña.

Por consiguiente, vamos a poner la pestaña de comentarios en primer lugar y la pestaña de descripción en segundo lugar y para ello utilizaremos el siguiente código:

$tabs['reviews']['priority'] = 5;
$tabs['description']['priority'] = 10;

Muy bien, ahora sólo nos queda utilizar un action hook: «woocommerce_product_tabs» y crear la función que realizará los cambios.

A continuación pongo todo el código para que lo podáis incluir en el fichero «functions.php» de vuestro tema o incluso crear un plugin si os apetece.

Y para estar seguros, a continuación pongo la imagen con el cambio del orden de las pestañas realizado:

oscarabadfolgueira - pestanias woocommerce producto cambiado orden

Bueno, espero que os sea útil.

Saludos y hasta el siguiente…

Ir al contenido