Veamos cómo hacer compatible nuestro theme con WooCommerce, ya sea para nuestros proyectos como para los proyectos de nuestros clientes.
En ocasiones nos salta este aviso de WooCommerce
Y es que en ocasiones estamos trabajando con un theme que nos va de perlas y que nos encanta (ya sea a nosotros o a nuestros clientes) y cuando instalamos WooCommerce nos salta el aviso que podéis ver más arriba.
"Your theme does not declare WooCommerce support - Please read our integration guide or check out our Storefront theme which is totally free to download and designed specifically for use with WooCommerce"
Bien, pues veamos en que consiste exactamente esa integración de la que hablan, que en realidad no hay para tanto.
¿Qué pasa si tu theme no es compatible con WooCommerce?
En realidad no va a pasar gran cosa a nivel funcional. Todo lo que se puede estropear será a nivel de diseño. Normalmente las páginas que pueden dar problemas son algunas de las propias de WooCommerce: Tienda, producto, categorías y etiquetas de productos.
Lo que suele ocurrir es que se vean descompuestas, y con la barra lateral debajo del contenido, en lugar de al lado.
Típico síntoma de theme incompatible
Curiosamente, las de Cuenta, Carrito, y Finalizar Compra no están afectadas, ya que usan el diseño de tu propio theme, con lo que no pasará nada.
La página de carrito no está afectada
Hacer compatible un theme con WooCommerce
Las malas noticias es que tendremos que tocar código. Las buenas noticias es que sólo tendremos que duplicar una página y sustituir una función, con lo que sólo siguiendo lo que os voy a decir lo podréis tener listo, aunque no sepáis lo que estáis haciendo.
Lo primero será buscar el archivo "page.php" de nuestro theme. Este archivo es el que se encarga del diseño de las páginas. Y resulta que los productos son "paginas" de producto. Si no lo tenemos, podemos usar "single.php" o a malas "index.php".
Archivo "base" que duplicaremos
A continuación duplicaremos el archivo. Esto lo podemos hacer con nuestro programa de FTP. Al nuevo archivo generado (la copia) le llamaremos "woocommerce.php". Lo dejaremos exactamente ahí dónde estaba el otro. Ánimo que ya sólo nos queda un paso.
Ya tenemos el archivo duplicado, ahora le cambiaremos el nombre a woocommerce.php
El siguiente paso será abrir ese archivo que acabamos de crear, y vamos a buscar el llamado "loop". El loop no es más que unas líneas de código que empiezan así:
<?php if ( have_posts() ) :
Y acaban así:
<?php endif; ?>
Entremedio puede haber de todo, de más simple a más complejo. En este caso podemos ver que ocupa de la línea 20 a la 23.
Vemos el loop de las lineas 20 a la 23
En todo caso, lo que tenemos que hacer es borrarlo y sustituirlo por esta única línea:
<?php woocommerce_content(); ?>
Una vez más, en este caso el ejemplo anterior quedará tal que así:
Nuevo loop compatible con WooCommerce
¡Y ya está! Ya lo tendremos todo a punto. Ya funcionará todo y a nivel de diseño todo aparecerá donde debería. Pero ojo, aunque el theme ya sea compatible, ahora deberemos "declarar" que lo es.
Declarar compatibilidad con WooCommerce
Dicen que la mujer del César, esta no solo debía de ser honrada sino parecerlo. O sea que esto es lo que haremos ahora. Nuestro theme ya es compatible, pero ahora debemos decirle a WooCommerce que lo es. Esto es muy simple, sólo tenemos que añadir esto en nuestro archivo functions.php:
add_action( 'after_setup_theme', 'woocommerce_support' );
function woocommerce_support() {
add_theme_support( 'woocommerce' );
}
Y con esto ya está. Ya le hemos dicho que nuestro theme es compatible. Pero ojo, en realidad esta línea sólo "dice" que el theme es compatible, pero no hace nada. Sólo le dice a WooCommerce que lo es (aunque sea mentira).
Colocando esta línea eliminará el mensaje de WooCommerce que dice que el theme no es compatible, pero si no hacemos nada más, estaremos mintiendo como bellacos, y solamente habremos quitado el mensaje, sin más. Es como una "etiqueta" del autor del deme que dice "Eh, WooCommerce, que soy compatible contigo, ¿eh?". Pero nada más.
Resumen y conclusión
Para hacer un theme compatible con WooCommerce tenemos que crear la página woocommerce.php a partir de page.php y sustituir el loop de WordPress por una función propia de WooCommerce.
Luego deberemos decirle a WooCommerce que hemos hecho los deberes y que ya somos compatibles, declarando soporte.
Si queréis saber más sobre el fantástico mundo deWooCommerce, os recomiendo que echéis un vistazo al curso de curso de WooCommerce y el curso intermedio de WooCommerce. Si os suscribís tendréis esto y mucho, mucho más.