Cómo usar WooCommerce Hooks – Guía con ejemplos

¿Quieres aprender a usar los ganchos de WooCommerce? ¡Estás en el lugar correcto! En esta guía, le mostraremos cómo usar ganchos de acción y filtro. Además, le proporcionaremos muchos ejemplos que puede aplicar a su tienda WooCommerce.

Cuando instala WooCommerce en su sitio web, tiene acceso a una larga lista de nuevos ganchos que amplían sus posibilidades para desarrollar una solución personalizada. Los ganchos de WooCommerce funcionan igual que los ganchos nativos de WordPress y le permiten ejecutar scripts personalizados en cualquier página de WooCommerce.

Similar a los ganchos de WordPress, hay dos tipos de ganchos de WooCommerce: acción o filtro. El enlace de acción le permite insertar algún script, mientras que los enlaces de filtro reciben datos originales y los devuelven con algún tipo de modificación.

Sintaxis de los ganchos de WooCommerce

Los ganchos de WooCommerce siguen la misma sintaxis que los ganchos de WordPress.

Gancho de acción

add_action('name_of_the_action_hook','your_action_hook_funcion');

Gancho de filtro

add_filter('name_of_the_filter_hook','your_filter_hook_funcion');

Después de declarar el gancho, debe agregar sus scripts en la función:

 función your_action_hook_funcion(){
# tu código aquí
}

Los ganchos de filtro deben devolver algunos datos en un parámetro de la función:

 función your_filter_hook_function($datos){
# tu código que modifica $datos
devolver $datos;
}

Para ver un gancho de WooCommerce en acción, pegue el siguiente código en el archivo functions.php de su tema infantil:

 add_action('woocommerce_product_meta_start', 'quadlayers_woocommerce_hooks');
función quadlayers_woocommerce_hooks() {
echo '<img src="https://kokohai.com/wp-content/uploads/2020/02/logo-kokohai-tienda-de-merchandising-de-anime-y-maga-e1584570981420.png">'; // Cambiar a la URL de la imagen deseada
}

Este es el ejemplo más básico, donde está agregando una imagen a todas las páginas de productos. La imagen se mostrará debajo del botón Agregar al carrito , antes de los metadatos del producto.

Como puede ver, el nombre del gancho, woocommerce_product_meta_start , se explica por sí mismo y le dice exactamente dónde este gancho le permite insertar su código.

Lista de ganchos de WooCommerce

Hay más de mil ganchos de WooCommerce. Aquí, enumeraremos los más populares para que te familiarices con los ganchos más comunes y conocidos.

Hemos dividido la lista en secciones según la página con la que están relacionadas. El nombre de los ganchos se explica por sí mismo, por lo que no tendrá problemas para entender lo que hacen.

• Carro

  • woocommerce_antes_del_carro
  • woocommerce_before_cart_table
  • woocommerce_before_cart_contents
  • woocommerce_cart_contents
  • woocommerce_after_cart_contents
  • woocommerce_cart_is_empty
  • woocommerce_cart_totals_before_shipping
  • woocommerce_cart_totals_after_shipping
  • woocommerce_cart_totals_before_order_total
  • woocommerce_cart_totals_after_order_total
  • woocommerce_after_shipping_rate
  • woocommerce_before_shipping_calculator
  • woocommerce_proceed_to_checkout
  • woocommerce_after_cart_totals
  • woocommerce_after_cart

• Verificar

  • woocommerce_before_checkout_form
  • woocommerce_checkout_antes_de_los_detalles_del_cliente
  • woocommerce_before_checkout_billing_form
  • woocommerce_checkout_envío
  • woocommerce_checkout_después_del_pedido_revisión
  • woocommerce_checkout_después_de_los_detalles_del_cliente
  • woocommerce_checkout_before_order_review
  • woocommerce_review_order_before_cart_contents
  • woocommerce_review_order_after_cart_contents
  • woocommerce_review_order_before_shipping
  • woocommerce_review_order_after_shipping
  • woocommerce_review_order_after_order_total
  • woocommerce_checkout_order_review
  • woocommerce_review_order_after_submit
  • woocommerce_review_order_after_pago
  • woocommerce_after_checkout_form
  • woocommerce_gracias
• Para obtener más información sobre los ganchos de pago, puede consultar nuestra guía completa sobre los ganchos de pago de WooCommerce.

• productos

  • woocommerce_before_main_content
  • woocommerce_after_main_content
  • woocommerce_before_single_product_summary
  • woocommerce_after_single_product_summary
  • woocommerce_antes_de_un_producto
  • woocommerce_after_single_product
  • woocommerce_single_product_summary
  • woocommerce_product_meta_start
  • woocommerce_product_meta_end
  • woocommerce_review_antes
  • woocommerce_review_before_comment_meta
  • woocommerce_review_before_comment_text
  • woocommerce_review_comment_text
  • woocommerce_review_after_comment_text

• Taxonomías

  • woocommerce_archive_descripción
  • woocommerce_shop_loop
  • woocommerce_before_shop_loop
  • woocommerce_after_shop_loop
  • woocommerce_after_shop_loop_item
  • woocommerce_after_shop_loop_item_title
  • woocommerce_shop_loop_item_title

• Cuenta

  • woocommerce_antes_de_la_cuenta_navegación
  • woocommerce_after_account_navigation
  • woocommerce_before_edit_account_address_form
  • woocommerce_account_content
  • woocommerce_antes_de_mi_cuenta
  • woocommerce_después_de_mi_cuenta

• Mini carrito

  • woocommerce_before_mini_cart
  • woocommerce_before_mini_cart_contents
  • woocommerce_mini_cart_contenidos
  • woocommerce_widget_shopping_cart_before_buttons
  • woocommerce_widget_shopping_cart_botones
  • woocommerce_after_mini_cart

• Correo electrónico

  • woocommerce_email_after_order_table
  • woocommerce_email_before_order_table
  • woocommerce_email_customer_detalles
  • woocommerce_email_footer
  • woocommerce_email_header
  • woocommerce_email_order_detalles

• Global

  • pre_get_product_search_form
  • woocommerce_breadcrumb
  • woocommerce_no_products_found

Para encontrar la lista completa de ganchos de WooCommerce, puede consultar la documentación oficial de WC.

Ejemplos útiles de Hooks de WooCommerce

Ahora, echemos un vistazo a algunos ejemplos de cosas útiles que puede hacer con los ganchos de WooCommerce.

NOTA : Antes de comenzar, le recomendamos que cree un tema secundario. Si no está familiarizado con ellos, puede consultar nuestra guía sobre cómo crear un tema secundario y la lista de los mejores complementos de temas secundarios.

Si recién está comenzando con ganchos, simplemente puede copiar estos scripts y pegarlos en el archivo functions.php de su tema secundario. Luego, cuando se sienta más cómodo, puede editar los scripts y crear una lógica diferente.

Agregar una descripción a la página de la tienda

De forma predeterminada, la página de la tienda no muestra la descripción. Sin embargo, puede habilitarlo usando el woocommerce_archive_description de la siguiente manera:

 función quadlayers_shop_description() {
$description = '<p>Bienvenido a mi tienda, sea generoso y compre muchas cosas, gracias.</p>';
echo $descripción;
}

add_action('woocommerce_archive_description', 'quadlayers_shop_description');

Agregar nota de información después del botón Agregar al carrito

Los ganchos del carrito de WooCommerce te permiten insertar scripts personalizados en muchas secciones de la página del carrito. Aquí, le mostraremos cómo agregar un texto después del botón Agregar al carrito .

Este script imprimirá un texto personalizado después del botón Agregar al carrito.

 add_action('woocommerce_after_add_to_cart_form', 'quadlayers_after_addtocart_button');
función quadlayers_after_addtocart_button() {
	// NOTA: reemplace los slugs de su categoría por 'música' && reemplace /costos de entrega/ por una URL válida
	if ( is_product() && has_term( array( 'music' ), 'product_cat' ) ) {
		echo '<div></div><div>;<a href="/costos-de-entrega/" target="_blank" rel="noopener"><i class="fa fa-truck" aria-hidden=" true"></i> Gaste $ 100 y obtenga la entrega gratis;</a></div>
'; } }

Puede usar esto para promocionar descuentos que requieren un gasto mínimo o entrega gratuita, por ejemplo.

Explicación del código

• El gancho woocommerce_after_add_to_cart_form imprime el código HTML después del botón.
• Comprobamos si la página actual es una página de producto y si tiene nuestra categoría especificada.
• Use la categoría slug dentro de una matriz. De esta manera, puedes consultar varias categorías.
• El contenido repetido permite etiquetas HTML, variables y cualquier otra cosa dentro del alcance de PHP.

Agregar texto a una taxonomía de producto específica

Ahora, veamos cómo usar los ganchos de WooCommerce para mostrar un mensaje en productos con una etiqueta específica. Por ejemplo, mostraremos un mensaje que ofrece un descuento para ciertos productos.

Recuerde etiquetar el producto primero.

 add_action('woocommerce_before_single_product', 'my_product_notice_function');
function my_product_notice_function() { 
if ( is_product() && has_term( 'discount-25','product_tag' ) ) {
echo '<p><strong>¡Este producto aplica para un 25% de descuento por las próximas 48 horas!</strong></p>';
}
}

Explicación del código

1. 1. Usamos el gancho woocommerce_before_single_product para mostrar un mensaje en la parte superior de la página del producto.
   2. Dentro de la función, usamos un condicional en is_product() para asegurarnos de que es una página de producto.
   3. Y has_term() comprueba si el producto actual tiene la etiqueta "descuento-25" .
   4. Luego, imprima su mensaje en la instrucción if.

Bloquear compra de usuarios desconectados

Los ganchos de WooCommerce le permiten deshabilitar el botón Agregar al carrito en las páginas de productos para usuarios que no han iniciado sesión. Esto puede ser útil para productos u ofertas solo disponibles para suscriptores o miembros. Para completar el ejemplo, agregaremos un segundo gancho para mostrar un mensaje cuando el botón de compra está deshabilitado.

El enlace de filtro woocommerce_is_purchasable bloqueará la compra y el enlace de acción woocommerce_before_single_product mostrará el mensaje.

 add_action('woocommerce_before_single_product', 'quadlayers_add_message');
add_filter('woocommerce_is_purchasable', 'quadlayers_block_admin_purchase');
función quadlayers_block_admin_purchase($bloque) {
if ( is_user_logged_in() ):return true;
más: devuelve falso;
terminara si;
}

función quadlayers_add_message( ){
if ( !is_user_logged_in() ):echo '<H2>INICIA SESIÓN PARA COMPRAR ESTE PRODUCTO</h2>';
terminara si;
}

Explicación del código

1. Usamos el gancho de acción para imprimir un mensaje y el gancho de filtro para deshabilitar el botón Agregar al carrito .
2. El gancho de filtro woocommerce_is_purchasable será verdadero si el usuario ha iniciado sesión y falso si no ha iniciado sesión.
3. También usamos una declaración if() condicional para aplicar las condiciones solo a los usuarios que han cerrado sesión en ambas funciones (botón Agregar al carrito deshabilitado y el mensaje).
4. Finalmente, hemos agregado algunos estilos CSS al mensaje, encerrados en una etiqueta H2 HTML.

¿Cómo aprovechar al máximo los Hooks de WooCommerce?

En conclusión, los ganchos de WooCommerce son excelentes herramientas para personalizar su sitio. Hay cientos de ganchos para usar y todos siguen la misma sintaxis. Por lo tanto, lo alentamos a que consulte los ejemplos y obtenga algo de inspiración para aplicar los ganchos que necesita en su sitio.

Los ganchos le permiten mejorar cualquier área de su tienda: desde el pago hasta el carrito, las páginas de productos, las taxonomías y mucho más. Entonces, si desea aprovecharlos al máximo, adelante, juegue y háganos saber cómo va. Si quieres información más detallada sobre los ganchos de pago, puedes echar un vistazo a nuestra guía de ganchos de pago.

Por último, no dude en ponerse en contacto con nosotros si tiene alguna pregunta. ¡Haremos todo lo posible para ayudarte!