Codificación para WooCommerce: una introducción

Esta es una introducción para desarrolladores principiantes al complemento WordPress WooCommerce. En esta publicación, veremos los conceptos básicos de cómo funciona WooCommerce y cómo podemos personalizarlo en nuestro tema o complemento utilizando ganchos y plantillas.

En primer lugar, WooCommerce ofrece una gran flexibilidad para que los desarrolladores de temas y complementos ajusten su funcionalidad. Para modificaciones simples, generalmente tiene al menos dos alternativas para hacerlo. La elección de cómo modificar depende de cómo prefiera trabajar, qué tan flexible y legible debe ser su código, y cómo prefiere seguir haciendo el mantenimiento futuro de su sitio cuando se trata de actualizaciones de complementos (y WordPress).

Antes de comenzar a buscar la modificación de la funcionalidad de WooCommerce a través del código, debe verificar si lo que desea lograr es posible cambiando la configuración. WooCommerce viene con una gran página de configuración que le permite cambiar bastante. En versiones más recientes, WooCommerce también ha agregado y movido configuraciones adicionales al Personalizador de WordPress. Aquí podrá, por ejemplo, ajustar el número de columnas y ajustar algunos de los campos de pago.

Plantillas WooCommerce

WooCommerce ofrece una gran variedad de archivos de plantilla que usted, como desarrollador de temas, puede anular. La forma de hacerlo es haciendo una copia de la plantilla original de WooCommerce en la carpeta de su tema. Y luego realiza los cambios en el archivo en su tema.

Navegue a su carpeta de complementos de WooCommerce en formato /wp-content/plugins/woocommerce/. Aquí encontrará la subcarpeta templates. Todo el contenido de los archivos (¡hay mucho!), /wp-content/plugins/woocommerce/templates/incluidas sus subcarpetas, son todos los archivos de plantilla que puede anular en su tema.

Para que WooCommerce encuentre sus plantillas modificadas, necesita una subcarpeta en el directorio raíz de su tema llamada woocommerce. Si el slug de su tema es ‘awhitepixel’, entonces su carpeta debe estar ubicada en /wp-content/themes/awhitepixel/woocommerce/. Dentro de esta carpeta puede colocar sus copias modificadas de los archivos de plantilla de WooCommerce. Tenga en cuenta que los archivos de plantilla ubicados en subcarpetas deben colocarse en las subcarpetas correspondientes en su carpeta de woocommerce. Por ejemplo; anular WooCommerce /templates/single-product/add-to-cart/simple.phprequiere que coloque su copia simple.phpen /woocommerce/single-product/add-to-cart/la carpeta de su tema.

También habrás notado que hay muchas acciones y filtros en las plantillas. La mayoría de ellos están llenos de do_action()s. Para un uso óptimo de WooCommerce, no debe eliminar ninguno de los ganchos de las plantillas. En la mayoría de los casos, podría considerar cambiar la funcionalidad mediante el uso de acciones y filtros en lugar de anular las plantillas. ¡Déjame explicarte por qué!

Nota importante sobre la anulación de plantillas y actualizaciones de complementos

Para un principiante, anular una plantilla puede parecer la solución más fácil e intuitiva. ¿Por qué meterse con ganchos si puede cambiar directamente la plantilla que genera lo que desea cambiar? Respuesta: Porque esta estrategia genera más trabajo para mantener el mantenimiento de su tienda web.

WooCommerce se actualiza con frecuencia y, a veces, actualiza un archivo de plantilla. Para mantener su tienda web actualizada, también deberá actualizar los archivos de plantilla anulados en su tema. Por lo general, deberá reemplazar todo el archivo de plantilla con el archivo actualizado más reciente y luego volver a agregar los cambios. Esto rápidamente se vuelve mucho más difícil si no recuerda todos los cambios que realizó. Confíe en mí, que tengo años de experiencia en la reparación de archivos de plantilla de WooCommerce de otros desarrolladores durante las actualizaciones de complementos. Confía en mí, ¡no es un trabajo divertido!

Ahora que sabemos que los ganchos son una mejor estrategia, veamos cómo hacerlo.

Ganchos de WooCommerce

WooCommerce ofrece una enorme cantidad de ganchos, tanto de acciones como de filtros. ¡Usar ganchos es realmente muy simple!

Con los ganchos, también puede modificar mucho más que solo la salida de las plantillas. Puede personalizar los precios de los productos, los campos de pago o hacer que su tienda web haga algo cuando se agrega un producto al carrito.

Si está desarrollando un complemento, los ganchos también son el único camino a seguir. Solo puede anular plantillas en un tema, no en un complemento. (Está bien, hay formas de superar esto, pero es muy poco común y no se recomienda).

Si ha buscado en algunos de los archivos de plantilla de WooCommerce, debería haber visto muchos archivos do_action(). Estos son ganchos; puntos de control a los que puede conectarse y agregar su código o modificar una variable. Si no está seguro de cómo funcionan los ganchos, tengo una publicación que explica esto en profundidad.

Si desea generar algo, por ejemplo, un texto o algo similar, busque acciones (do_action()). Por ejemplo, al generar algo en la plantilla del carrito, tiene la opción de conectarlo a woocommerce_before_cart, woocommerce_before_cart_table, woocommerce_before_cart_contents, woocommerce_cart_contents, woocommerce_cart_actions, woocommerce_after_cart_contents, woocommerce_after_cart_table, woocommerce_cart_collateralso woocommerce_after_cart. Simplemente elija el que está posicionado donde desea su salida. Este es un ejemplo de mostrar un texto antes de la tabla y el formulario en la página del carrito:

add_action('woocommerce_before_cart', function() {
    _e('Here are the products you have added in the cart so far', 'textdomain');
});

Los filtros (busque apply_filters()) son para modificar una salida o una variable. Un uso común de los filtros en WooCommerce es modificar el texto "Agregar al carrito" en los botones de compra. WooCommerce ofrece múltiples filtros para esto, lo que le permite controlar el texto en diferentes páginas. Por ejemplo, puede personalizar el texto en el ciclo de la tienda o en la vista de un solo producto. Los filtros a menudo proporcionan múltiples argumentos para un mayor control; por ejemplo, el objeto del producto. Aquí hay un ejemplo simple sobre cómo cambiar los textos "Agregar al carrito" en la vista de un solo producto:

add_filter('woocommerce_product_single_add_to_cart_text', function($original_text, $product) {
    return __('Buy this', 'textdomain');
}, 10, 2);

Con un poco de conocimiento de cómo funcionan los ganchos y simplemente mirando dentro de los archivos de plantilla, puede encontrar una gran cantidad de funciones fácilmente modificables. Obviamente WooCommerce ofrece modificaciones mucho más avanzadas, cambio de precios, métodos de pago, modificaciones de productos o importaciones, todo ello posible con el uso de ganchos.

Conclusión

El propósito de esta publicación es brindarle al principiante los conceptos básicos sobre cómo realizar modificaciones en WooCommerce y las consecuencias de cómo realiza los cambios. Siempre recomiendo usar ganchos en lugar de sobrescribir archivos de plantilla, a menos que sea absolutamente necesario.

El siguiente paso es sumergirse en modificaciones avanzadas conociendo los ganchos, procesos y objetos en WooCommerce. Como WooCommerce es la plataforma de comercio electrónico más popular que existe, hay muchos recursos y ejemplos de código disponibles en la web. Eche un vistazo a la categoría Woocommerce aquí en este sitio para obtener más información también.