Crear Theme compatible con WooCommerce

Para crear un theme compatible con woocommerce partiendo de un theme básico vamos a necesitar tener varias previsiones. Las cuales serán detalladas a continuación con sus respectivos tips para hacerlo amigable y sencillo para el usuario con poco conocimiento de wordpress.

Los principales inconvenientes se dán en los diferentes layouts cuando queremos agregar las páginas de woocommerce en si mismo. Los sidebars pueden quedar en posiciones distintas o inclusive si nuestro theme es algo anticuado y esta realizado por desarrolladores con poca experiencia puede ser algo tedioso volverlo compatible.

Esto potencialmente puede afectar la pagina de compra, la pagina de producto y las paginas de taxonomias (categorias y tags) porque WooCommerce usa templates para mostrar sus propias paginas y es imposible conocer exactamente el taggeado de los temas usados. Otras paginas (checkout, carrito, cuenta) no son afectadas porque usan la misma plantilla de page.php

Hay dos caminos para resolver esto:

Usando Hooks (para usuarios avanzados o desarrolladores).

Usando la funcion woocommerce_content() dentro del mismo theme.

Usando woocommerce_content()

Esta solucion permite crear un nuevo template de pagina dentro de tu theme original y será usado por todas las taxonomias y tipos de post de WooCommerce. Si bien es una solución sencilla tiene un inconveniente en que será usado por todas las taxonomias y post types de woocommerce. Los desarrolladores usan por lo general los hooks para ello.

Para instalar esta plantilla de página:

Duplicamos page.php

Duplicando el archivo page.php y nombrandolo woocommerce.php. Este archivo será encontrado como: wp-content/themes/YOURTHEME/woocommerce.php.

Editar la página (woocommerce.php)

Abrimos el archivo con nuestro editor de texto favorito

Reemplazamos el ciclo

Necesitamos encontrar el ciclo. Usualmente comienza con

<?php if ( have_posts() ) :

y termina usualmente con:

<?php endif; ?>

Esto puede varia entre distintas plantillas de wordpress. Una vez que lo encontramos, lo borramos y agregamos en su lugar:

<?php woocommerce_content(); ?>

Esto usará el ciclo de WooCommerce en vez de el ciclo de wordpress. Salvar el archivo. Listo.

El método hook es mas complicado que el anterior pero también es mas flexible. Esto es similar al método que usamos cuando creamos plantillas de wordpress. Es también el método que usamos para integrar las plantillas Twenty Ten a Twenty Sixteen.

Insertamos algunas pocas lineas en el archivo functions.php dentro de nuestra plantilla.

Primero desestimamos los wrappers de WooCommerce:

remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);

Despues enganchamos en nuestras propias funciones los wrappers para mostrar en la plantilla:

add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);

function my_theme_wrapper_start() {
  echo '<section id="main">';
}

function my_theme_wrapper_end() {
  echo '</section>';
}

Asegurarse que los tags matcheen con los que usamos en nuestra plantilla. Sino estamos seguros de que clases o IDs estamos usando miramos page.php para confirmar los tags elegidos.

Declaramos el soporte para WooCommerce

Una vez que nuestra plantilla soporta WooCommerce funcionalmente, deberiamos declarar esto en el codigo para ocultar en el Dashboard el mensaje que sale de que nuestra plantilla no tiene soporte para WooCommerce. Esto lo hacemos agregando el siguiente código en functions.php.

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