Ganchos y filtros de WooCommerce: funciones y diferencias.
Cuando se trata de desarrollo personalizado en WooCommerce, es fundamental comprender sus dos mecanismos de extensión principales: los ganchos y los filtros. Ambos son componentes importantes de la arquitectura central de WordPress, pero sirven para fines distintos.
HooksLos “ganchos” (hooks) son interfaces reservadas por WooCommerce en ciertos puntos del ciclo de vida de ejecución del código, que te permiten incorporar tu propio código para realizar nuevas acciones o funciones. Existen dos tipos de ganchos:Actions(Acción) yFilters(Filtros). En pocas palabras, los hooks de acción se utilizan para “hacer algo”, no devuelven ningún valor y solo brindan la oportunidad de ejecutar tu código personalizado en un momento determinado. Por ejemplo, agregar un banner después de que se cargue la página del carrito de compras. Los hooks de filtro se utilizan para “modificar algo”, reciben un valor, te permiten modificar ese valor y luego debes devolver el valor modificado. Por ejemplo, modificar el formato de visualización del precio de un producto.
Filters(Los filtros) son un tipo de hook, pero, debido a su semántica específica de “modificar y devolver”, suelen mencionarse junto con los hooks de acción. Un malentendido común es intentar devolver un valor usando un hook de acción, lo que provocará que el código falle. Identificar claramente si lo que necesitas es “ejecutar una acción” o “modificar datos” es el primer paso para elegir la herramienta adecuada.
Lecturas recomendadas Comprender en profundidad los hooks y filtros del núcleo de WordPress: desde lo básico hasta la programación práctica.。
La interfaz central de ganchos y filtros.
El uso de ganchos y filtros depende principalmente de varias funciones básicas proporcionadas por WordPress. Dominar estas funciones es la base para realizar cualquier personalización.
La función central de los ganchos de acción.
La función más utilizada esadd_action()Este función se usa para “suscribir” tu función personalizada a un gancho de acción específico. Su sintaxis básica incluye el nombre del gancho, la función de devolución de llamada, la prioridad y la cantidad de parámetros aceptados. La prioridad determina el orden de ejecución cuando se montan varias funciones en el mismo gancho; cuanto menor sea el número, mayor será la prioridad.
add_action(‘woocommerce_before_add_to_cart_button’, ‘my_custom_message’, 10, 0 );
function my_custom_message() {
echo ‘<p>¡Por favor, compruebe las especificaciones antes de realizar la compra!</p>’;
}El código anterior muestra un mensaje personalizado antes del botón “Añadir al carrito”.
La función central de los ganchos de filtro.
En consecuencia, para modificar los datos, es necesario utilizaradd_filter()Una función. Su estructura es similar a la de un programa.add_action()Algo similar, pero tu función de devolución de llamada debe recibir un valor de entrada y devolver un valor.
add_filter( ‘woocommerce_currency_symbol’, ‘change_currency_symbol’, 10, 2 );
function change_currency_symbol( $currency_symbol, $currency ) {
if ( $currency == ‘USD’ ) {
$currency_symbol = ‘US$’;
}
return $currency_symbol;
}Este ejemplo modifica el símbolo del dólar de “$” a “US$”.
Lecturas recomendadas Mejorar la tasa de conversión en comercio electrónico: Análisis detallado de las estrategias de optimización de las páginas de productos en WooCommerce。
Caso práctico: página de producto personalizada.
La página del producto es una parte fundamental de WooCommerce, y mediante los ganchos se puede modificar significativamente su diseño y la presentación de la información. Los siguientes ganchos pueden ayudarte a identificar con precisión los puntos que necesitan modificación.
Agregar contenido antes de la sección de “Agregar al carrito”
woocommerce_before_add_to_cart_formYwoocommerce_before_add_to_cart_buttonEstos son dos ganchos comunes. El primero se activa antes de todo el formulario y es adecuado para agregar banners o bloques de advertencia; el segundo se activa entre el campo de entrada de números y el botón, y es ideal para agregar breves explicaciones o casillas de verificación.
add_action( ‘woocommerce_before_add_to_cart_button’, ‘add_product_notes_field’ );
function add_product_notes_field() {
echo ‘<div class="“product-notes”"><label>Requisitos de personalización:</label><textarea name="“customer_notes”"></textarea></div>’;
}Modificar la salida del resumen del producto.
La breve descripción del producto es proporcionada porwoocommerce_short_descriptionControl de filtros. Puede usarlo para modificar el contenido de la descripción, por ejemplo, agregando un texto genérico después de todas las descripciones.
add_filter( ‘woocommerce_short_description’, ‘append_to_short_description’ );
function append_to_short_description( $desc ) {
$desc .= ‘<p><em>Este producto admite devoluciones sin ningún motivo durante 7 días.</em></p>’;
return $desc;
}Caso práctico: carrito de compras personalizado y proceso de pago.
El carrito de compras y la página de pago son etapas fundamentales del proceso de conversión, y su optimización puede mejorar directamente la experiencia del usuario y la tasa de finalización de pedidos.
Agregar información global después del formulario del carrito de compras.
woocommerce_after_cart_tableLos ganchos te permiten insertar contenido después de la tabla de artículos del carrito de compras y antes del resumen del carrito, como por ejemplo, instrucciones sobre códigos promocionales o estimaciones de gastos de envío.
add_action( ‘woocommerce_after_cart_table’, ‘add_cart_promotion_notice’ );
function add_cart_promotion_notice() {
echo ‘<div class="“cart-promotion”">¡Envío gratuito para pedidos superiores a 500 yuanes!</div>’;
}Modificar los campos de liquidación.
El sistema de campos de pago de WooCommerce es altamente configurable y hace un uso intensivo de filtros. Por ejemplo, para modificar la etiqueta y el marcador de posición del campo “Dirección 2”, se puede utilizar lo siguiente:woocommerce_default_address_fieldsO, más específicamente…woocommerce_billing_fieldsFiltros.
Lecturas recomendadas Guía de WooCommerce: Cómo crear desde cero un potente sitio web de comercio electrónico para WordPress。
add_filter( ‘woocommerce_default_address_fields’, ‘modify_address_2_field’ );
function modify_address_2_field( $fields ) {
if ( isset( $fields[‘address_2’] ) ) {
$fields[‘address_2’][‘label’] = ‘公寓、套房、单元等（可选）’;
$fields[‘address_2’][‘placeholder’] = ‘可不填’;
}
return $fields;
}De esta manera, puedes ocultar, reordenar, renombrar o agregar cualquier campo de liquidación, de modo que se ajuste perfectamente a las necesidades de tu negocio.
resúmenes
La personalización a través de los ganchos y filtros de WooCommerce te permite personalizar cada detalle de tu sitio web de comercio electrónico sin modificar el código central. Comienza por comprender la diferencia fundamental entre acciones y filtros, y luego domina su uso.add_action()Yadd_filter()Luego, mediante la práctica en áreas clave como la página del producto, el carrito de compras y el proceso de pago, podrás construir gradualmente una tienda en línea altamente personalizada y potente. Recuerda que siempre debes agregar el código personalizado al subtema.functions.phpEsto se puede hacer en el archivo o mediante un complemento personalizado, y es la mejor práctica para garantizar la seguridad de las actualizaciones.
FAQ Preguntas más frecuentes
¿Dónde debo colocar mi código personalizado?
La forma más segura y recomendable de hacerlo es colocarlo en un subtema del tema que estás utilizando actualmente.functions.phpEn el documento.
De esta forma, puedes asegurarte de que tu código personalizado no se sobrescriba cuando se actualice el tema. Si no estás utilizando un subtema, también puedes crear un plugin de funciones personalizadas específico para almacenar este código.
¿Cómo puedo encontrar el gancho o filtro específico que necesito?
Puede consultar la documentación oficial para desarrolladores de WooCommerce, que ofrece un índice detallado de los ganchos.
Además, en el editor de código del backend de WordPress, o al usar un complemento como “Simply Show Hooks”, es posible visualizar directamente en la página frontal todos los ganchos disponibles en la página actual, lo que es muy útil para localizarlos rápidamente.
Se utilizó un hook, pero el código no funcionó. ¿Cómo puedo solucionar esto?
En primer lugar, compruebe si hay errores de sintaxis en su código, lo que puede provocar un error de análisis de PHP. Asegúrese de que la función de devolución de llamada esté definida correctamente y queadd_actionoadd_filterLa prioridad y la cantidad de parámetros son correctas.
En segundo lugar, confirme si el nombre del gancho es correcto y si realmente se ejecuta en la posición de la página que espera. Utiliceerror_logovar_dumpRealizar una simple salida de depuración puede ayudarte a determinar si se ha activado la función.
¿Cuál es la diferencia entre modificar los archivos de plantilla de WooCommerce y usar ganchos?
Sobrescribir directamente los archivos de plantilla de WooCommerce (copiándolos en el directorio de tu tema) es una forma directa de cambiar su apariencia y estructura, pero generalmente se usa para modificar la estructura de la salida HTML.
Los ganchos son más adecuados para agregar nuevas funciones, modificar datos o inyectar contenido en ubicaciones específicas. Los ganchos ofrecen una mayor flexibilidad y mantenibilidad, y deben ser la primera opción, especialmente al realizar extensiones lógicas de las funciones. La sobreescritura de plantillas y la tecnología de ganchos a menudo se combinan para lograr los mejores resultados.
¿Qué sigue, qué sigue?
Lectura ampliada y conocimientos prácticos
Los siguientes están relacionados con el tema de este artículo y son adecuados para una lectura más profunda. A menudo es mejor priorizar empezando por el artículo que más se acerque a su problema actual y ampliando gradualmente a los temas circundantes.
- Una guía completa para entender en profundidad WooCommerce: desde su creación hasta su optimización, el solución definitiva para comercios electrónicos.
- Análisis completo de WooCommerce: Cómo construir una potente tienda en línea para WordPress desde cero
- 10 consejos prácticos para mejorar la tasa de conversión de un sitio web con WooCommerce
- Guía completa para personalizar las plantillas de las páginas de productos en WooCommerce
- Guía de optimización de sitios web WooCommerce amigable con SEO: Estrategias clave para mejorar las tasas de conversión
Español