Modificar plantillas de Woocommerce ¿Como hacerlo de forma correcta?

Modificar plantillas de Woocommerce correctamente es importante para no dejar fuera de funcionamiento un sitio web entero. Sucede mucho que actualizar el plugin de Woocommerce en un sitio de algún cliente puede ser un desastre.

El equipo de desarrollo de Woocommerce es genial y su trabajo admirable, muchas veces algunas actualizaciones realmente le dan una vuelta al plugin entero.

También puedes leer: La mejor herramienta para crear una tienda online en 2019


Recomendación para el equipo si alguno de sus miembros lee éste artículo: No sean tan agresivos con los updates del plugin. No saben cuanto duele ver un sitio caido o con un error fatal porque le dieron la vuelta a la cosa.

Cuando veo la carpeta con la famosa y sencilla entructura en un tema como: tema/woocommerce/plantillas_editadas es como intentar abrir una puerta en la que no sabes que encontrarás. Literalmente es así, nunca sabes lo que encontrarás al intentar modificar plantillas de woocommerce.

Aunque no es una locura modificar plantillas de woocommerce, no es lo que se recomienda a menos que la modificación sea extremadamente necesaria para ajustar los elementos y funciones al diseño inicial dado.

Lamentablemente muchos programadores no siguen un orden o disciplina para programar y lo hacen como si su código nunca más será revisado. Preocupante la verdad, muy preocupante. No sólo por los otros que revisarán tu código, sino también por ti que algún día decidas reciclar lo que hiciste allí.

Las ventajas de programar ordenada y modularmente son muchas, entre ellas el hecho de poder reusar tus scripts en varias partes a la vez. Por eso, Woocommerce creó una serie de recomendaciones útiles para cuando necesites modificar plantillas de Woocommerce.

Actions y Hooks en Woocommerce

Si, de eso estoy hablando. Los hooks (o ganchos) son pequeños pero muy útiles. Es la forma original y más eficiente de modificar plantillas de woocommerce. Por medio de estos actions, filtros y hooks nos permite modificar casi cualquier cosa que se te ocurra en el sitio que implemente woocommerce.

Este es por mucho el mejor método para modificar plantillas de woocommerce. Woocommerce incluye estos elementos para que puedas modificar el aspecto, posición y detalle de cada parte del checkout, shop, del catalogo de productos, etc. Te permite modificar la página del producto, crear widgets, etc.

Para muchos esto puede que sea muchos más complicado que sólo meterse de cabeza en las plantillas y comenzar a borrar o editar. Pero ten en cuenta que Woocommerce lanza actualizaciones constantemente y en alguna de ellas podrías perder todo tu trabajo por no seguir las recomendaciones. Como te dije, el método de editar directamente las plantillas dentro del tema o el plugin es mucho más sencillo pero riesgoso.

Si eres developer debería gustarte aprender, dominar los conocimientos como se domina el balón en el futbol. Woocommerce tiene una comunidad enorme, muy buena y completa. Tiene documentación en la página del proyecto súper explicativa y con suficientes ejemplos. Además de contar con infinidad de tutoriales y formas de hacer las cosas en Stackoverflow, StackExchange (el stackoverflow de wordpress) y muchas páginas y colegas más.


Como plus quisiera recomendarte analizar el código de alguno de sus plugins recomendados en la página oficial del proyecto. En su momento aprendí muchisimo de éste método además que te ayuda a pulir tu lógica al programar en casi cualquier cosa.

Encontrando los actions disponibles en Woocommerce

Hay un montón. El método que uso para encontrar que hook usar es revisar la carpeta de plantillas en el propio plugin de Woocommerce. Como buena práctica te recomiendo que separes tus funciones para editar Woocommerce de tu archivo functions.php del tema. Esto para mantener el orden y lo artístico del código.

Digamos que vas a editar, entonces creas un archivo llamado: tema/includes/function-woocommerce.php luego usar un require_oncepara incluir éste archivo en tu functions.php principal.

Identificando que plantilla muestra la información que deseas modificar te permitirá revisar exactamente el archivo que contiene la guía de hooks y actions. Como ejemplo vamos primero a considerar la plantilla que nos muestra la página de producto: wp-content/plugins/woocommerce/templates/single-product.php

<?php
/**
 * woocommerce_before_main_content hook.
 *
 * @hooked woocommerce_output_content_wrapper - 10 (outputs opening 
 * divs for the content)
 * @hooked woocommerce_breadcrumb - 20
*/
 do_action( 'woocommerce_before_main_content' );
?>

El primer hook que podemos ver en el archivo es llamado do_action( 'woocommerce_before_main_content' );.

WooCommerce (y WordPress en general) usan estos ganchos para añadir otras subplantillas o funciones en cada archivo y vista. Puedes ver como encima de ese gancho se muestra una breve guía de lo que realiza y su posición de prioridad.

Hay una lista super inmensa con todos los hooks que puedes usar para modificar Woocommerce sin tocar las plantillas. Al principio te puede parecer que es más fácil editar las plantillas directamente. A la larga hace el trabajo más dificil y además es poco profesional, menos artístico.

Un modo de ejemplo de usar estos hooks mediante funciones en tu archivo del tema sería como sigue:

<?php
/**
* Usando los hooks mediante actions…
*
*/
add_action( ‘nombre_action’, ‘tu_funcion’ );
function tu_funcion() {
  // Tu código
}
/**
* Usando los hooks mediante filtros…
*
*/
add_filter( ‘nombre_filtro’, ‘tu_funcion_2’ );
function tu_funcion_2( $variable ) {
  // Tu código
  return $variable;
}

El mejor consejo para Woocommerce

De igual forma te recomiendo que le dediques al menos unas 2 horas a leer el Codex de Woocommerce. Te vas a sorprender lo fácil que hace tu vida si sigues sus recomendaciones.

Ojo, no estoy diciendo que nunca nunca debes modificar plantillas de woocommerce. Sin duda habrá momentos en los que tendrás que hacerlo debido a la complejidad de tu diseño. Sin embargo siempre es mejor mantener el estándar y más aún si lo recomienda el propio desarrollador. Piensa, por algo lo dice.

¿Te has encontrado con ‘sorpresas’ en tus proyectos de Woocommerce personalizado? ¿Como has solventado cuando en la opción de status del plugin aparece la lista de deprecated con más elementos de los que quisieras?

Summary
Modificar plantillas de Woocommerce ¿Como hacerlo de forma correcta?
Article Name
Modificar plantillas de Woocommerce ¿Como hacerlo de forma correcta?
Description
Modificar plantillas de Woocommerce correctamente es importante para no dejar fuera de funcionamiento un sitio web entero 😱. Te explicaré paso a paso como hacerlo de la forma correcta ✅.
Author

¿Quieres consejos, recomendaciones y tutoriales?

Suscríbete para obtener acceso inmediato al mundo del desarrollo web, tendencias y productividad.

Deja una respuesta

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