Hacer Temas compatibles con Woocommerce

Mi tema es muy simple y ahora necesito vender con WooCommerce, pero no es compatible y no está preparado

Muchas veces descargamos un tema gratuito o nos compramos uno que nos gusta y que a priori cumple nuestras expectativas actuales en cuanto a diseño y maquetación para crear nuestra web o la de un cliente, pero con el tiempo es posible que nuestras necesidades o las de nuestro cliente cambien, y donde antes nada más que necesitábamos una web con un diseño bonito, ahora necesitamos convertirla en una tienda virtual para poder vender productos.

Por lo general los temas que son compatibles con WooCommerce ya lo muestran en la documentación del propio tema, es más, seguro que has visto en varios sitios el logotipo de WooCommerce.

Si tu tema es compatible con WooCommerce no hay ningún problema, sólo debes seguir el asistente de instalación y configuración y comenzar a crear productos para vender.

Pero… ¿qué ocurre si tienes un tema ya instalado (o quieres instalar uno) que no es compatible?.

Pero vamos por partes.

En primer lugar debemos descargar y activar el plugin WooCommerce:

Ahora vamos a crear un producto:

Y por último vamos al navegador para ver cómo se ve el tema y el producto que hemos creado:

Así es cómo se ve el producto en el navegador:

Como puedes apreciar, en este ejemplo yo he utilizado el tema que viene por defecto a día de hoy en la instalación de WordPress (Twenty Sixteen).

Pero además, he instalado también un tema que no es compatible con WooCommerce:

Vamos a activar este tema y ver qué ocurre:

Parece que el tema se ha instalado correctamente, pero vemos que nos ha aparecido un mensaje en la parte superior:

Este mensaje nos avisa de que el tema que estamos utilizando no tiene declarado el soporte con WooCommerce. Esto ya nos empieza a poner un poco nerviosos: ¡es el tema de nuestro cliente, es el que le gusta, el que él ha elegido y no podemos cambiarlo!…

En realidad WooCommerce se integra bien con la mayoría de los temas de WordPress, por lo que los supuestos problemas que pueden surgir son más a nivel de diseño que a nivel funcional. Quiero decir que donde puede surgir algún problema es en el momento de ver cómo se muestran los contenidos de WooCommerce en nuestro tema, puede ser que no se integre bien con el diseño de nuestro tema. Lo que suele ocurrir normalmente es que haya páginas que se vean mal (por ejemplo con la barra lateral debajo de los productos, en lugar de estar en su sitio).

Estas “incompatibilidades” se pueden surgir sobre todo en la página de la Tienda, en las páginas de los Productos individuales y en las Taxonommías (categorías y etiquetas). Esto se debe principalmente a que WooCommerce utiliza sus propias plantillas (su propio diseño) para mostrar el contenido de estas páginas, además, por lo general, las páginas del pago, la compra y la cuenta del usuario, no se ven afectadas porque estas últimas utilizan la plantilla page.php y por lo tanto, el diseño del propio tema.

Podemos hacer nuestro tema compatible con WooCommerce de dos formas distintas:

  1. Utilizando hooks (avanzado)
  2. Utilizando la función woocommerce_content() dentro de nuestro tema

En este post vamos a ver el segundo método, pues es el más sencillo y en el que menos código vamos a tocar.

Esta solución nos permite (y así debemos hacerlo) crear una nueva página de plantilla dentro de nuestro tema, página que será utilizada por todas las taxonomías y productos de WooCommerce.

Para ello sólo tenemos que duplicar una página y sustituir una función. ¡Vamos a ello!:

  1. Debemos duplicar el archivo php de nuestro tema y renombrarlo como woocommerce.php. Este archivo (page.php) es el que se encarga del diseño de las páginas de nuestro tema, y como es obvio, los productos son páginas.

Y ahora lo renombramos como woocommerce.php:

  1. Ahora abrimos este archivo (php) con un editor de texto y localizamos en el código lo que se denomina el bucle de WordPress. Por lo general el bucle comienza con:

<?php if ( have_posts() ) : ………

Y termina con:

<?php endif; ?>

Una vez que hayas encontrado este fragmento de código bórralo todo y escribe en su lugar:

<?php woocommerce_content(); ?>

Ya está, esto hará que se use el diseño de WooCommerce en lugar del diseño del tema que está establecido en el bucle. Ahora en cuanto a diseño todo estará correcto, todo estará en su sitio y con los estilos correctos de nuestro tema.

Aunque hayamos hecho nuestro tema compatible, si te fijas en la sección Temas (en el Escritorio), aún aparece el mensajito que nos avisa de que nuestro tema no es compatible con WooCommerce.

Esto es muy sencillo de solucionar, sólo debemos declarar la compatibilidad de nuestro tema con WooCommerce, para ello debemos agregar una función a nuestro archivo functions.php:

add_action( ‘after_setup_theme’, ‘woocommerce_support’ );
function woocommerce_support() {
add_theme_support( ‘woocommerce’ );
}

Buscamos el archivo functions.php:

Y lo abrimos con un editor de código:

Y ahora le agregamos el fragmento de código anterior (por ejemplo pégalo al final de todo el código de este archivo):

¡Y esto es todo, ya tenemos nuestro tema compatible con WooCommerce y además nos hemos deshecho del molesto mensajito!.

Para más información puedes ver la documentación original de WooCommerce sobre este tema haciendo clic aquí.

¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja un comentario

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

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

He leído y acepto la política de privacidad de este sitio. *