Integrar WooCommerce con Genesis

Instalar WooCommerce suele ser una tarea sencilla pero a veces resulta problemática con temas que no tienen compatibilidad con WooCommerce (como los child themes de Genesis). Lo habitual con estos temas es que después de intalar WooCommerce, tu barra lateral se descoloque. En este tutorial te enseñaré como compatibilizar WooCommerce con los child themes de Genesis y evitar estos problemas.

Barra lateral descolocada

Como he señalado Woocommerce descoloca la barra lateral y esto sucede porque necesita unas plantillas especiales para representar los productos de la tienda. Éstas plantillas tienen unos contendores (wrappers) para representar la barra lateral que son diferentes a los de Genesis. Y es aquí donde surge el fallo, los estilos CSS que colocan la barra lateral no sirven para WooCommerce.

Nada más instalar WooCommerce, nos advierte que el tema no es compatible y nos enlaza a una página de ayuda para solucionarlo.

Advertencia Tema Incompatible con Woocommerce

Las propuestas de esta página sólo sirven para compatibilizar temas standard, pero para los child theme de Genesis no sirven y debe hacerse de otra forma que te enseño a continuación.

Usar la función woocommerce_content correctamente

La función woocommerce_content genera todo el contenido de la tienda on-line y para usarla correctamente debes modificar tu child theme (se encuentra en la carpeta /wp-content/themes/tu-tema/) siguiendo estos pasos:

1. Crea el fichero woocommerce.php con el siguiente código:

<?php
/**
 * WooCommerce Template
 * 
 * Template used for all WooCommerce views for your site
 *
 */

//* Remove standard post content output
remove_action( 'genesis_loop', 'genesis_do_loop');

//* Add WooCommerce content output
add_action( 'genesis_loop', 'woocommerce_content' );

genesis();

2. Añade compatibilidad WooCommerce en al fichero functions.php con la siguiente linea:

//* Declare WooCommerce Support
add_theme_support( 'woocommerce' );

Esto soluciona el problema de la barra lateral. Pero aquí no termina todo y es que si tu tema es premium y lo actualizas todos esas modificaciones y el fichero extra desparecen. Puedes tenerlo en cuenta y volver a completar estos pasos en cada actualización o puedes instalar el plugin Genesis Connect for WooCommerce que te explico a continuación.

El plugin Genesis Connect for WooCommerce

El plugin Genesis Connect for WooCommerce facilita la tarea de integrar WooCommerce con Genesis y además tiene ventajas extra.

La primera ventaja es que te permite crear plantillas personalizadas para los productos de la tienda como taxonomy-{taxonomy}.php y taxonomy-{taxonomy}-{term}.php. La solución anterior no te deja por que crea la plantilla woocommerce.php que siempre tiene prioridad respecto al resto.

Otra ventaja es que hace compatibles con WooCommerce otros plugins muy usados:

Instalar Genesis Connect for WooCommerce

Instalar este plugin requiere una modificación “leve” de nuestro child theme. Al activar este plugin te aparece un mensaje de advertencia:

Advertencia Plugin Genesis Connect Woocommerce

El plugin te obliga a añadir la siguiente linea en el fichero functions.php antes de activarlo:

add_theme_support( 'genesis-connect-woocommerce' );

Tenemos el mismo problema con las actualizaciones (en cada actualización se borra la modificación), pero ahora sólo debes acordarte de añadir una linea.

Como puedes ver este plugin te facilita mucho la integración con WooCommerce, pero quedan otros aspectos que tienen que ver con el estilo para mostrar los productos, los listados, el carrito, etc… Aspectos que veremos en futuras entradas.

¿Has tenido problemas integrando WooCommerce en tus temas?. Si quieres puedes dejar tus experiencias en los comentarios de la entrada.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *