WooCommerce se ha convertido en una de las principales plataformas de eCommerce del mercado. Tanto es así que portales como BuiltWith arrojan cifras como estas:
WooCommerce fue adquirido por Automattic en 2015. Durante los últimos años ha experimentado un crecimiento exponencial. A día de hoy representa casi la mitad del pastel (42%).
Si alguna vez has instalado un WooCommerce y has buscado temas para tu tienda online en un Marketplace, habrás notado que en muchos temas se indica si es o no WooCommerce Compatible.
¿Qué significa eso? Pues que no todos los temas soportan WooCommerce. En este post vamos a ver cómo hacer que un tema propio desarrollado a medida sea compatible con WooCommerce.
Lo primero que verás si tienes un tema no compatible con WooCommerce e instalas el plugin será un aviso como este:
Si queremos desarrollar un tema compatible con WooCommerce o hacer el nuestro compatible, lo primero es indicar que lo soporta en nuestra función de configuración del tema. Hace unos meses escribí una serie de posts sobre cómo crear tus propios temas desde cero
Si tenemos claro esto, empezamos. Añadiremos a nuestro functions.php las siguientes líneas:
<?php
function my_theme_setup() {
add_theme_support( 'woocommerce' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );Sólo con esto ya conseguiremos que nuestro tema sea compatible. Desaparecerá el aviso que he mencionado anteriormente. Al instalar WooCommerce nos habrá creado 4 páginas nuevas:
- Carrito
- Finalizar compra
- Mi cuenta
- Tienda
En estas páginas encontraremos shortcodes que pintan el contenido de estas secciones:
- Carrito => [woocommerce_cart]
- Finalizar compra => [woocommerce_checkout]
- Mi cuenta => [woocommerce_my_account]
- Tienda => Se almacena el ID de la página en la opción woocommerce_shop_page_id
La página principal de la tienda no lleva shortcode. Se almacena su ID en base de datos y a la hora de mostrar ésta página, se mostrará la portada de nuestra tienda.
Adaptando WooCommerce al diseño de nuestro tema
En nuestro functions.php podemos definir un contenedor para la tienda. Por ejemplo si en nuestro tema utilizamos bootstrap, podemos definir al principio los divs de container, row y col-sm-12, y al finalizar sus cierres de etiqueta correspondientes:
<?php
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10 );
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10 );
function my_before_main_content() {
echo '<!-- Starting content wrapper for your theme -->';
echo '<div class="container"><div class="row"><div class="col-sm-12">';
}
add_action( 'woocommerce_before_main_content', 'my_before_main_content' );
function my_after_main_content() {
echo '</div></div></div>';
echo '<!-- Ending content wrapper for your theme -->';
}
add_action( 'woocommerce_after_main_content', 'my_after_main_content' );Como se puede observar, primero se eliminan los actions woocommerce_before_main_content y woocommerce_after_main_content, y a continuación se crean los nuestros propios con el HTML que queramos.
Por lo demás, solo quedaría maquetar la parte de tienda según nuestro diseño o look&feel. WooCommerce a través de sus plantillas y shortcodes pintan HTML con clases propias.
Por defecto WooCommerce dispone de hojas de estilo propias dentro de la carpeta assets/css/ del plugin. Estos CSS están escritos con mimo, usando % en las medidas para intentar ser compatibles con la mayoría de temas, pero lo más probable es que queramos darle un toque para adaptarlo a nuestro diseño.
Para esto lo que podemos hacer es eliminar de la cola de carga de estilos los CSS de WooCommerce, y copiar estos archivos CSS en nuestro tema para editarlos según nuestras necesidades. Incluiremos en nuestro functions.php:
<?php
// Eliminar los CSS de WooCommerce uno por uno
add_filter( 'woocommerce_enqueue_styles', 'woocommerce_dequeue_styles' );
function woocommerce_dequeue_styles( $enqueue_styles ) {
unset( $enqueue_styles['woocommerce-general'] ); // Remove the gloss
unset( $enqueue_styles['woocommerce-layout'] ); // Remove the layout
unset( $enqueue_styles['woocommerce-smallscreen'] ); // Remove the smallscreen optimisation
return $enqueue_styles;
}
// Eliminar todos los CSS de WooCommerce de golpe
add_filter( 'woocommerce_enqueue_styles', '__return_false' );Ahora editaremos a nuestro antojo los CSS que hemos copiado en nuestro tema, para adaptarlos al diseño de nuestra página. Una vez finalizados, los agregaremos a nuestro tema utilizando la función wp_enqueue_style().
¡Ahora nuestro tema es compatible con WooCommerce!
Puede que también te interese
