Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)
WooCommerce es la plataforma de eCommerce más popular. Eso se debe en parte a que está construido sobre el sistema de gestión de contenidos más extendido (WordPress), y también en parte a que es gratuito.
Pero también se debe a que WooCommerce, como el propio WordPress, es increíblemente flexible. Si instalas WooCommerce en tu sitio, no solo podrás usarlo para configurar y poner en marcha rápidamente tu tienda online, sino que también podrás personalizarla para que funcione exactamente como necesitas.
La razón por la que WooCommerce es tan flexible se debe a su API. Tiene una amplio rango de acciones y ganchos de filtro, funciones y clases que puedes usar para modificar la forma en la que tu tienda funciona y crear una tienda personalizada que podría funcionar de cualquier forma muy distinta a una tienda WooCommerce estándar, y lista para usar.
Todo esto significa que te es posible construir una tienda WooCommerce totalmente personalizada, o crear y compartir o vender plugins para añadir funcionalidad a WooCommerce, como los que tenemos disponibles en CodeCanyon.
-
Los 20 mejores plugins WordPress para eCommerce disponibles en CodeCanyon
-
Los 20 mejores plugins de envíos y precios para WooCommerce
-
Comparativa de los mejores plugins de afiliados para WooCommerce
-
5 mejores plugins de WordPress para la localización de tiendas
En este artículo, te voy a introducir a esta API. Te ofreceré una visión general sobre la forma en la que está estructurado WooCommerce, y describiré las clases, los ganchos y las funciones que te permiten personalizar tu tienda.
No puedo cubrir todos los aspectos de la API de WooCommerce en detalle, si necesitas esto, te recomiendo que consultes la documentación de WooCommerce, pero te puedo dar la información que necesitas para entender qué es posible y empezar.
Así que vamos a empezar observando cómo está estructurado el plugin WooCommerce.
La estructura del plugin WooCommerce
WooCommerce es un gran plugin. Con todo, tiene cientos de archivos en docenas de carpetas. Todo esto podría hacer las cosas un poco desalentadoras, pero la buena noticia es que en realidad no es difícil de comprentender o modificar. Como WooCommerce está estructurado de forma clara y lógica, y como tiene comentarios a lo largo de todo su código, no cuesta mucho esfuerzo averiguar lo que está pasando.
A menudo termino buceando en el código fuente del plugin WooCommerce cuando estoy personalizando sitios de WooCommerce para clientes.
En el nivel superior, hay cuatro archivos y cinco carpetas.
Los archivos tienen nombres bastante auto-explicativos, y estándar en una gran cantidad de plugins: license.txt, readme.txt, uninstall.php, y woocommerce.php. El último de esos archivos es el más importante: woocommerce.php es el archivo que impulsa el plugin y llama a todos los demás archivos ubicados en esas carpetas, ya sea directa o indirectamente.
Además de esos archivos, hay carpetas para diferentes tipos de archivos:
- assets, que contiene subcarpetas para CSS, fuentes, imágenes y scripts.
- i18n, que incluye archivos de internacionalización.
- sample-data, que está vacío de forma predeterminada, pero se puede utilizar para datos ficticios.
- includes, que incluye las clases, funciones, etc. que hacen que WooCommerce funcione. La mayoría de los archivos que estarás viendo al personalizar WooCommerce están en esta carpeta.
- templates, que incluye los archivos de plantilla que generan contenido en tu sitio.
No voy a profundizar en los detalles de la estructura de carpetas, ya que eso llevaría mucho tiempo. Pero si estás planeando personalizar WooCommerce, te recomiendo que te tomes un tiempo observando a través de los archivos y descubras cómo están estructurados.
Advertencia: Si estás planeando personalizar WooCommerce, nunca deberías editar directamente el plugin. En su lugar, escribe tu propio plugin o añade personalizaciones a tu tema.
Clases WooCommerce
Voy a empezar con las clases en WooCommerce, ya que es una clase lo que desencadena todo desde el archivo principal del plugin.
Aquí está el contenido del archivo woocommerce.php:
1 |
<?php
|
2 |
/**
|
3 |
* Plugin Name: WooCommerce
|
4 |
* Plugin URI: https://woocommerce.com/
|
5 |
* Description: An eCommerce toolkit that helps you sell anything. Beautifully.
|
6 |
* Version: 3.6.4
|
7 |
* Author: Automattic
|
8 |
* Author URI: https://woocommerce.com
|
9 |
* Text Domain: woocommerce
|
10 |
* Domain Path: /i18n/languages/
|
11 |
*
|
12 |
* @package WooCommerce
|
13 |
*/
|
14 |
|
15 |
defined( 'ABSPATH' ) || exit; |
16 |
|
17 |
// Define WC_PLUGIN_FILE.
|
18 |
if ( ! defined( 'WC_PLUGIN_FILE' ) ) { |
19 |
define( 'WC_PLUGIN_FILE', __FILE__ ); |
20 |
}
|
21 |
|
22 |
// Include the main WooCommerce class.
|
23 |
if ( ! class_exists( 'WooCommerce' ) ) { |
24 |
include_once dirname( __FILE__ ) . '/includes/class-woocommerce.php'; |
25 |
}
|
26 |
|
27 |
/**
|
28 |
* Returns the main instance of WC.
|
29 |
*
|
30 |
* @since 2.1
|
31 |
* @return WooCommerce
|
32 |
*/
|
33 |
|
34 |
function WC() { // phpcs:ignore WordPress.NamingConventions.ValidFunctionName.FunctionNameInvalid |
35 |
return WooCommerce::instance(); |
36 |
}
|
37 |
|
38 |
// Global for backwards compatibility.
|
39 |
$GLOBALS['woocommerce'] = WC(); |
La línea clave aquí es esta:
1 |
if ( ! class_exists( 'WooCommerce' ) ) { |
2 |
include_once dirname( __FILE__ ) . '/includes/class-woocommerce.php'; |
3 |
}
|
Esto llamará a la clase WooCommerce y comenzará a ejecutar WooCommerce en tu sitio.
Puedes encontrar todas las clases en la carpeta /includes. Por alguna razón, no están en una subcarpeta llamada classes (lo que haría las cosas mucho más lógicas para mi mente organizada), pero están directamente dentro de esta carpeta. Uno de estos archivos es el archivo class-woocommerce.php, invocado desde ese archivo de apertura.
Este no es el único archivo con clases; encontrarás el resto en la misma carpeta /includes. También encontrarás una guía sobre todas las clases en la documentación de WooCommerce.
Puedes usar las clases en WooCommerce creando tus propias clases en tus plugins o tema, y después modificar o extender lo que esas clases hacen. Esto es probablemente el aspecto más complejo de WooCommerce a personalizar, y tendrás que estar familiarizado con la programación orientada a objetos para hacerlo. Si quieres hacer algo sencillo, es posible que trabajar con funciones y ganchos sea suficiente para cubrir tus necesidades.
Lo que me lleva a:
Funciones WooCommerce
WooCommerce, como la mayoría de los plugins, utiliza una serie de funciones para ejecutar tu tienda. Puedes anular algunas de estas funciones o puedes crear tus propias funciones alternativas para anularlas o añadirlas, asegurándote de adjuntarlas a los ganchos relevantes en WooCommerce.
Puedes encontrar detalles sobre las funciones de WooCommerce en la documentación de WooCommerce, incluyendo detalles sobre cómo se activa cada función. Las funciones en sí están todas en los diversos archivos de funciones ubicados en la carpeta /includes, que se denominan wc-xxx-functions.php, donde xxx indica qué tipo de funciones son (por ejemplo, wc-template-functions.php para las funciones en los archivos de plantilla, wc-cart-functions.php para funciones relacionadas con el carro de compra).
Si quieres modificar una función de WooCommerce en tu plugin, tendrás que desenganchar la función WooCommerce del gancho de acción o de filtro al que está conectado y luego escribir tu propia función para reemplazarla. Así que imaginemos que quieres modificar la función wc_setup_loop(), que está unida al gancho woocommerce_before_shop_loop. Escribirías algo como esto:
1 |
function tutsplus_remove_wc_setup_loop() { |
2 |
remove action( ‘woocommerce_before_shop_loop’, ‘wc_setup_loop’ ); |
3 |
}
|
4 |
add_action( ‘init’, ‘tutsplus_remove_wc_setup_loop’ ) |
Eso desengancharía la acción del plugin WooCommerce. A continuación, escribirías tu propia versión modificada de esa función wc_setup_loop() y la activarías de la siguiente manera:
1 |
function tutsplus_wc_setup_loop() { |
2 |
// contents of function here
|
3 |
}
|
4 |
add action( ‘woocommerce_before_shop_loop’, ‘tutsplus_wc_setup_loop’ ); |
A veces querrás añadir una función distinta a las funciones ya existentes de WooCommerce, en cuyo caso necesitarás familiarizarte con los ganchos de acción y de filtro en WooCommerce. Engancha la función al gancho correspondiente y asegúrate de usar la prioridad para activarla antes o después de las existentes.
Alternativamente, algunas de las funciones de WooCommerce se pueden conectar, lo que significa que puedes anularlas escribiendo tu propia función con el mismo nombre. Llegaremos a eso en breve.
Ganchos de acción y filtro de WooCommerce
WooCommerce utiliza un gran número de ganchos de acción y filtro para ejecutar su código, en lugar de codificar funciones directamente en los archivos de plantilla, por ejemplo.
Esto te da mucha más flexibilidad y significa que puedes personalizar la salida de WooCommerce sin tener que crear duplicados de los archivos de plantilla.
Imaginemos que deseas modificar la salida del código en la página de un solo producto. Esto está contenido en el archivo content-single-product.php, que se encuentra en la carpeta /templates.
La mayor parte del código de este archivo de plantilla está formado por ganchos, a los que se adjuntan funciones. El archivo contiene texto comentado que te indica exactamente qué funciones están asociadas a qué ganchos.
Aquí tienes un ejemplo: el gancho woocommerce_before_single_product_summary. En el archivo de plantilla, hay un comentario que enumera las funciones asociadas a este gancho y, a continuación, el propio gancho se activa mediante do_action().
1 |
<?php
|
2 |
/**
|
3 |
* Hook: woocommerce_before_single_product_summary.
|
4 |
*
|
5 |
* @hooked woocommerce_show_product_sale_flash - 10
|
6 |
* @hooked woocommerce_show_product_images - 20
|
7 |
*/
|
8 |
do_action( 'woocommerce_before_single_product_summary' ); |
9 |
?>
|
Después, debes encontrar las funciones enganchadas a este gancho de acción si deseas modificarlas o reemplazarlas. Puedes encontrar el listado completo de estas funciones en la documentación de WooCommerce.
Encontrarás el código de las funciones en distintos archivos dentro de la carpeta /includes. Las funciones tienden a estar en archivos denominados de forma lógica. Así, por ejemplo, la función woocommerce_show_product_images() en el código de ejemplo anterior, enganchada en el gancho woocommerce_before_single_product_summary en el archivo content-single-product.php, está en el archivo wc-template-functions.php, que contiene funciones conectadas directamente a los ganchos en los archivos de plantilla.
Como puedes ver, conocer la API de WooCommerce puede implicar un poco de exploración a través de la estructura de archivos, pero una vez te hayas familiarizado con esto, descubrirás que la estructura es bastante lógica y que la mayoría de las veces, es fácil identificar dónde está un fragmento de código. Si no lo encuentras, simplemente búscalo en la documentación de WooCommerce, y eso te dirá dónde encontrarlo.
La función woocommerce_show_product_images() mencionada anteriormente es conectable, lo que significa que puedes anularla en tu propio plugin o en tu tema.
1 |
if ( ! function_exists( 'woocommerce_show_product_images' ) ) { |
2 |
/**
|
3 |
* Output the product image before the single product summary.
|
4 |
*/
|
5 |
function woocommerce_show_product_images() { |
6 |
wc_get_template( 'single-product/product-image.php' ); |
7 |
|
8 |
}
|
9 |
}
|
Simplemente escribe otra función con el mismo nombre. Cuando WordPress llegue a la función conectable en WooCommerce, comprobará si existe otra función con el mismo nombre, y como la hay, no ejecutará la versión de WooCommerce de la función: en lugar de eso ejecutará la tuya. Asegurate de asignar a tu función exactamente el mismo nombre.
Archivos de plantilla de WooCommerce
Gran parte de la personalización que mis clientes solicitan que haga en WooCommerce está relacionada con la salida de los archivos de plantilla. WooCommerce hace que sea fácil alterar la salida de código de cada archivo de plantilla, y también añadir tu propio código personalizado. Esto podría consistir en una versión modificada del código que ya existe en WooCommerce (como hemos visto anteriormente), o podría ser algo completamente nuevo.
Si quieres personalizar radicalmente un archivo de plantilla de WooCommerce, puedes crear una nueva versión de ese archivo en tu tema, y WordPress usará ese archivo en lugar del archivo ubicado en el directorio del plugin.
Así que si quisieras reemplazar el archivo content-single-product.php, crearías una carpeta /woocommerce en tu tema, y luego dentro de ella crearías un archivo llamado content-single-product.php. Si el archivo de plantilla que querías reemplazar está más abajo en la estructura de archivos de WooCommerce, tendrás reflejar esta también en tu tema. De manera que si quisieras reemplazar el archivo woocommerce/templates/emails/admin-cancelled-order.php, crearías un archivo en mitema/woocommerce/emails/admin-cancelled-order.php.
La forma más fácil de crear el archivo es crear un duplicado del archivo original de WooCommerce y luego editarlo, para que puedas estar seguro de que el archivo funcionará correctamente.
Como alternativa, si solo deseas modificar una de las funciones invocadas en ese archivo de plantilla, crea una nueva función y, a continuación, elimina la existente en su correspondiente gancho de acción, como se detalló anteriormente. O si la función es conectable, ¡sólo tienes que escribir una nueva versión!
Crear tu propio plugin de WooCommerce
Ahora que entiendes las clases, ganchos, funciones y archivos de plantilla de WooCommerce y cómo personalizarlos, es hora de escribir tu propio plugin para WooCommerce.
Si todo lo que quieres hacer es reemplazar un archivo de plantilla de WooCommerce, no necesitarás escribir un plugin: simplemente agrega el archivo a tu tema en su lugar. Pero si quieres añadir alguna funcionalidad personalizada, deberías hacerlo a través de un plugin.
WooCommerce Plugin Developer Handbook (Manual para desarrolladores plugins de WooCommerce, en español) proporciona orientación sobre cómo hacerlo correctamente. Incluye consejos sobre cómo comprobar si WooCommerce está activo, sobre dominios de texto, sobre nombres de archivos y mucho más.
Antes de crear tu plugin, debes revisar los consejos del manual y asegurarte de que estás codificando tu plugin correctamente.
La API de WooCommerce te ofrece una flexibilidad sin fin
Comprender la API de WooCommerce te ayudará a personalizar tu tienda WooCommerce y crear plugins que puedas usar para mejorar la funcionalidad de varias tiendas o que otras personas pueden usarlo para conseguirlo.
Vale la pena tomarse un tiempo para explorar la estructura de archivos WooCommerce y la documentación para conocer cómo funciona este complejo pero bien estructurado y lógico plugin, de manera que puedas aprovecharlo al máximo. ¡Feliz personalización!
WordPressCrea un método de envío personalizado para WooCommerce- WooCommerceLos 20 mejores plugins de envío y precios para WooCommerce
- WordPressComparativa de los mejores plugins de afiliados para WooCommerce
WordPressAñade pasarelas de pago a tu tienda WooCommerce
WordPressCómo construir un sitio web de afiliados de Amazon con un plugin de afiliados para WooCommerce
By
