Hoy tengo el placer de contar en mi blog con Juanjo Boté.
Nos viene a explicar cómo conectar Genesis con Woocommerce, basándose en un caso práctico con el que ha tenido que lidar en la creación de la web www.sunfish.es
(Este es un post invitado de Juanjo Boté, de www.juanjobote.com)
Antes de redactar esta entrada, dar las gracias a JuanFran Moreno de Sunfish por permitir divulgar su caso de la integración de WooCommerce con Genesis Framework en su blog.
En esta entrada voy a tratar de explicarte las dificultades y sudores fríos por los que vas a pasar si tienes que conectar/integrar Genesis Framework con WooCommerce.
El caso que te traigo es sobre el sitio Sunfish.es que dirige Juan Fran Moreno donde puedes aprender a bucear en Torrevieja (Alicante), de forma personalizada contratando sus servicios.
Cuando nos pusimos en marcha con la integración de Genesis Framework con WooCommerce, nos aparecieron una serie de inconvenientes que no tuvimos en cuenta.
Tampoco las sabíamos y no corren por ahí documentadas.
No se encuentran casos prácticos de integración de uno con otro. Todo el mundo explica que existe un conector pero es raro encontrar documentado un caso práctico.
Puesta en escena
Sunfish.es como empresa, ofrece cursos de buceo personalizados a la vez que material de buceo. El sitio está compuesto por una tienda de e-commerce y un blog en Wordpress.
La tienda está montada sobre WooCommerce, donde se pueden adquirir de cursos de buceos personalizados a la vez que material de buceo.
La cuestión era integrar la tienda dentro de Génesis Framework. Huelga decir que con el menor coste posible.
Hay que distinguir dos cosas. Una cuestión es instalar Genesis Framework sobre un blog con un tema anterior tal y como se explica en esta entrada.
Otra muy distinta es la integración con otro tipo de plataformas como es WooCommerce. Esto es importante diferenciarlo porque el tiempo de ejecución y costes son muy distintos.
Así que partimos de la base que en Sunfish estaba funcionando con WooCommerce desde un principio.
Lo primero que hicimos fue instalar Génesis directamente con la plantilla metro, pensando que no habría grandes problemas. Grave error. Tampoco se encuentra en la blogosfera inglesa grandes explicaciones de como hacerlo.
Al instalar Genesis Framework y activar el Child sobre WooCommerce, en el blog te aparece un aviso que indica una página, para integrar WooCommerce con terceras partes.
En el primer párrafo ya te indica claramente que la integración afectará a la página principal de la tienda, a las páginas de un producto y a la taxonomía de los mismos.
En cualquier caso, tienen que estar los dos instalados, WooCommerce y Genesis.
Sólo de ver la página, si no tienes experiencia mínima en programación en php, ni sabes que son los códigos que te indican, te entrarán sudores fríos 🙂
La verdad, ponerme a probar lo que indicaba la página de documentación de WooCommerce daba un yuyu terrible. Esto era relevante especialmente porque al final de la misma página, te indican que si sus recomendaciones fallan y no tienes acceso a un programador (experimentado diría yo), que uses sus temas.
Así que la opción era buscar un posible conector. Genesis Framework tiene un conector con WooCommerce.
No te equivoques, no es un camino de rosas. En cualquier caso, a pesar del trabajo que dió, esta opción a nivel técnico es mejor que la anterior.
Instalación del conector
La instalación del conector es un plugin más. Aun así, en la documentación del conector, recomiendan que los dos estén instalados, tanto WooCommerce como Genesis.
Para conectar el plugin, los pasos son relativamente sencillos. El resultado final no lo es tanto.
- Antes de instalar esto, tienes que tener un Child activado en Genesis (un child theme) y Woocommerce instalado y activo. En este caso estaba instalado Metro.
- Busca el plugin Genesis Connect for WooCommerce. También lo tienes en esta dirección.
- Cárgalo en tu blog de Wordpress. Si lo haces vía FTP en /wp-content/plugins/directory
- No cambies el nombre de la carpeta genesis-connect-woocommerce folder. Esto es importante porque si no todavía se complican más las cosas 🙂
- Activa el plugin en el menú de Plugins de WordPress.
- Accede al editor Apariencia/Editor. Accede a function.php y añade
add_theme_support( 'genesis-connect-woocommerce' );Para acceder a este apartado, tienes que acceder a la siguiente pantalla.
A partir de aquí visualiza a la home y comprueba que ha pasado. En este caso, la home desapareció, porque Genesis predomina sobre WooCommerce.
No hay que desesperarse. Si se te desmonta todo, ve a Apariencia/Widgets y ahí te va a tocar cambiar cosas de sitio. Poner unas o quitar otras.
Muchas de las cosas que desaparecieron estaban situadas en las etiquetas de pies de página, tal y cómo tienes indicado en la siguiente imagen.
Es cuestión de que luego ajustes o cambies los widgets de sitios.
¿Qué pasa con los menús?
Antes de hacer la integración, en el caso de Sunfish había un sólo menú principal donde estaban todas las opciones que había en el blog.
Al realizar la integración, se desmontó todo el menú. Tocaba rehacer todo el menú, tanto la navegación básica, como el menú de los productos.
De acuerdo con Juan Fran decidimos crear un menú principal para el blog y un menú secundario para la tienda y los recursos que sunfish.es ofrece.
Conclusiones
La integración de Genesis Framework con WooCommerce no es immediata. Es posible que necesites a alguién que sepa lo que hace.
Desaparece la home page. Tal cual. Por tanto si te interesa tener la home como la tenías inicialmente, haz primero aunque sea una captura de pantalla, sobre todo porque igual tienes elementos que para tí son esenciales.
Se desmonta todo. Lo que hay en una barra lateral, aparece en el footer y si tienes menús con secciones, también te van a desaparecer. Por lo menos es lo que nos pasó.
Así que tendrás que rehacer los menús. En el caso de sunfish al tener una tienda virtual tenía varias taxonomías. Aprovechando el paso, propuse a Juan Fran reorganizar las categorias de la tienda.
El editor de texto, es robusto y WooCommerce mantiene los tipos de letra. No podrás cambiar los tamaños de letra a no ser que instales un plugin que esté por encima de WooCommerce a la hora de editar textos para tus entradas. Es decir, Woocommerce a la hora de editar tus entradas va a predominar sobre el editor.
Tiempo. En remontar todo de una manera razonable tuve que emplear 4 horas en remontar la home, los menús y la estructura de la tienda.
Si no eres una persona experimentada, no te recomiendo que te lies la manta a la cabeza. Valora tu tiempo antes de hacer nada. En mi caso soy una persona experimentada con más 8000 horas de vuelo en php.
El plugin permite enlazar WooCommerce con Genesis, pero perderás tiempo reorganizando toda la home, los menús, la tienda y según cómo lo tengas configurado también el blog.
Este es un caso particular. Puede que tu tienda sea más compleja o aparezcan otros problemas colaterales.
En algunos casos y según cómo esté configurada la tienda, también habrá que reorganizar la página de artículos.
No hay soluciones mágicas.
Para finalizar
Si quieres aprender a bucear todo el año, puedes hacerlo en Torrevieja (Alicante), visita Sunfish y pregúntale a Juan Fran Moreno.
Si quieres aprender Genesis Framework, compra el curso que está elaborando Omar. (Sale el 4 de Mayo de 2014)
Si tienes un problema técnico con tu blog puedes contactar conmigo. Me llamo Juanjo Boté y ayudo a las personas que han llegado tarde a internet a superar sus barreras digitales.
En cualquier caso, ninguno de los 3 hacemos las cosas por amor al arte.
¿Has tenido alguna experiencia en integraciones? Puedes comentar en la entrada de blog. También puedes compartir el artículo
19 comentarios en “Cómo conectar Genesis con WooCommerce: el caso de sunfish.es”
Tienes un fichero .po de woocommerce en español que lo tienes que instalar en la carpeta de languages.
O sino también tienes un plugin que se llama Codestyling Localization Plugin
¡Hola! Yo estoy integrando woocommerce en un pagina web igual con el mismo childthe metro, pero yo no he tenido tantos problemas como ustedes, cuando concente Genesis con woo no me quito lo que tenia en el home, yo el único problema que tengo es que me parace en español y ya instale un plugin pero solo algunas opciones, aparecen en español y otra no. ¿Me pregunta es como puedo yo ¿vía código poner todas las opciones de woocommerce en español?¿ o si existe otros plugis que lo hacen ?
Hay manera de agregar un código corto en functions.php para traducción? Gracias que tengas un buen dia
Hola Omar, hola Juanjo.. mira por donde estaba trasteando para montar con woocommerce una pequeña tienda en mi blog, y me tropecé con el mensaje que comentáis de añadir la instrucción a functions.php, y menos mal que se me ocurrió mirar antes en SanGoogle y así encuentro las advertencias sobre Genesis y Woocommerce que hace Juanjo… dónde iba a ser si no, en Haciaelautoempleo 🙂 Muchas gracias a ambos por aportar tanto valor, como siempre.
Estoy planteándome ahora separar blog y tienda, y mirando Webempresa, a través de tu link veo las ofertas en los tres planes básicos, inicio, popular y avanzado, pero no sé si para tienda con woocommerce servirían en cuanto a capacidad y transferencia para una pequeña tienda o tendría que irme al profesional (que no tiene promoción).. Todo esto añadido al tema plantillas que creo que sólo el plan profesional incluye las de tienda, verdad? A ver si me iluminas un poco, porque no tengo mucho presupuesto y el de inicio en lo que respecta a euros más o menos me cuadra, pero no sé si me sirve o no técnicamente… Gracias otra vez!
Hola Raquel,
pues sí, antes que usar el Genesis Woocommerce te sale más a cuenta separar blog de tienda y poner esta última con un Theme propio de Woothemes con Woocommerce, o bien utilizar los packs de tiendas de Webempresa.
El tema de que te incluya la plantilla de tienda o no, creo que no es por el tipo de plan en cuanto a capacidad, sino que son distintos los planes de hosting «normal» (los 3 que ves en mi pagina de promoción) y otra cosa son los hosting para «packs de tienda».
Estos últimos tienen un precio más elevado, no nos vamos a engañar, pero tienen algunas ventajas: hosting con 3GB de espacio (problema resuelto), plantilla de tienda profesional instalada y con todos los contenidos de ejemplo puestos (para que sea cambiar por tus cosas y listo) y me imagino que el soporte será más completo con estos packs. Esto sale por 199€ al año y no está en mi página de promo, pero igualmente si antes de pagar si usa mi código «autoempleo» te ahorras un 20%, es decir, 40€.
Lo mejor es que lo eches un vistazo tú misma: http://www.webempresa.com/pack-tienda-wordpress.html
También te digo, que si tú te manejas bien con los themes para tiendas… te puedes contratar un hosting normal de 1GB por ejemplo (si necesitas luego más, siempre tiempo hay), instalarte la plantillita que te hayas comprado aparte y hacertelo a lo Juan Palomo.
Espero que algo te resuelva 🙂 Un abrazo Raquel!
Hola Omar, pues ya me va quedando más claro, voy acotando posibilidades realistas para mi bolsillo y que a lo Juan Palomo me quede un sitio resultón .. Haré números y ya te cuento. Muchísimas gracias una vez más, eres un pozo de sabiduría y amabilidad ! Un abrazo de vuelta!
Raquel, suscribo lo que te comenta Omar.
Gracias por pasarte
Hace unos dias que no va. Creo que pasa exactamente lo que comenta Omar.
La web Sunfish.es no funciona
Me da que ya no continua con ella su propietario.
Muchas gracias Victor. Cualquier aporte siempre es bienvenido.
Excelente aporte, lo aplique y logre corregir algunos detallitos en plantillas Genesis Framework que no se adaptan bien, por el tamaño de las fuentes del tema y el woocommerce, por ejemplo, en la página citada: Sunfish.es, se ve que el boton «Añadir al carrito» distorsiona la tienda. Toqueteando en el css del woocomerce, encontre esto en la carpeta /wp-content/plugins/woocommerce/assets/css el archivo woocommerce.css, editar la entrada #content input.button{font-size:100%; modificar el porcentaje (en mi caso lo deje en 70%) y eso hará que los botones no se monten uno sobre otro. Es un pequeñisimo aporte espero les sirva, Saludos desde Venezuela
Es una posibilidad Juan.
Pero si empiezas de 0, yo me inclino más por WooCommerce.
Un saludo
Hola Omar,
Que tal? Muy interesante tu blog, además de instructivo. Yo también trabajo con Genesis (y otros framework) y comparto plenamente tus comentarios sobre éste.
La verdad que mi experiencia me dice que, aunque Woocommerce funciona bien, lo mejor es apostar por una plataforma de comercio electrónico pura y dura, como Magento o Prestashop, y luego realizar la integración con Wordpress o Joomla! como gestor de contenidos. Evidentemente hay que tener los conocimientos, como bien sabrás, pero los resultados son infinitamente mejores.
Y ni hablar de la superioridad de Magento o Prestashop ante Woocomerce.
Enhorabuena por el Blog!!
Hola mik,
si tienes muchos artículos es posible que sea preferible tender a un Theme Responsive dedicado. La apuesta no siempre es de fácil elección.
Gracias por comentar
Excelente entrada Juanjo:
En caso de querer montar desde cero que plantilla recomiendas?
Y disculpando mi ignorancia en este mundo de e-comerce, ¿se paga algo por el servicio de woocommerce?
Gracias por toda la info que nos das.
En caso de empezar de 0, Genesis Framework con una plantilla de e-commerce para Genesis como Ayoshop.
Por WooCoomerce no pagas nada, es un plugin gratuito. Pagas por los añadidos. Hay plugins de pago que en función del tipo de comercio que hagas los vas a necesitar. También la pasarela de pago con el banco si lo que quieres es una TPV.
Fantástico, Gracias por la respueta…
Cuando dices «pagar por los añadidos» a que te refieres?
Lo del Banco perfectamente entendido.
Podrías darme un link de una página funcionando con woocommerce?
Que entrado a tu sitio y el fin de semana voy a navegar en él.
Moviles Chinos España por ejemplo: http://xn--movileschinosespaa-30b.com/tienda/
Hola Juanjo y Omar. Esperaba un post como éste pero ya veo que la cosa no es tan fácil. En la tienda sunfish.es veo que la única forma para acceder al carrito es después de añadir un artículo. Y ya en la página del carrito de la compra no la veo nada clara porque despista mucho en cuanto a usabilidad. Mi duda es si merece la pena solucionar todos estos inconvenientes (que verdaderamente son muy críticos en los que te puedes jugar abandonos de carritos) instalando Woocommerce en Genesis o si nos vamos directamente a un Theme dedicado y pensado para tiendas online de Woothemes.
Un saludo!
Finalidad » gestionar los comentarios.
Legitimación » tu consentimiento.
Destinatarios » los datos que me facilitas estarán ubicados en los servidores de Webempresa (proveedor de hosting de Haciaelautoempleo) dentro de la UE. Ver política de privacidad de Webempresa. (https://www.webempresa.com/aviso-legal.html).
Derechos » podrás ejercer tus derechos, entre otros, a acceder, rectificar, limitar y suprimir tus datos.