Ep 40 | Un theme para WooCommerce con un sinfín de posibilidades
18 Jan 2017 · 17 min
Episode 40 of the WordPress Semanal podcast (host: Gonzalo Navarro) presents Storefront, the official WooCommerce theme, and explains how to use it to build and customize online stores. Gonzalo covers a free plugin-of-the-week (AJAX Layer Navigation), two free plugins to edit the Storefront homepage (Homepage Control; Storefront Homepage Extra Sections), and premium extensions including the Storefront Power Pack and paid child themes. He highlights Storefront’s tight visual integration with WooCommerce, its lightweight base, the extensibility via extensions/child-themes, time-limited subscriber giveaways (24 hours), and links to video demos and course resources.
Questions this episode answers
Episode 40.
Gonzalo Navarro.
January 18, 2017.
AJAX Layer Navigation.
24 hours.
Chapters
En el episodio 40 de WordPress semanal te enseñaré todas las posibilidades que ofrece el Theme Storefront para montar tu tienda online con WooCommerce. Además, durante 24 horas tienes un plugin premium de regalo. Vamos allá. Hola, hola, Soy Gonzalo de GonzaloNamarro es y bienvenidos a WordPress Semanal. Es el podcast en el que aprendes WordPress de principio a fin. Porque ya sabes, no hay mayor satisfacción que la de crear y gestionar tu propia página web con WordPress. Y yo estoy aquí para ayudarte a conseguirlo con este podcast, con el blog y por supuesto, con los cursos. Y hoy vamos a hablar de un tema muy interesante. Varios de vosotros me habéis dicho que intente hablar un poquito más de e commerce, así que tengo varios episodios preparados, no van a salir todos a la vez, pero sí poco a poco, y en el que vamos a tratar más cositas sobre e commerce, woocommerce y demás. Y hoy vamos a hablar de un Thing para woocommerce que tiene muchísimas posibilidades, ya lo veréis, más de las que parece. Y se trata de Storefront. Pero antes, como siempre, recordad que en Gonzalo es cursos, pues tienes todos los cursos sobre WordPress que ya he creado hasta la fecha, las descargas de plugins y Thing premiums y por supuesto soporte personalizado para todas las dudas que tengáis acerca de los cursos y de WordPress en general. De hecho, poco a poco, más que WordPress incluso, porque ahora estoy. Este mes va a salir el curso de Google Analytics, que lo estoy terminando de preparar. Así que iremos viendo también herramientas indispensables para alguien que gestiona una página web, ¿Vale? Da igual que esté hecha con WordPress, necesitamos también de otras herramientas para controlar todo y para gestionar todo de forma correcta. Y por supuesto, el curso de WooCommerce, que hoy vamos a hablar muchísimo de e Commerce y de WooCommerce. Pues también tenéis, por supuesto, el curso de cómo crear una tienda online con WooCommerce. Así que nada más, vamos allá con el episodio de hoy. Y antes que nada, como siempre, el plugin de la semana. Y Y es un plugin que te permite filtrar productos en WooCommerce de forma visual y mejorada. El plugin se llama AJAX Layer Navigation, es decir, navegación por capas con AJAX. AJAX es una forma de mostrar elementos que hace más rápida esa búsqueda. Por ejemplo, si estuviese hecho con JavaScript, habría que hacer una serie de peticiones y sería más lento. Entonces todo lo que esté hecho con ajax en general, entre comillas, se supone que es más rápido para tu web y al final mejor. Entonces, con este plugin lo que pueden hacer tus clientes cuando entran a tu tienda online es filtrar productos por las variables que tú hayas establecido antes, pero lo van a hacer de forma muy sencilla y muy visual. Tienen la posibilidad de elegir colores, tallas o cantidades. También pueden seleccionar desde un desplegable o ir marcando casillas. Entonces podéis echar un vistazo a la nota del programa, a la captura que os dejo de cómo se vería, por ejemplo, si tienen que elegir colores. ¿Primero, cómo lo configuras? Es una captura que está dividida en dos en la parte izquierda sale como tú lo configurarías, que vais a ver que es súper fácil, y en la parte derecha cómo lo vería esa persona que está navegando por tu tienda online, en tu web. Entonces los colores está muy bien porque ves los colores exactamente, entonces puedes marcar el color que quieres. Las tallas, por ejemplo, pues también son botones, puedes poner s de small, m de medium y l de large, o ponerlo en español, como tú quieras, eso lo puedes editar, así que está muy bien, es muy sencillito. El plugin cuesta 29 dólares, es un plugin premium, está creado por los de WooCommerce, pero durante 24 horas lo voy a regalar para todos los suscriptores, ¿De acuerdo? Solo durante 24 horas, así que si eres suscriptor puedes acceder a tu zona de suscriptor y en la pestaña de descargas, ahí lo tendrás disponible durante 24 horas, ¿De acuerdo? Eso en cuanto al plugin de la semana. Y ahora ya sí, vamos con el tema central, el tema principal del episodio de hoy, que es nada más y nada menos que un thing para woocommerce que tiene un sinfín de posibilidades. Y ese theme es Storefront, ¿Vale? Storefront es un thing gratuito para WooCommerce, creado por WooCommerce, bueno, por WooChims anteriormente y que ahora se llaman. La empresa ha pasado a llamarse WooCommerce. Y entonces, ¿Qué de bueno tiene esto? Pues al estar creado por ellos mismos, la integración lógicamente con WooCommerce va a ser perfecta, sobre todo a nivel visual, porque realmente a nivel de funcionamiento WooCommerce se integra perfectamente con casi todo, está muy bien hecho y además todos los teams o los mejores que están pensados para e commerce pues hacen que esa integración sea buena. Lo potente de aquí es que visualmente va a casar perfectamente. Entonces, ¿Qué más características tiene este theme que lo hacen que destaque tanto? Pues primero tiene una base limpia sobre la que tú puedes montar tu tienda online, es un thing que es muy liviano, es muy limpio, está muy bien hecho y es una muy buena base para a partir de ahí tú montar tu tienda online. En cuanto a diseño y en cuanto a funcionalidades, una cosa que me gusta, que destaca cuando tú vas a ver la web de WooCommerce y vas a ver Storefront, que es un poco donde te ponen todas las características del Thing y qué cosas buenas tiene, tiene un apartado en el que ellos mismos te destacan, dice no tiene extras pesados como shortcodes, sliders o plugins, builders estos de de diseñar, maquetar, te dice que no lo lleva integrado y eso me encanta que lo destaquen porque hoy en día es una cualidad, porque por ejemplo en Themeforest y en un montón de marketplaces que te venden themes, estos themes están hechos con plugins integrados y eso es un rollo, porque si tú no quieres ese plugin te tienes que aguantar, o sea, viene ya con los plugins integrados, no los puedes desactivar, tienes obligatoriamente que utilizarlos. Mientras que aquí te dice que no viene nada ni con shortcodes, ni con sliders, ni con nada extra añadido, que es todo súper liviano. ¿Pero qué pasa? Tú dices ya, ya, pero es que yo necesito cosas. Bueno, no pasa nada, te lo ofrecen porque tienen la posibilidad de extensiones para incrementar las posibilidades de la web, además incrementarlas de forma sustancial, ¿Vale? Así que vamos a centrarnos en eso, en cómo partiendo de la base de Storefront, que es una cosa liviana, una cosa muy limpia, podemos darle más posibilidades, cambiar el aspecto y hacer de Storefront un theme para e commerce personal y muy chulo. Vale, primero vamos a hablar de posibilidades para editar la home, la página de inicio con plugins gratuitos. Vamos a centrarnos primero en los plugins gratuito y para esto tienes dos plugins que están muy bien, uno se llama Homepage Control, que está creado por los propios de WooCommerce y esto pues te permite reordenar o inhabilitar algunos componentes y algunas partes de la página de inicio de la Homepage. Entonces, por ejemplo, en Storefront tú puedes asignar una página de inicio y te van a salir arriba, por ejemplo, los productos destacados, debajo los productos en oferta y debajo, pues productos, no lo sé, otro tipo de productos. Y eso tiene un orden, porque WooCommerce te lo pone así. Pues con Homepage Control tú puedes, bueno, primero hacer que desaparezca lo que no quieres. Imagínate que tú no quieres que aparezcan productos en oferta, o al menos no quieres que aparezcan ahora mismo, sino que quieres que aparezcan pues en otra fecha. Pues primero lo puedes deshabilitar, que esa sección no aparezca. Segundo, puedes reordenar eso, puedes hacer que aparezca primero las categorías, por ejemplo, después los productos destacados y después otra sección. Pues todo esto lo puedes hacer con Homepage Control. Y luego el siguiente plugin gratuito se llama Store from Homepage Extra Sections. Entonces, ¿Qué te permite esto? Añadir secciones extra para la Homepage, y te añade la posibilidad de poner un slider y también te añade unos widgets nuevos que también puedes colocar. Y estas secciones se integran perfectamente con el primer plugin que te he comentado, el Homepage Control. Es decir, dentro del plugin, dentro de las opciones del plugin de Homepage Control, vas a ver las secciones extra que te aporta este segundo plugin que te recomiendo, que este segundo no está hecho por la gente de Woozims, de WooCommerce, pero sí que se integra perfectamente con este plugin que os comento. Así que la combinación de estos dos, para editar sobre todo la home de forma gratuita y con bastantes posibilidades, está muy muy bien. Y después podemos editar el theme de forma completa, el theme entero, con un plugin premium de también la gente de WooCommerce, que es una pasada, se llama Storefront Power Pack. Y esto viene antes eran distintos plugins, distintas extensiones, y cada uno hacía una cosa. Con una podías diseñar la cabecera, con otra podías editar la página de checkout, con otra podías hacer otra cosa. ¿Y Qué ha hecho WooCommerce? Las ha juntado todas, las ha mejorado, porque ahora están mucho mejor que antes, tienes más control sobre todo, y las ha juntado en el Storefront Power Pack. ¿Y qué cosas puedes hacer con esto? Bueno, os lo voy a explicar, pero lo mejor es que vayáis a las notas del programa del episodio 40, que es el episodio de hoy y veáis el vídeo que os dejo, que está creado por la gente de Storefront y está súper chulo. Lo que hacen es coger una plantilla en blanco de Storefront, una página de pruebas y una página que ya existe, una tienda online muy famosa que se llama ASOS, no sé si la conocéis, que es de ropa, yo creo que es bastante conocida, yo he comprado ahí de hecho y creo que es bastante conocida. Entonces lo que hacen es, te dicen, vale, vamos a coger esta tienda que es muy famosa, tal, tal, tal, y vamos con el Storefront Powerpack, vamos a editar nuestro theme de Storefront para que se parezca lo máximo posible a esta otra y está muy bien, dura un poquito más de 15 minutos y puedes ver cómo pues de forma súper sencilla, moviendo cosas, haciendo clics, consigues un aspecto muy muy muy parecido a la otra página web, que ya digo, es una página web muy popular y muy famosa, así que. Así que ahí vais a ver perfectamente, además ni siquiera enseña todas las posibilidades, enseña solo una de las características que es la parte de diseño así más visual, así que os lo recomiendo. Pero bueno, básicamente puedes diseñar la cabecera de tu tienda online como quieras y además lo haces arrastrando y dándole a cada cosa la medida que tú quieres. Por ejemplo, imaginaos la cabecera, pues es la parte de arriba de nuestra página principal, entramos a la página y la parte de arriba donde tenemos el logo, aquí a la derecha seguramente esté el carrito y en medio a lo mejor podemos poner algo para buscar, como es una tienda online, pues para buscar productos, pues tú esos espacios los puedes controlar como tú quieras, debajo a lo mejor tienes un menú y a la derecha otro menú, pues puedes decir cuánto va a ocupar cada cosa, cómo va a estar de a la derecha, cómo va a estar de al centro, cómo va a estar a la izquierda, es decir, la alineación también y todo con control milimétrico, simplemente arrastrando y tú vas viendo cómo queda, está súper bien, en el vídeo lo veis, en el vídeo se ve cómo lo hacen, pero después también puedes editar el resto de la página, puedes añadir estilos y personalizar la parte que tú quieras, por ejemplo, haces clic en una zona y le añades unos estilos y lo personalizas, pues le das el color que quieras o haces lo que quieras con ello. Además, no sólo la home, también puedes personalizar y editar las páginas de producto, es decir, algo muy importante cuando alguien le da un producto y va a esa página de ese producto, eso también tienes control sobre ello y control de lo que se va a mostrar, lo que no se va a mostrar y un montón de posibilidades. Y luego cualquier cosa, si quieres personalizar botones, cambiarle los colores, hacer lo que tú quieras o incluso elementos estructurales de tu propio thing que no sean los botones, sino ya cosas más estructurales como el área de los widgets o el fondo de la web. Otra cosa también muy chula que puedes editar la página de checkout, esto es importante porque el checkout, si no la más importante, casi casi la más importante de tu web, porque la persona ya le ha dado a comprar, ya lo tienes ahí, ya está a punto de cerrar el tema y ahora va y se encuentra con una página de checkout o fea o que no está bien explicado los pasos que tiene que seguir o que tiene que hacer un millón de cosas, pues esa persona se va. Entonces la posibilidad de editar esa página de checkout y tú hacer los cambios que quieras y ordenar las cosas como quieras es muy poderosa. Pues también lo puedes hacer con esta extensión Storefront Power Pack para Storefront, ¿Vale? Cuesta creo que unos 59 dólares la licencia para una web, así que. Así que con todo lo que puedes hacer está bastante bien de precio. Luego si quieres para más webs pues ya va incrementando el precio por supuesto. Y esto es solo una extensión, es un pack que te permite hacer un montón de cosas, pero es que Torfront también tiene otras extensiones gratuitas y premium de las dos, como por ejemplo hacer sliders, poner opiniones de clientes, que esto está muy bien, es muy típico para una tienda online, poner tablas de precios también, algo muy típico y también te permite hacerlo de forma muy chula. Otra extensión para personalizar el blog, hasta ahora hemos estado hablando de personalizar zonas, pero también el blog es una zona que puedes personalizar y puedes darle vida, puedes ponerlo de una forma diferente. Hoy en día todos los blogs son muy parecidos, pues aquí puedes tener un poquito de imaginación, pero bueno, hay un montón. Entonces lo que os dejo es, os dejo el link para que veáis todas las hay gratuitas y de pago y nada, le echáis un vistazo, varían los precios, hay algunas chiquititas que hacen cosas más sencillas, otras más potentes y en general está muy bien esto en cuanto a extensiones, es decir, tenemos nuestro thing y ponemos una serie de extensiones y podemos hacer cosas, pero también tenemos temas hijo, o sea que funciona como una especie de framework en el que le puedes instalar un child theme por encima, es decir, una piel diferente. Si por ejemplo tú no te quieres poner a editar desde cero, pues el aspecto que trae Storefront por defecto con por ejemplo el Storefront Power Pack que os acabo de comentar o con otras extensiones, pues simplemente puedes ponerle un child theme que que le va a cambiar el aspecto totalmente, incluso a partir de ese child theme tú puedes utilizar Storefront powerpack y editar ese child theme, o sea que más poderoso todavía, le cambias el aspecto a lo que tú buscas, así más o menos y luego vas editando eso poquito a poco con Storefront powerpack por ejemplo, si hicieses webs para clientes, tener esto es una pasada porque puedes hacer webs totalmente distintas, webs muy chulas, puedes controlar prácticamente todo el aspecto y sin tocar una línea de código, simplemente con unas extensiones, unos child themes y puedes hacer webs potentísimas y además tienes la seguridad de que son muy buenas y de que van perfectamente con WooCommerce. También os dejo el link para que veáis todos los child themes que hay, hay dos gratuitos y luego los demás son de pago que cuestan 39 dólares que también están bastante bien de precio. Así que como veis Storefront tiene muchísimas posibilidades. Primero es un Thing muy bueno y si es para una tienda online es prácticamente perfecto porque Su integración con WooCommerce es una pasada, es genial, es decir, técnicamente por funcionalidades ya lo tienes porque realmente lo que te hace todo en una tienda online, la venta, compra toda la gestión esta es woocommerce y sus extensiones, o sea que en cuanto al aspecto técnico lo tienes cubierto porque La integración con WooCommerce es perfecta. Después, ¿Qué es lo que ya cambia de una cosa a otra? Pues el aspecto que tú puedes decir ya, pero es que no voy a hacer todas las tiendas online con el aspecto de Storefront, no, por supuesto que no, por eso tienes todas esas extensiones que te permiten alterar el aspecto, diseñar a medida y hacerlo súper chulo y encima tienes child themes que puedes cambiar el aspecto radicalmente de ese theme, entonces por eso me parecía tan interesante este episodio porque incluso puedes ser una cosa en la que te especialices, incluso una idea de negocio, de servicio, de creación de tiendas online con WooCommerce y Storefront, así que me parecía interesante compartirlo con vosotros. Luego recordad también que tengo el curso de WooCommerce en la zona de los cursos, así que utilizando Storefront, utilizando un curso de WooCommerce, que aprendes a utilizarlo, pues ahí ya lo tendrías todo. Si de todas formas queréis que haga un curso sobre cómo diseñar una web, digamos para ecommerce, utilizando Storefront y utilizando todo esto que he comentado, el Storefront Power Pack, incluso un Child Theme y todo esto, pues podría quedar un curso súper chulo de ver cómo diseñar, ya sería más de diseño y cambiar el aspecto, un e commerce. Así que si os interesa me lo comentáis. Y nada, os dejo todos los links que os he comentado, si te quieres apuntar al curso de WooCommerce te dejo el link a la nota del programa para que te suscribas, si ya estás suscrito pues puedes ir y echarle un vistazo. Y los links a todo lo que he dicho, las extensiones, los child themes, también los links a los plugins gratuitos que os he comentado al principio, que también se puede hacer todo esto de forma gratuita, tienes menos control, puedes hacer menos cosas, pero es un primer paso. Además Storefront, ya sabéis que el Theme Storefront es gratuito. Y por supuesto el vídeo, el vídeo de verdad os recomiendo que lo veáis, está muy chulo y veis cómo convierte una web, el thin normal, cómo lo hace, súper parecido a una web que ya existe, que es muy popular y que es un e commerce. Y recordad el regalo, la extensión para WooCommerce, para filtrar productos en WooCommerce de forma visual, que veis los colores, veis los tamaños o las tallas, dependiendo del tipo de producto que vendáis y podéis hacer cosas más personalizadas, porque los colores y los tamaños y las tallas pues están pensados para un tipo de producto, pero luego tú puedes poner lo que quieras porque tiene también, cuenta también con casillas y desplegables para marcar las opciones que quieres, es decir, esa persona mientras está comprando pues tiene un tipo de producto y dice vale, yo lo quiero en este color, lo quiero en este tamaño o lo que sea, entonces te da muchas posibilidades. Es de la gente de WooCommerce con lo que va a casar perfectamente y lo tenéis de forma gratuita durante 24 horas por ser suscriptores. Así que nada más, si te ha gustado el episodio de hoy, quieres ayudarme a que siga creando contenido como éste, te agradecería muchísimo una valoración en iTunes porque me ayudan un montón. Además, no tardas nada, te dejo el link en la nota del programa, simplemente le das, le das a reseñas y dejas tu valoración. Y si me escuchas desde iVoox también muchísimas gracias por tus comentarios, por seguirme y por tus me gusta. Así que nos seguimos escuchando. Adiós.
More from Gonzalo
518 | Redes sociales, precios personalizados, audios desde Drive y temas de bloques (Q&A)
513 | Por qué sigo usando estos plugins después de tantos años (y cuáles he abandonado)