Una Introducción a Temas WooCommerce para WordPress

WooCommerce es una plataforma eCommerce popular para WordPress que está siendo desarrollara rápidamente por WooThemes. En este artículo, te voy a guiar a través de los fundamentes de hacer temas para WooCommerce.

Este artículo hace unas cuantas suposiciones sobre tu entorno de desarrollo:

1. Tienes WordPress y WooCommerce Instalados.
2. Estás familiarizado con crear temas WordPress y usar HTML y CSS.
3. Has usado las Herramientas de Desarrollador Chrome o herramientas de desarrollo web similares tales como Firebug.

Personalizando el CSS WooCommerce

Fuera de la caja, WooCommerce viene con algún CSS integrado que apunta a hacerlo compatible con tantos temas como sea posible. El CSS por defecto es un gran punto de inicio pero es poco probable que vaya a empatar perfectamente con el estilo de tu tema justo después de la instalación.

Así pues, hay dos maneras de editar el CSS para un tema WooCommerce:

1. Puedes usar los estilos por defecto como una base y anularlos.
2. Podrías optar por deshabilitar los estilos por defecto y comenzar desde cero.

Anulando Estilos por Defecto

Anular los estilos por defecto es la manera más rápida de comenzar y probablemente se ajusta a la mayoría de las personas.

Podrías copiar todo el archivo CSS WooCommerce por defecto (localizado en wp-content\plugins\woocommerce\assets\css\woocommerce.css o woocommerce.less), quita cualquier cosa que no quieras, y cambia cualquier cosa que necesites, sin embargo, esto puede consumir tiempo, y podría resultar en mucho CSS repetido.

Para ese fin, normalmente uso la siguiente aproximación:

1. Navego a través del sitio encontrando los estilos que necesito cambiar.
2. Después de eso, uso las Herramientas de Desarrollador Chrome (o herramienta similar) para identificar las clases, e incluso hacer los cambios en el navegador para asegurar que entiendo cómo va a lucir. Esto usualmente se  hace dando clic derecho en la página y eligiendo "inspeccionar elemento" desde la lista desplegable.
3. Después, copio el CSS desde las Herramientas de Desarrollador Chrome al CSS de mi tema.
4. Reviso el CSS en Herramientas de Desarrollador Chrome ya que podría tachar o poner en gris cualquier estilo prefijado para otros navegadores. Es importante cambiar estos valores para poder mantener tu CSS consistente a lo largo de los distintos navegadores que tus visitantes podrían estar usando.
5. Finalmente, quito cualquier valor que no cambié en el CSS copiado. Por ejemplo, si cambié el ancho de algo, pero no la altura, entonces no necesito incluir la altura en mi archivo CSS personalizado.

Personalmente, encuentro que esta aproximación funcione en la mayoría de los casos y realmente reduce el tiempo de desarrollo.

Deshabilitando la Hoja de Estilo Por Defecto y Comenzando Desde Cero

La hoja de estilo por defecto puede ser deshabilitada agregando un pequeño pedazo de código a tus temas functions.php:

1

define('WOOCOMMERCE_USE_CSS', false);

La manera más rápida de obtener todas las clases WooCommerce es copiar el archivo CSS WooCommerce original al tuyo y quitar cualquiera que no necesites.

Declarando Soporte WooCommerce en Tu Tema

Esto es particularmente importante si estás vendiendo temas o liberándolos al público.

Sin declarar específicamente soporte WooCommerce dentro de tu tema, a los usuarios se les mostrará un mensaje de error en la instalación de WooCommerce y permanecerá ahí hasta que sea descartado.

Afortunadamente, esto puede ser resuelto con un pequeño pedazo de código insertado en el archivo functions.php de tu tema:

1

add_theme_support( 'woocommerce' );

Sumergiéndose un Poco Más Profundo: Editando Plantillas

Editar CSS dentro de WooCommerce te llevará bastante lejos, ¿pero qué si realmente quieres personalizar el diseño de las páginas? Por suerte, hay una manera agradable de hacer esto.

El complemento WooCommerce viene con un número de plantillas HTML front-end así como plantillas de email. En vez de editar estos archivos directamente dentro del complemento (¡lo cuál es una muy mala idea porque una vez que actualices el complemento todos tus cambios se perderán!), puedes copiarlos en tu tema:

1. En el tema de tu directorio, haz una nueva carpeta llamada "woocommerce."
2. Navega al directorio del complemento WooCommerce y abre la carpeta "templates". La carpeta de plantillas tiene muchas sub-carpetas con todas las diferentes plantillas que WooCommerce utiliza. Afortunadamente, la estructura de archivo y nombrado de plantilla en WooCommerce es fácil de seguir.
3. En tu recién creada carpeta "woocommerce", copia el archivo de plantilla que quieres editar. Recuerda mantener igual la estructura de directorio aquí. Si la plantilla que quieres editar está dentro de una sub-carpeta entonces recuerda crear la sub-carpeta dentro del directorio de tu tema.
4. Edita el archivo desde dentro de tu carpeta "woocommerce" y guarda los cambios.

Un Ejemplo Práctico

Digamos que queremos cambiar un poco del HTML dentro de la pantalla "Mis Órdenes" de WooCommerce.

La primera cosa que necesitamos es localizar la plantilla correcta. En este caso, la sección "Mis Órdenes" está bajo "Mi Cuenta" en WooCommerce. La estructura de directorio luce como lo siguiente:

/wp-content/plugins/woocommerce/templates/myaccount/my-orders.php

Después, haz una carpeta dentro de tu tema llamada "woocommerce" y dentro de esa carpeta haz una segunda carpeta llamada "micuenta." Después de eso, copia el archivo my-orders.php a ese directorio.

Deberías quedarte con lo siguiente:

/wp-content/themes/yourtheme/woocommerce/myaccount/my-orders.php

Cualquier cambio hecho a este archivo anulará ahora al original.

El Ciclo WooCommerce

Si has creado o editado temas WordPress antes, entonces deberías estar familiarizado con El Ciclo. WooCommerce tiene su propio ciclo que puedes usar el cuál te permite personalizar páginas WooCommerce. Por ejemplo, podrías querer hacer esto cuando quisieras cargar una barra lateral diferente para tus páginas WooCommerce.

Esta es la integración más básica y creando una plantilla personalizada WooCommerce esto será aplicado a cada página WooCommerce, incluyendo productos, categorías y archivos. Si no quieres que tu plantilla WooCommerce luzca diferente a tu plantilla estándar, entonces no tienes que crear una plantilla WooCommerce personalizada.

Crear una plantilla es un proceso sencillo:

• Duplica el archivo page.php de tu tema y renómbralo a woocommerce.php.
• Encuentra el ciclo WordPress dentro de tu archivo woocommerce.php. Lucirá algo como:

1

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

2

<?php the_title(); ?

3

<?php the_content(); ?>

4

<?php endwhile; endif; ?>

• Reemplaza tu ciclo con el ciclo WooCommerce: <?php woocommerce_content(); ?>
• Ahora, haz cualquier cambio posterior que desees tal como cambiar a una barra lateral diferente o cambiar el diseño.

Concluyamos

Ahora sabes los fundamentos para integrar la plataforma eCommerce WooCommerce a tus temas WordPress.

La habilidad cubierta en este artículo te tendrá cubierto para la mayoría de las situaciones en WooCommerce. SI necesitas una integración de tema más avanzada o flexible entonces el siguiente paso es explorar los distintos ganchos, filtros y declaraciones condicionales disponibles para usar con WooCommerce.

Enlaces Útiles: Complementos WooCommerce desde CodeCanyon.