¿Cómo usar WooCommerce Hooks? Guía con ejemplos

¿Quieres aprender a usar los ganchos de WooCommerce? ¡Estás en el lugar indicado! En esta guía, le mostraremos cómo usar los 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 hooks de WooCommerce funcionan igual que los hooks nativos de WordPress y le permiten ejecutar scripts personalizados en cualquier página de WooCommerce.

De forma similar a los ganchos de WordPress, hay dos tipos de ganchos de WooCommerce: acción o filtro. El gancho de acción le permite insertar algún script, mientras que los ganchos 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 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:

function your_action_hook_funcion(){
# your code here
}

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

function your_filter_hook_function($data){
# your code that modifies $data
return $data;
}

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

add_action( 'woocommerce_product_meta_start', 'quadlayers_woocommerce_hooks');
function 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">'; // Change to desired image url
}

Este es el ejemplo más básico, en el que agrega una imagen a todas las páginas de productos. La imagen se mostrará debajo del Añadir al carrito , antes de los metadatos del producto.

Como puede ver, el nombre del anzuelo, woocommerce_product_meta_start, es autoexplicativo 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 se familiarice 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 comprender lo que hacen.

  • Carro

    • woocommerce_before_cart
    • 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
  • Revisa

    • woocommerce_before_checkout_form
    • woocommerce_checkout_before_customer_details
    • woocommerce_before_checkout_billing_form
    • woocommerce_checkout_shipping
    • woocommerce_checkout_after_order_review
    • woocommerce_checkout_after_customer_details
    • 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_payment
    • woocommerce_after_checkout_form
    • woocommerce_thankyou
  • 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_before_single_product
    • woocommerce_after_single_product
    • woocommerce_single_product_summary
    • woocommerce_product_meta_start
    • woocommerce_product_meta_end
    • woocommerce_review_before
    • woocommerce_review_before_comment_meta
    • woocommerce_review_before_comment_text
    • woocommerce_review_comment_text
    • woocommerce_review_after_comment_text
  • Taxonomías

    • woocommerce_archive_description
    • 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_before_account_navigation
    • woocommerce_after_account_navigation
    • woocommerce_before_edit_account_address_form
    • woocommerce_account_content
    • woocommerce_before_my_account
    • woocommerce_after_my_account
  • Mini carrito

    • woocommerce_before_mini_cart
    • woocommerce_before_mini_cart_contents
    • woocommerce_mini_cart_contents
    • woocommerce_widget_shopping_cart_before_buttons
    • woocommerce_widget_shopping_cart_buttons
    • woocommerce_after_mini_cart
  • Correo electrónico

    • woocommerce_email_after_order_table
    • woocommerce_email_before_order_table
    • woocommerce_email_customer_details
    • woocommerce_email_footer
    • woocommerce_email_header
    • woocommerce_email_order_details
  • Global

    • pre_get_product_search_form
    • woocommerce_breadcrumb
    • woocommerce_no_products_found

Para encontrar la lista completa de ganchos de WooCommerce, puede echar un vistazo al sitio oficial Documentación WC.

Ejemplos útiles de ganchos 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 hijo. Si no está familiarizado con ellos, puede consultar nuestra guía sobre cómo crear un tema infantil 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 functions.php archivo de su tema hijo. 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 gancho de la siguiente manera:

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

function quadlayers_shop_description() {
$description = '<p>Welcome to my shop, please be generous and buy many things, thank you.</p>';
echo $description;
}

add_action('woocommerce_archive_description', 'quadlayers_shop_description');

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

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

agregar texto al botón de acuerdo al carrito woocommerce
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' );
function quadlayers_after_addtocart_button() {
	// NOTE: replace your category slugs for 'music' && replace /delivery-costs/ for a valid url
	if ( is_product() && has_term( array( 'music' ), 'product_cat' ) ) {
		echo '<div style="clear: both"></div><div style="margin-top: 10px">;<a href="https://quadlayers.com/delivery-costs/" target="_blank" rel="noopener"><i class="fa fa-truck" aria-hidden="true"></i>  Spend $ 100 and get free delivery;</a></div>
'; } }

Puede usar esto para promover descuentos que requieran 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.
  • Utilice slug de categoría dentro de una matriz. De esta forma, puede comprobar 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 productos 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.

Agregar texto a una etiqueta de producto específica woocommerce

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>This product applies for a 25% discount for the next 48 hours!</strong></p>';
}
}

Explicación del código

    1. Usamos woocommerce_before_single_product gancho 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 asegurarse de que sea una página de producto.
    3. Y has_term() comprueba si el producto actual tiene el «Descuento-25» etiqueta.
    4. Luego, imprima su mensaje en la declaración if.

Bloquear compras de usuarios desconectados

Los ganchos de WooCommerce le permiten deshabilitar el Añadir al carrito en las páginas del producto para usuarios desconectados. Esto puede ser útil para productos u ofertas disponibles solo para suscriptores o miembros. Para completar el ejemplo, agregaremos un segundo gancho para mostrar un mensaje cuando el botón de compra esté desactivado.

bloquear la compra para usuarios desconectados

los woocommerce_is_purchasable El gancho del filtro bloqueará la compra y el woocommerce_before_single_productEl gancho de acción mostrará el mensaje.

add_action( 'woocommerce_before_single_product', 'quadlayers_add_message');
add_filter( 'woocommerce_is_purchasable', 'quadlayers_block_admin_purchase' );
function quadlayers_block_admin_purchase($block) {
if ( is_user_logged_in() ):return true;
else:return false;
endif;
}

function quadlayers_add_message( ){
if ( !is_user_logged_in() ):echo '<H2 style="margin-bottom:25px; text-align:center; background-color:red; font-weight:bold; color:wheat;">PLEASE LOGIN TO PURCHASE THIS PRODUCT</h2>';
endif;
}

Explicación del código

  1. Usamos el gancho de acción para imprimir un mensaje y el gancho de filtro para deshabilitar el Añadir al carrito botón.
  2. los woocommerce_is_purchasable El gancho de filtro será verdadero si el usuario está conectado y falso si está desconectado.
  3. También usamos un condicional Si() declaración para aplicar las condiciones solo a los usuarios desconectados en ambas funciones (botón Agregar al carrito desactivado y el mensaje).
  4. Finalmente, agregamos algunos estilos CSS al mensaje, incluidos en una etiqueta H2 HTML.

¿Cómo aprovechar al máximo los ganchos 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 se inspire para aplicar los ganchos que necesita en su sitio.

Los ganchos le permiten mejorar cualquier área de su tienda: desde la caja hasta el carrito, las páginas de productos, taxonomías y mucho más. Entonces, si quieres aprovecharlos al máximo, sigue adelante, juega y cuéntanos cómo te va. Si desea información más detallada sobre los ganchos de pago, puede consultar 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!