Crear un tema para Woocommerce es muy parecido a crear un tema para WordPress, los conceptos son los mismos lo que único que cambia es que tenemos definidas nuevos ficheros para categorías de productos, productos, etc.
Plantilla base
Igual que sucede con WordPress tenemos un core que es la base de la tienda, pero en este caso se encuentra en la carpeta plugins/woocommerce/includes si tenemos dudas de alguna función de Woocommerce podemos echar un vistazo en estos ficheros.
Y la otra carpeta que sirve de guía para crear nuestro tema es /templates/. En esta carpeta tenemos todos los ficheros que puede tener nuestra tienda online. De hecho podemos copiar esta carpeta dentro de nuestro tema de WordPress pero en vez de llamarse template debe llamarse Woocommerce.
En este caso tendríamos la tienda muy básica, así que otra buena idea es descargarse el tema storefront este tema es gratuito y está desarrollado por los creados de Woocommerce así que la calidad está garantizada.
En cuanto a las actualizaciones de Woocommerce, estas se realizan en el plugin, y lo que debemos hacer es actualizar la carpeta Woocommece de nuestro tema, pero con cuidado de no perder los cambios estéticos realizados. En este sentido el plugin nos facilita un poco este trabajo ya que desde woocommerce -> estado -> plantillas podemos ver que ficheros debemos actualizar, los cambios son en nombres u funcionamiento de funciones, que se han cambiado.
Hooks de la tienda online
Los hooks son trozos de código fuente que se pueden llamar para modificar el funcionamiento de ciertas funcionalidades de WordPress, puedes ver más información aquí.
En Woocommerce podemos encontrar información de los hooks en 2 sitios:
- En las propias páginas de la plantilla maestra dentro del plugin. Por ejemplo, en content-single-product.php podemos ver:
/** * woocommerce_single_product_summary hook. * @hooked woocommerce_template_single_title - 5 * @hooked woocommerce_template_single_rating - 10 * @hooked woocommerce_template_single_price - 10 * @hooked woocommerce_template_single_excerpt - 20 * @hooked woocommerce_template_single_add_to_cart - 30 * @hooked woocommerce_template_single_meta - 40 * @hooked woocommerce_template_single_sharing - 50 * @hooked WC_Structured_Data::generate_product_data() - 60 */ do_action( 'woocommerce_single_product_summary' );ingle_meta - 40 * @hooked woocommerce_template_single_sharing - 50 * @hooked WC_Structured_Data::generate_product_data() - 60 */ do_action( 'woocommerce_single_product_summary' );
- En la web oficial del plugin.
Por ejemplo, en la vista de un producto podemos cambiar el orden de la información, el número que vemos junto al hook es el orden de visualización, por tanto si queremos poner el precio encima de la puntuación, podemos hace algo cómo:
remove_action('woocommerce_single_product_summary','woocommerce_template_single_price',10);
add_action('woocommerce_single_product_summary','woocommerce_template_single_price',55);
En primer lugar nos referimos al bloque woocommerce_single_product_summary y le decimos que borre la función que muestra el precio, y en la segundo le decimos que lo posición 55 que es la última de los objetos del bloque.
Otra forma de usar los hooks es la siguiente:
add_action( 'woocommerce_archive_description', 'woocommerce_category_image', 2 );
function woocommerce_category_image() {
if ( is_product_category() ){
global $wp_query;
$cat = $wp_query->get_queried_object();
$thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );
$image = wp_get_attachment_url( $thumbnail_id );
if ( $image ) { echo '<img src="' . $image . '" alt="' . $cat->name . '" />'; }
}
}
En este caso estamos mostrando las imágenes de las categorías de productos.