296 | Gutenberg para WooCommerce

En el episodio 296 de WordPress semanal valoramos qué aporta el editor de Gutenberg para el diseño de una tienda online con WooCommerce. Vamos allá. Hola, hola, soy Gonzalo, de GonzaloNavarro es y bienvenidos a WordPress Semanal, el podcast en el que aprendes WordPress de principio a fin. Porque ya lo sabes, no hay mejor inversión que la de aprender a crear y gestionar tu propia web con WordPress. Y hoy vamos a hablar, como te comentaba, de qué te puede aportar utilizar Gutenberg cuando tienes una tienda online con WooCommerce o cuando la vas a hacer. En concreto vamos a adentrarnos en si te beneficia realmente utilizar el editor de Gutenberg frente a otras posibilidades. Hablaremos, porque es importante, de la relación entre Gutenberg y el tema de WordPress que utilices. Después comentaré los que trae WordPress de forma nativa para WooCommerce o que digamos incluye WooCommerce sin añadir nada extra. Y luego te hablaré del que me ha parecido el plugin más completo para añadir funcionalidades extra cuando quieres diseñar tu tienda online y utilizas el editor de Gutenberg. Estos cuatro grandes puntos en un momentito. Pero antes, como siempre, novedades. ¿Qué está pasando en Gonzalo Navarro? Es esta semana y hay un montón de contenidos, como siempre. Por un lado, el curso más reciente publicado es el curso de WP Media Folder. Este es el curso en el que aprendes a mejorar la librería multimedia, es decir, la zona donde tienes tus imágenes, tus documentos. Toda la parte de administración de elementos multimedia se puede mejorar y mucho. De hecho hay un montón de gente que quiere mejorarla, que quiere al menos poder ordenar mejor sus elementos multimedia. Pues si buscas eso, en este curso vemos el mejor plugin para ello. Después, el último curso que se publicó, ya sabéis, cada martes sale un curso nuevo de la zona código, un curso nuevo no, perdón, un vídeo nuevo, que en este caso es el vídeo 246, y en él aprendes a mostrar la fecha de registro de cada usuario en la página específica de ese usuario, en el perfil de cada usuario. De modo que si tú vas a la parte de administración, te vas a usuarios y quieres saber el día en el que se registró en tu web ese usuario, pues entras y lo vas a tener ahí mostrado. Esto lo hacemos con un poquito de código que te enseño a copiar y pegar y que no tienes que saber Ya lo sabes, nada de programación, nada de desarrollo, simplemente sigues los pasos del vídeo y lo tienes. Todo esto que estoy comentando lo tienes disponible en las notas del episodio a las que puedes ir escribiendo en tu navegador Gonzalo Navarro es 296 y ahí también podrás encontrar el enlace al plugin de la semana, que no es otro que Extra Product Options for WooCommerce. Este plugin, como su nombre indica, te da opciones para que añadas campos personalizados en las páginas de producto. Esto es algo que me soléis preguntar bastante por el soporte y que os suelo remitir a este plugin porque me parece el más completo. Está activo en 20.000 webs con WordPress y te permite mostrar más cosas, más opciones en la página individual de un producto. Puedes poner por ejemplo, texto extra, puedes poner campos ocultos, puedes poner contraseñas, puedes poner. Tiene un campo para número, otro para teléfono, para checkbox, para los típicos puntitos de listas, para seleccionar colores. En fin, un montón de opciones para que puedas mostrar información extra de tus productos de forma sencilla. Básicamente añadir campos personalizados a tus páginas de productos. Recuerda que te lo dejo en las notas del episodio Gonzalo Navarro es 296 y te recuerdo el nombre del plugin, Extra Product Options for WooCommerce. Fantástico. Pues ahora sí, vámonos con el tema central de este episodio, el editor de Gutenberg para WooCommerce. Y vamos a comenzar con la pregunta más importante, que es si te beneficia utilizar Gutenberg cuando tienes una tienda online con WooCommerce o cuando la vas a crear. Bien, primero vamos a recordar qué es Gutenberg para que no mezclemos conceptos ni nos liemos con nada. Gutenberg no es más que el editor que sustituyó al clásico. Antes en WordPress se editaban los contenidos de una forma y ahora se hacen con el editor de Gutenberg, que no es otra cosa que un editor en base a bloques. Vamos añadiendo un bloque y cada bloque tiene sus opciones, pero no tiene efecto en nada más. Es decir, no va a afectar al funcionamiento de tus plugins de ecommerce, en este caso WooCommerce, ni va a afectar al SEO de tu tienda online, ni va a afectar a nada. Realmente, para tener una tienda online con WooCommerce o incluso con otro plugin para crear tiendas online, es indiferente que utilices el editor clásico, el antiguo, el editor nuevo que es Gutenberg, o incluso un Page Builder aparte como pueda ser Elementor, Divi o el que más te guste. Pero sí que es cierto que si pasas del editor clásico a utilizar Gutenberg, pues puedes obtener pequeñas mejoras en cuanto al diseño, y es de lo que vamos a hablar básicamente en este episodio. Pero antes me gustaría también mencionar el impacto de Gutenberg en los teams de WordPress, es decir, si tú te estás planteando crear una tienda online o ya tienes una tienda online de hace tiempo y no utilizabas Gutenberg y quieres empezar a utilizarlo, pues tienes que ver que el tema de WordPress, el theme que utilices, sea compatible con Gutenberg. Esto, bueno, ya creo que es menos relevante, porque cada theme que quiera seguir en el mercado, si no es compatible con Gutenberg, pues lo va a tener complicado, salvo que sea uno de estos temas de Thin Forest que traen su propio constructor y que van un poco a su bola, que hacen lo suyo y se salen un poco de los estándares de WordPress, pero salvo que sea eso, prácticamente los themes más populares son compatibles con Gutenberg y no sólo eso, sino que lo aprovechan, como ahora veremos. Entonces eso es lo primero que tienes que ver. Y luego, como te decía, estos themes pueden incluso darte una mejor experiencia, ¿Por qué? Porque pueden traer diseños y estilos ya preparados entre los que puedes elegir, y estos diseños y estos estilos pueden estar hechos con el editor de Gutenberg, de manera que sin añadir nada extra, aunque ahora veremos que se pueden también añadir plugins extra, como digo, pues ya tienes diseños muy chulos. Diseños preparados, ¿Por qué? Porque el editor de Gutenberg, a diferencia del editor clásico, te permite utilizar bloques muy interesantes para facilitarte el diseño, como puede ser poner contenido en columnas, añadir botones, poner divisores para marcar diferencia entre una zona y otra cuando estás diseñando alguna página dentro de WooCommerce, utilizar algunos bloques muy chulos visualmente, como puede ser el Cover Image o imagen de portada, que básicamente te deja poner una imagen grande como de fondo a pantalla completa y luego encima puedes poner texto o puedes poner una llamada a la acción, o el potente Query Loop, que básicamente lo que te permite es recoger contenidos y mostrarlos, por ejemplo, productos. Así que si eliges un theme, un tema de WordPress o ya lo tienes de antes que es compatible con WooCommerce, no solo te va a permitir utilizar este editor para diseñar tus páginas de venta, por ejemplo, sino que además alguno de ellos puede puede traer diseños prediseñados. Ejemplos generatePress, del que tenéis un curso, Astra, Ocean, WP. Todos estos temas que son bastante populares y que siempre han estado muy enfocados a ofrecerte plantillas prediseñadas de constructores visuales como Elementor, Beaver Builder u otros, ahora o desde hace tiempo se subieron también al carro de Gutenberg y te ofrecen plantillas y secciones prediseñadas en base a Gutenberg. Bien, vamos a hablar ahora de qué te ofrece WooCommerce en combinación con el editor de Gutenberg. Sin que añadas nada nuevo, te ofrece 20 bloques específicos para WooCommerce. No voy a mencionar los 20, pero básicamente son bloques que tú puedes añadir en cualquier lugar para, por ejemplo, mostrar una relación de productos por categoría, por etiqueta, por atributo o los que quieras seleccionar tú específicamente. También tienes bloques para permitir a tus visitantes filtrar entre productos, filtrar por precio o por otras muchísimas opciones. Tienes otro, por ejemplo, para mostrar valoraciones, otros para mostrar productos más recientes o más vendidos. En fin, muchísimos. Para verlos simplemente tienes que ir a editar cualquier página con el editor de Gutenberg y cuando añadas un bloque nuevo, si escribes en el buscador de WooCommerce te van a aparecer los 20 que tienes disponibles, 20 en el momento de grabar este audio. No sé si más adelante, pues habrá más, sí. Vale, pues con todo esto tenemos muchísimas opciones, pero siempre nos vamos a encontrar con limitaciones. Por ejemplo, ahora mismo tú no puedes editar la página de un producto con el editor de Gutenberg. Tampoco puedes editar la página de tienda con el editor de Gutenberg. Sí que puedes crear páginas nuevas, utilizar estos bloques que te he comentado y luego a lo mejor hacer una redirección para sustituir a otra página. Pero te faltan cositas. Por ejemplo, si usas Elementor Pro, pues puedes sustituir la página de tienda. Por otra parte, puedes crear plantillas para las páginas de producto y también cambiar su aspecto, pero con Gutenberg así de forma nativa, No se puede. ¿Existe opción de controlar esto utilizando Gutenberg? Sí, existe opción, y yo diría que el plugin más completo de los que he podido ver para esto se llama Product X. Me resulta extraño que no esté activo en tantas webs como podría estar, porque apenas está activo en 1000 webs, pero hace muchísimas cosas. Por ejemplo, te permite diseñar una página de tienda a medida, te permite diseñar las páginas de producto, te permite diseñar otras páginas de archivo como pueden ser las de categoría de un producto. Y luego te trae bloques avanzados como puede ser el de Query. Query es el que te permite recoger los productos y mostrarlo, pero este trae muchísimas más opciones porque el que viene de base con Gutenberg es muy básico. Tienes otro bloque para filtrar, otro bloque de filtrado mucho más avanzado que los que te trae el propio WooCommerce. Y luego para mostrar los productos tienes muchísimas opciones en formato lista, en formato grid, en formato slider, como compaginación. Pero una de las cosas más potentes de este plugin es que puedes añadir plantillas prediseñadas tanto para la tienda como para secciones específicas donde quieras mostrar una relación de productos o incluso para la propia página de producto. Así que convierte, digamos, el editor nativo de WordPress que es Gutenberg, en algo que va más allá, un poco lo que sí podemos hacer con constructores visuales aparte, como los ya mencionados, Elementor, etc. Así que si tu idea es diseñar una tienda online y no quieres añadir un constructor extra, yo diría que la combinación del editor nativo de Gutenberg con un plugin como este. Hay muchos más, si ponéis Gutenberg WooCommerce en la página oficial de plugins de WordPress, vais a ver que hay muchísimos, pero yo considero que este es de los más completos. Por cierto, si queréis un curso en esta línea, ya sabéis que los que estáis suscritos tenéis una parte en vuestra cuenta de sugerencias, ahí me podéis sugerir lo que queráis. Y bueno, y luego por supuesto, este plugin pues tiene una opción, una versión premium con muchas más opciones. Así que en definitiva, si tú quieres utilizar el editor de Gutenberg, no te va a aportar nada negativo en cuanto a tu tienda online. Si no lo quieres utilizar, tampoco te va a aportar nada negativo en cuanto a tu tienda online. Y ya has visto cómo puedes realmente aprovecharlo. Y además esto irá a mejor conforme avance Gutenberg tendremos más opciones, se podrá hacer mucho más y espero que este episodio te sirva de punto de partida para poder diseñar tu tienda online con mucho más control y y en base al editor nativo de WordPress. Te voy a dejar enlaces muy relevantes con esto. Te voy a dejar enlace al curso de WooCommerce, te voy a dejar enlace al curso del editor de Gutenberg, que lo renové hace bastante poquito. Por supuesto, al plugin que te he mencionado, Product X, te lo dejo también en la parte de contenido recomendado. Y luego las novedades, el curso nuevo, el vídeo de la zona, código nuevo, al que ya sabéis podéis acceder si sois miembros en Gonzalo Navarro es. Tenéis acceso a más de 60 cursos ya publicados, más de 240 vídeos de la zona código, contenido nuevo cada semana y soporte personalizado directamente conmigo para resolver las dudas del día a día. Y además, ahora comienza una promoción por Navidad que se llama Regala o regálate formación, con la que si queréis regalar a alguien la posibilidad de aprender un oficio o regalar conocimiento y mejora de habilidades, en definitiva, regalar formación y soporte de WordPress, pues a tus amigos, a tus familiares o a compañeros, pues podéis hacerlo con un descuento de dos meses contratando un año de formación. Sí podéis acceder directamente a la oferta yendo a gonzalonabarro es barra regalanavidad, de nuevo gonzalonabarro es regalanavidad, sí, ahí vais directamente a la oferta con el descuento de dos meses ya aplicado y lo podéis comprar para vosotros si queréis tener este descuento de dos meses o para regalarle un año de formación a quien queráis. Nada más por este episodio. Por último, pedirte un pequeño favor. Si te ha gustado, si piensas que este episodio suscríbete, le puede ayudar a alguien, pues te agradecería mucho si puedes compartirlo en tus redes sociales o tomar cualquier acción que puedas un comentario en Ivoox, un me gusta, una valoración en iTunes o en Apple Podcast, lo que sea que se pueda hacer en Spotify. Y en definitiva, cualquier acción que puedas tomar, ya sabes que te lo agradezco muchísimo. Nada más por este episodio. Nos seguimos escuchando. Adiós.