103 | Child themes para crear tiendas online con WooCommerce

En el episodio 103 de WordPress Semanal hablamos de algunos de los mejores child themes de Genesis, Storefront y Divi pensados para crear tiendas online con WooCommerce. Vamos allá. Hola, hola, soy Gonzalo, de Gonzalonabarro. Es y bienvenidos a WordPress Semanal, el podcast en el que aprendes WordPress y de principio a fin. Porque ya sabes que no hay mayor satisfacción ni mejor inversión que la de crear y gestionar tu propia página web con WordPress. Y hoy hablamos de una parte muy importante dentro de esto de la creación de webs con WordPress, que es crear un e commerce, que en este caso, por su gran capacidad y también por falta de competencia, cuando hablamos de crear una tienda online o un e commerce con WordPress, también tenemos que hablar de WooCommerce. Y en concreto vamos a hablar de la elección de un tema hijo de un child theme para la creación de esa tienda online que quieras hacer con WooCommerce. Y lo voy a hacer dividiendo un poco los contenidos en tres partes. Por un lado, los child themes de Genesis, que están pensados para funcionar con WooCommerce. Por otro lado, child themes de Divi, que a lo mejor alguno de vosotros no lo sabéis, pero también existen child themes para Divi. Hablaremos de si es una buena opción, si no. Y también por último, aunque no por ello menos importante, sino quizás todo lo contrario, es Child themes de Storefront. Y aquí también comentaré si creo que es buena idea coger un child theme o no hay. Así que creo que va a ser un episodio bastante interesante para aquellos que tengáis en mente crear una tienda online o que ya la estéis creando. ¿Pero antes, como siempre, qué está pasando en Gonzalo Navarro es esta semana? Pues como cada semana, un nuevo vídeo de la Zona Código. Ya sabéis que la Zona Código es esa parte del área para suscriptores donde os enseño semanalmente todos los martes, cómo hacer cosas en tu web simplemente por código, sin plugins ni nada. Pueden ser cosas de funcionamiento, cambiar el funcionamiento de algunas cosas de tu web, puede ser cosas de de diseño, es decir, por CSS. Pero en cualquier caso son detalles, son modificaciones que vas a hacer sin tener que tener idea alguna de código. ¿Simplemente sigues exactamente lo que yo hago en el vídeo, copias, pegas y lo tienes, vale? Y en este caso te enseño a hacer columnas desiguales con CSS en WordPress. Ya tengo algunos vídeos en los que te enseño a hacer columnas iguales es decir, pues si quieres dividir tu contenido en tres columnas, en dos columnas o en las que sean, pero claro, por ejemplo, si es dos columnas, normalmente lo que tenemos es el 50% para una columna y el 50% del espacio para otra columna, o si son tres, pues 33% y así sucesivamente dependiendo del número de columnas que quieras. Ahora, ¿Qué pasa si quieres que esas columnas sean desiguales, que una ocupe más espacio que otra para poder así hacer diseños o maquetaciones de tu contenido mucho más chulas, mucho más versátiles y que además por supuesto sea responsive, que si yo hago la pantalla más pequeña no me quede ahí todo descuadrado? Pues esto es lo que vemos en este vídeo de la zona código, que es el vídeo 54, es decir, ya vamos, ya tenemos 54 vídeos sobre cómo modificar tu web directamente por código, así que os dejo el enlace en las notas del programa. Y saltamos ahora al plugin de la semana, que es para prevenir el caché del navegador. ¿Y esto qué quiere decir? Bueno, pues seguramente te ha pasado que haces un cambio por CSS en tu web, te vas al style CSS de tu child theme, haces un cambio y luego te vas a la web y ves que ese cambio no se ve, no está reflejado ahí. Pues puedes pensar un montón de cosas si lo has hecho mal, pero rápidamente te darás cuenta que es por el caché, ya sea a nivel del servidor, por un plugin de caché que tengas instalado o por el propio navegador. Y esto es precisamente lo que evita este plugin que se llama Prevent Browser Catching, prevenir el caché del navegador. Y cuando instalas el plugin, pues te trae, es un panel con unas pequeñas opciones, muy sencillito y te permite hacer pues algunas cosas para que se actualice la versión de tus archivos CSS y JavaScript, que es digamos los que editas para modificar la parte frontal de la web, lo que se llama el frontend. Puede puedes elegir opciones, por ejemplo, para que cada vez que recargues el navegador se coja la última versión de ese archivo CSS y que el navegador no recoja la que tiene guardada en caché, que este es el mayor problema y lo que siempre suele suceder cuando ves que los cambios no se reflejan en tu web. Así que básicamente cuando estés en pleno desarrollo o retocando tu theme, pues usas este plugin y se va a acabar aquello de tener que borrar la caché del navegador, tener que abrir una pestaña de incógnito para ver si se ven los cambios o no, de probar incluso abrir otros navegadores para ver si en esos navegadores ves los cambios, incluso hay veces que nada de eso funciona y tienes que irte a otro ordenador para probar si en ese otro ordenador funciona o intentar acceder desde el móvil, en fin, muchas veces te vuelves loco y quieres hacer un par de retoques, unos pequeños cambios y el caché no te deja ver esos cambios y no estás seguro si está funcionando, si no está funcionando. Así que este plugin para eso es fantástico, lo he descubierto hace poquito y ya lo estoy utilizando, me parece genial. Eso sí, una vez termines con los retoques, con los cambios, o desactivas el plugin o al menos quita la opción esa de que se actualice la carga de los archivos cada vez que se actualiza el navegador, porque si no esto va a afectar negativamente a tus usuarios, ¿Vale? Porque se va a estar cargando todo de nuevo y la gracia del caché es que cada vez que un usuario entre de nuevo a tu web, pues tarde menos en cargar tu web, ¿Vale? En fin, un plugin fantástico, os lo dejo en las notas del programa. Este es el episodio 103 y el plugin se llama Prevent Browser Catching. Y ahora ya sí, vamos con el tema central del programa, Child Streams para woocommerce de Genesis, Divi y Storefront. Primero vamos a empezar por lo más genérico o la duda que te puede entrar al principio de todo, que es si deberías comprar un child Theme o bueno, también los hay gratuitos, o mejor crear el tuyo propio, porque son básicamente las dos opciones. Un child Theme tienes que crearlo sí o sí, Os dejo un tutorial en el que os explico dos formas de crearlo, una de forma manual y otro utilizando un plugin, ¿Vale? Pero independientemente de eso, de que sí o sí tienes que crear un Child Theme, ¿Es mejor que lo vayas modificando tú mismo? ¿Es decir, hagas una copia del theme padre, que eso sea el child theme y ya sobre eso lo vayas modificando, o es mejor comprar o buscar algún child theme para lo que estés usando? Pues como te imaginarás, depende, sobre todo va a depender del padre que uses, del theme padre que vayas a utilizar, pero también por supuesto de tus conocimientos de código o de si usas un maquetador visual. Ahora está muy de moda utilizar maquetadores visuales para todo, pues en ese caso puedes maquetar tu propio child theme, como digo, con un constructor visual. Pero en el caso de que quieras partir de una buena base, de que veas un theme por ahí, un child theme en este caso que te guste mucho, pues puedes comprarlo, puedes instalarlo como un child theme, ya sea de Genesis, de Divi o de Storefront. Y luego a partir de ahí, pues ya sí puedes ir haciendo algunas modificaciones, si usas un constructor visual, pues con el constructor visual, si sabes CSS, pues con CSS. Y hoy vamos a hablar precisamente de eso. Opciones muy interesantes y 100 % compatibles con WooCommerce para los que usáis Genesis, Divi o Storefront, sí vamos a empezar con child themes de Genesis aptos para woocommerce o que están bien preparados para crear una tienda online con WooCommerce. ¿En el caso de Genesis, esto de crear tu propio child theme es posible, pero ya sí que tienes que tener más conocimientos de código o bueno, también por supuesto puedes utilizar un constructor visual, pero Genesis necesita obligatoriamente, como ya sabrás, me imagino, que instales un child theme para que? Para que funcione, para que puedas utilizarlo. ¿Qué pasa? Que tienes el Genesis Sample Theme, que es el que te viene cuando compras Genesis y que es, digamos, un thing súper básico sobre el que tú puedes trabajar para crear tu propio child theme o no, lo puedes dejar tal como está porque funciona perfectamente, tiene lo básico para que tampoco sea feo, de hecho ahora han sacado una versión actualizada y está muy chulo, tiene muy buena pinta, ¿Vale? Pero te trae lo básico y luego tú, si sabes código o si has visto el curso de Génesis y has visto, pues que hay herramientas que te permiten modificarlo sin realmente tener muchos conocimientos de código, incluso muchas cosas sin saber nada de código, también os dejo por ahí el enlace al curso de Génesis, que sé que es uno de los más populares, pues como digo, puedes modificar el theme, digamos, básico que te viene o puedes elegir uno de los cientos de child themes para Genesis que hay por ahí que te voy a comentar ahora mismo. En primer lugar, por supuesto, los de StudioPress, que son los creadores de Genesis, y te dejo un enlace para que vayas directamente a ver los child themes y si le das, Si filtras por e Commerce, vas a ver los 24 Child Themes que tienen ellos, que están pensados para crear una tienda online o que al menos tienen soporte 100% pero para WooCommerce, ¿Vale? Existe por ahí una corriente que existe, porque antiguamente era así, que dicen que los child themes de Genesis no son compatibles con WooCommerce. Bueno, esto antes era así, no era exactamente esto, sino que no podías modificar bien las plantillas como estás acostumbrado a hacerlo con Genesis, ni algunos hooks, bueno, si veis el curso de Genesis lo entenderéis un poquito mejor. Pero había cosas que no se podían hacer, entonces sacaron un plugin que se llama Genesis Connect for WooCommerce y que te lo dejo en las notas del programa, para que eso que no se podía hacer, se pudiese hacer. Entonces de ahí que se hablara de incompatibilidad de los child themes de Genesis o de Genesis con WooCommerce. Pero esto es una historia bastante antigua, ya no es así. Todos los themes nuevos que van saliendo y que están pensados para WooCommerce u otros que simplemente vienen con la posibilidad, aunque no estén pensados para una tienda online, pues ahora ya sí son compatibles con WooCommerce. Y si específicamente te vas al enlace que te dejo, donde de los 24 child themes de Genesis para WooCommerce, pues cuando filtras por e commerce, ahí sabes al 100% que esos 24 child themes van a funcionar perfectamente con WooCommerce y encima con todas las ventajas que tiene Genesis y de las que ya he hablado en otros episodios, ¿Vale? Pero hay vida más allá de Studio Press y más allá de los child themes creados por studiopress y otros de terceros que también están incluidos en la web de studiopress, hay otras empresas que se dedican a ello, por ejemplo ZigZag Press, que te dejo un enlace a los 10 child themes que tienen para ecommerce. Aquí vas a ir directamente a los que están preparados o pensados para crear una tienda online con WooCommerce y son en general child themes muy sencillitos, están bastante chulos, bastante minimalistas, mantienen este aura que tiene Génesis de minimalista, aunque ya están cambiando un poquito la política y están haciendo cada vez child themes más visuales, aunque manteniendo esa sobriedad en el código, esa limpieza y eso que los hace buenos, que es básicamente la calidad de código. Pero como digo, estos de Zig Zag Press están muy bien muy limpitos y echadles un vistazo porque tiene muy buena pinta, ¿Vale? También tenéis los de Así Themes, una empresa española, seguro que lo conocéis, a los creadores Joan Boluda, el autor del podcast de marketing online, Alex Martínez, Kim Codina y Jordi Codina, que son de Copy Mouse, una empresa de diseño web súper chula, si vais a su página, a mí me encanta la página, tienen un rollo muy chulo y además los proyectos que tienen su portfolio ahí en la página principal, los proyectos están también súper chulos. Bien, pues todos ellos se unieron para hacer esta página de themes minimalistas para Genesis. Tienen el formato de suscripción, te suscribes y tienes acceso a todos sus child themes, no todos están pensados para WooCommerce, así que échales, cuando haces clic en ellos ves como unas características y en los que ponga woocommerce o ecommerce o algo de eso, pues esos ya sabes que están preparados para WooCommerce. Después tienes WordPress Studio que tienen unos 10 child themes para Genesis y aquí lo mismo, no todos están pensados para crear una tienda online con WooCommerce, pero te pones encima digamos de cada theme y te sale pues un poco la descripción, ahí puedes ver pues si está pensado, si es compatible con WooCommerce o no. En este caso el desarrollador o la persona que está detrás de WordPress Studio es un holandés que se llama Frank Shrievers, no sé si estoy diciendo bien su apellido, y que además de crear themes o child themes de Genesis, se dedica al diseño de interiores, con lo cual tiene un poco este rollo, sus themes para Genesis tiene un poco este rollo de diseños muy cuidados, también minimalismo y están bastante bien, os digo las que conozco así más y las que por los que me muevo más hay un montón porque Genesis es el framework más popular, con lo cual imaginaos la cantidad de child themes que se han creado para Genesis. Podéis buscar en Google simplemente, pero estos son los que yo conozco y sé que están muy bien. Os dejo por supuesto los enlaces en las notas del episodio. Esto en cuanto a Genesis. Después nos vamos con Divi. ¿A ver qué pasa con Divi? Bueno, que Divi está pensado para que tú mismo utilices su constructor, su maquetador y crees las páginas a tu gusto. Si, eres un crack con Divi y lo manejas hasta el más mínimo detalle, pero pues lo mejor es que crees tu propio Child theme, que en el curso de Divi vemos cómo hacerlo y también pues ya sabéis que tenéis en la zona código también para hacerlo con cualquier theme, también lo tenéis un tutorial gratuito que también os enseño a hacerlo, pero hay veces que quieres partir de un diseño ya currado y no quieres partir del diseño que trae Divi por defecto y en esos casos puedes utilizar o plantillas que se venden plantillas para cosas muy concretas, una landing page o una home, pero eso son para páginas concretas. Después si tú quieres que toda la web tenga el mismo aura y digamos quieres instalar algo para que funcione en toda la web y no solo en una página, entonces necesitas un child theme. ¿Y existen child themes para Divi, hay muchos freelancers que lo hacen y que hay también, no sé si Elegant Marketplace me parece, hay como una especie de Marketplace para child themes de Divi, lo que pasa que ahí no me fío yo tanto porque ahí prácticamente cualquiera los puede poner y no los he tratado mucho, vale? También es cierto que yo no suelo trabajar con Divi, solo trabajo con Divi cuando un cliente específicamente me pide trabajar con Divi, también lo tengo que conocer, porque si me llega alguien con una web con Divi que quiere un rediseño o que quiere lo que sea, pues por supuesto tengo que conocer a utilizarlo. Y además tenéis el curso de Divi que también es uno de los más populares en el área para suscriptores. Y las veces que he trabajado con Child Sims, que han sido un par de veces, realmente he recurrido a la empresa B Multimedia, tienen 11 Child Themes de Divi y si bien es cierto que ninguno es específico o ninguno te lo venden como para una tienda online, todos son compatibles con WooCommerce porque Divi lo es, así que os dejo el enlace a esta empresa, es la única que utilizado, así que es la única que os puedo recomendar. ¿El soporte os digo, es buenísimo, contestan súper rápido, son muy serviciales, muy eficientes, en el último trabajo que hice con ellos hice una modificación por código yo porque le faltaba una cosa al ZIM o lo mejoré de una forma y le hice una modificación por código, se lo comenté y en la siguiente actualización ya lo habían ellos implementado, así que por ese lado totalmente recomendable, vale? Y por último vamos a hablar de Child Themes de Storefront, Quiero hacer una especial mención a este theme a Storefront, porque yo casi siempre que hago una tienda online lo hago con este theme, lo hago con Storefront. Me gusta mucho la idea que hay detrás de este theme, y es que ellos pretenden aportarte un thing de partida sólido, flexible, limpio y todo esto te lo destacan, te dice que tiene 0 shortcodes, te dice que tiene 0 sliders, 0 page builders, aunque por supuesto es compatible con los page builders si lo quieres instalar, que te viene con el marcado de schema, que esto es también algo que se destaca de Genesis, básicamente es lo que hay que hacer a nivel de código para que los themes estén preparados para el SEO, por supuesto la integración perfecta con WooCommerce, porque para eso es un theme creado por la misma empresa que woocommerce y además te viene con opciones dentro de que lo intentan tener lo más limpio posible, te viene con opciones de personalización que están muy bien, y si después quieres más, quieres control absoluto, aquí es donde viene la parte fantástica, que es las extensiones para Storefront, que la más popular es Power Pack, que te permite diseñar a medida cualquier parte de tu web, puedes ir página a página y diseñar todo, diseñar los colores, el tipo de letra, los tamaños, la disposición de algunos elementos. Después tienes más extensiones, algunas de ellas son gratuitas, que son para cosas ya muy concretas, por ejemplo hay una que es para tener el menú en el modo hamburguesa, vale pasarlo a lo típico que cuando en dispositivos móviles se ve el menú así como en un formato con tres líneas, como lo que se llama el menú de hamburguesa, pues te permite también editarlo y ponerlo. Bueno, hay muchísimas extensiones, os dejo el enlace para que podáis verlas todas, muchas son gratuitas y otras son de pago, así que esto te va a dar un control brutal, un control total, y ya si sabes algo de CSS, pues mejor que mejor, porque lo que no puedas controlar con estas extensiones, con estas herramientas, lo vas a poder hacer a través de CSS sin problema. Pero como te decía, tienes la posibilidad, la opción de partir de una base, y aunque puedes modificar Storefront a tu gusto, ya sea por código, ya sea con estas extensiones que te comento, en la propia web de WooCommerce puedes encontrar 14 child themes ya preparados para Storefront, creo que dos o tres son gratuitos y el resto son de pago, si no me equivoco eran 39 dólares, así que bastante asequibles. Si te soy sincero, a mí no me encanta ninguno, no hay ninguno que yo diga wow, está chulísimo. Yo siempre prefiero coger Storefront, hacerlo desde cero, de hecho ahora mismo estoy con un proyecto con un cliente que estamos haciendo una tienda online y lo estoy haciendo con Storefront, hemos creado un child theme y pues lo estoy modificando a medida para que quede como el cliente quiere o en la línea que el cliente busca para su tienda online. Pero si no puedes partir de una base que ya te guste de uno de estos child themes, quizás como a mí me pasa, no te encanta ninguno, pero sí que le ves que muchas de las cosas las puedes aprovechar, pues partes desde eso, partes de un child theme ya con todo configurado, con todo diseñado y tú puedes ir después modificando ya sea a través de código o ya sea con estas extensiones, que yo te recomiendo si lo coges que cojas un pack que te viene un bundle, que es que te vienen las extensiones más útiles, incluida Power Pack por 69 dólares, Power Pack por sí misma vale 59, si coges el bundle, es decir, todas las extensiones agrupadas, pues te ahorras bastante porque además de Power Pack tienes otro montón de extensiones que están muy bien y que las puedes ir instalando según necesites, no tienes por qué instalarlas todas de golpe, simplemente lo que vayas necesitando lo vas instalando. Así que Storefront muy recomendable si no sabes muy bien por dónde tirar para crear una tienda online. Si ya eres un usuario duro de Divi, pues lo puedes hacer con Divi por supuesto sin problemas. Y si eres un usuario también duro de Genesis, pues por supuesto que también te he dejado un montón de opciones. Recordad que tenéis todos los enlaces, este es el episodio 103. Por cierto, si conocéis alguna otra página o algún otro lugar para encontrar child themes de todo lo que he comentado, me podéis comentar por Twitter por ejemplo y lo retuiteo para que pues otros oyentes lo puedan ver, que seguro que muchos de vosotros conocéis o trabajáis con otros child themes y conocéis cosas que yo no conozco, ¿Vale? Así que si me queréis comentar onnavarroes y retuiteo todas las opciones que me enviéis. También en la sección concreta para enlaces, que ya sabéis que en todos los episodios dejo una sección concreta para enlaces, os dejo el enlace al plugin que os he comentado antes de Genesis Connect para WooCommerce. También os dejo enlaces a los tres cursos que están muy relacionados con lo que hemos visto hoy, el curso de Genesis Framework, el curso de WooCommerce y el curso de Divi. Y ya a modo de conclusión, realmente sea cual sea el theme que utilices para crear tu tienda online, tienes dos la aproximación manual o elegir un child theme que ya existe y luego modificarlo o usarlo tal cual. Normalmente con Genesis vamos a elegir un child theme que nos guste y lo vamos a modificar según nuestras necesidades, porque así es como funciona Genesis. Pero con Divi, con Storefront quizás la aproximación suele ser distinta y simplemente trabajamos sobre ellos, más concretamente sobre una copia exacta que creamos en forma de child theme. Pero también como hemos visto, tienes la posibilidad de elegir ya child themes que existen, que con esto te vas a ahorrar todo el trabajo de diseño y ya pues modificar las partes que necesites o usarlo tal cual, ¿De acuerdo? Y por último, recuerda, para seguir aprendiendo a gestionar tu negocio o proyecto con WordPress, te invito a que pruebes el área para suscriptores durante 15 días. Ya sabes que tienes todos los cursos disponibles, tienes todos los vídeos de la zona, código disponible, tienes soporte conmigo disponible, tienes descargas. Y todo ello lo Puedes probar por 15 días sin compromiso alguno. ¿Que decides? ¿Que no te convence? Me contactas, oye Gonzalo, que al final no quiero seguir, te devuelvo los 10 euros de inversión que hiciste y listo. Me interesa muchísimo que lo pruebes porque sé que te puede gustar, pero en el caso de que no te guste, pues no pasa nada, te devuelvo el dinero y ya está, ¿De acuerdo? Y por último, si te ha gustado el episodio de hoy y quieres ayudarme a que siga creciendo, a que siga creando episodios como este, ya sabes que la forma en la que puedes aportar un poquito, aportar tu granito de arena es dejándome una valoración en iTunes. No tardas nada, vas a tu aplicación de podcast, buscas WordPress semanal y dejas la reseña que consideres. Los que ya habéis dejado vuestra reseña, de verdad Muchas, muchas gracias. Los que estáis en otras plataformas como ivoox y demás, también muchísimas gracias por las acciones que toméis, ya sea un comentario, un me gusta, lo que sea. También aviva un poquito el podcast, me permite que otra gente lo pueda encontrar. También me gusta estar en contacto directo con vosotros. Ya cada vez veo que me comentáis más en ivoox no hay posibilidad de mencionar, así que no estoy seguro si recibís mis respuestas, pero que sepáis que respondo a todo, todos los comentarios que me ponéis en ivoox respondo. Así que si no os llega nada, el email simplemente y tenéis curiosidad por ver mi respuesta, porque muchas veces me hacéis preguntas concretas, pues vais al episodio y ahí va a estar mi respuesta seguro, ¿Vale? Y con esto cerramos nada más por este episodio. Nos seguimos escuchando. Adiós.