referencia del c\u00f3digo de WooCommerce<\/a>. Esta referencia en l\u00ednea enumera todos los ganchos de acci\u00f3n y filtro disponibles en WooCommerce, junto con una descripci\u00f3n de lo que hacen y los par\u00e1metros que aceptan. Puedes buscar ganchos por nombre o navegar por categor\u00eda para encontrar el gancho que necesitas. <\/p>\n\nGu\u00eda visual de los ganchos de WooCommerce <\/h2>\n\n
Ahora que tienes una s\u00f3lida comprensi\u00f3n de c\u00f3mo funcionan los ganchos de WooCommerce, hagamos un recorrido visual por algunos ganchos de uso com\u00fan en varias partes de una tienda de WooCommerce. <\/p>\n\n
Esta secci\u00f3n cubrir\u00e1 los ganchos que se encuentran en p\u00e1ginas de productos individuales, p\u00e1ginas de carrito y pago y p\u00e1ginas de cuenta y archivo. <\/p>\n\n
Ganchos en p\u00e1ginas de productos individuales de WooCommerce <\/h3>\n\n
Las p\u00e1ginas de un solo producto son donde los clientes ven informaci\u00f3n detallada sobre un producto espec\u00edfico. WooCommerce proporciona varios ganchos que te permiten personalizar el dise\u00f1o y el contenido de estas p\u00e1ginas. <\/p>\n\n
Algunos ganchos populares para p\u00e1ginas de productos individuales incluyen: <\/p>\n\n
1. ‘wooCommerce_before_single_product<\/strong>‘: Este gancho se dispara antes del contenido del producto individual. Es un buen lugar para agregar contenido personalizado encima del t\u00edtulo del producto, como un banner o un mensaje. <\/p>\n\n2. ‘wooCommerce_single_product_summary<\/strong>‘: Este gancho le permite agregar contenido dentro del \u00e1rea de resumen del producto, que contiene el t\u00edtulo, el precio, la descripci\u00f3n y el bot\u00f3n Agregar al carrito. Puede utilizar este gancho para reorganizar el orden de los elementos o insertar informaci\u00f3n adicional. <\/p>\n\nEjemplo de uso<\/strong>:<\/p>\n\nadd_action( 'wooCommerce_single_product_summary', 'custom_product_stock_status', 15 ); \n \nfunction custom_product_stock_status() { \n global $product; \n if ( $product->is_in_stock() ) { \n echo '<p class=\"stock-status in-stock\">In stock and ready to ship!<\/p>'; \n } else { \n echo '<p class=\"stock-status out-of-stock\">Currently out of stock. Check back soon!<\/p>'; \n } \n} <\/code><\/pre>\n\n3. ‘wooCommerce_after_single_product_summary<\/strong>‘: use este gancho para agregar contenido debajo del resumen del producto, como productos relacionados, ventas adicionales o pesta\u00f1as de productos personalizadas. Esta \u00e1rea es perfecta para mostrar informaci\u00f3n adicional que puede ayudar a los clientes a tomar decisiones de compra informadas. <\/p>\n\n4. ‘wooCommerce_product_thumbnails<\/strong>‘: Este gancho se dispara dentro de la galer\u00eda de im\u00e1genes del producto. Puede usarlo para modificar la apariencia de las im\u00e1genes en miniatura o agregar contenido personalizado. <\/p>\n\nGanchos para el carrito y las p\u00e1ginas de pago <\/h3>\n\n
El carrito y las p\u00e1ginas de pago son pasos cr\u00edticos en el recorrido del cliente. Representan las etapas finales del proceso de compra, donde los clientes revisan sus pedidos, seleccionan las opciones de env\u00edo y pago y completan sus transacciones. WooCommerce proporciona varios ganchos para ayudarte a optimizar estas p\u00e1ginas para una experiencia m\u00e1s fluida y f\u00e1cil de usar. <\/p>\n\n
Algunos ganchos esenciales para el carrito y las p\u00e1ginas de pago incluyen: <\/p>\n\n
1. ‘wooCommerce_before_cart<\/strong>‘: Este gancho se dispara antes de la mesa del carrito. \u00daselo para agregar contenido personalizado o promociones sobre el carrito. <\/p>\n\n2. ‘wooCommerce_cart_totals_before_shipping<\/strong>‘: Este gancho le permite agregar contenido antes de las opciones de env\u00edo en el \u00e1rea de totales del carrito. Es un buen lugar para mostrar mensajes o promociones relacionados con el env\u00edo. <\/p>\n\nEjemplo de uso<\/strong>: <\/p>\n\nadd_action( 'wooCommerce_cart_totals_before_shipping', 'custom_shipping_message' ); \n \nfunction custom_shipping_message() { \n echo '<p class=\"shipping-message\">Free shipping on orders over $50!<\/p>'; \n} <\/code><\/pre>\n\n3. ‘wooCommerce_review_order_before_submit<\/strong>‘: use este gancho para agregar contenido antes del bot\u00f3n Realizar pedido en la p\u00e1gina de pago, como una casilla de verificaci\u00f3n de acuerdo personalizado o insignias de confianza. <\/p>\n\n4. ‘woocommerce_checkout_after_customer_details<\/strong>‘: Este gancho se activa despu\u00e9s de la secci\u00f3n de detalles del cliente en la p\u00e1gina de pago. Puede usarlo para agregar campos personalizados o dividir el pago en varios pasos. <\/p>\n\nGanchos en la cuenta de WooCommerce y p\u00e1ginas de archivo <\/h3>\n\n
Las p\u00e1ginas de cuenta de WooCommerce permiten a los clientes ver sus pedidos, administrar sus direcciones y realizar otras tareas relacionadas con la cuenta. Las p\u00e1ginas de archivo, como las p\u00e1ginas de tienda y categor\u00eda, muestran listas de productos. WooCommerce tambi\u00e9n proporciona ganchos para personalizar estas p\u00e1ginas. <\/p>\n\n
Algunos ganchos \u00fatiles para las p\u00e1ginas de cuenta y archivo incluyen: <\/p>\n\n
1. ‘woocommerce_before_account_navigation<\/strong>‘: Este gancho se activa antes del men\u00fa de navegaci\u00f3n de la cuenta. \u00daselo para agregar elementos de men\u00fa personalizados o contenido sobre la navegaci\u00f3n. <\/p>\n\n2. ‘woocommerce_after_account_orders<\/strong>‘: usa este gancho para mostrar contenido personalizado despu\u00e9s de la tabla de pedidos en la p\u00e1gina de la cuenta, como un mensaje que aliente a los clientes a dejar rese\u00f1as. <\/p>\n\nEjemplo de uso:<\/strong><\/p>\n\nadd_action( 'woocommerce_after_account_orders', 'custom_account_message' ); \n \nfunction custom_account_message() { \n echo '<p class=\"account-message\">Thank you for your orders! Please leave a review for the products you purchased.<\/p>'; \n} <\/code><\/pre>\n\n3. ‘woocommerce_before_shop_loop<\/strong>‘: Este gancho se activa antes del bucle del producto en las p\u00e1ginas de archivo. \u00dasalo para agregar filtros personalizados, opciones de clasificaci\u00f3n o contenido promocional. <\/p>\n\n4. ‘woocommerce_after_shop_loop_item<\/strong>‘: Usa este gancho para insertar contenido despu\u00e9s de cada producto en el bucle, como un bot\u00f3n personalizado de \u00abVista r\u00e1pida\u00bb o un met\u00e1stago de producto adicional. <\/p>\n\nGanchos comunes de WooCommerce que debes conocer <\/h2>\n\n
WooCommerce ofrece una amplia gama de ganchos que le permiten personalizar casi todos los aspectos de su tienda en l\u00ednea. Centr\u00e9monos ahora en algunos de los ganchos de acci\u00f3n y filtro m\u00e1s utilizados. Estos ganchos son esenciales para modificar la funcionalidad y la apariencia de tu tienda WooCommerce. <\/p>\n\n
Ganchos de acci\u00f3n de uso frecuente <\/h3>\n\n
Los ganchos de acci\u00f3n se utilizan para a\u00f1adir o modificar funcionalidades en puntos espec\u00edficos del proceso de WooCommerce. Le permiten insertar contenido personalizado, cambiar el comportamiento de ciertas funciones o desencadenar acciones adicionales basadas en eventos espec\u00edficos. <\/p>\n\n
1. ‘woocommerce_before_main_content<\/strong>‘: Este gancho se activa antes de que se muestre el contenido principal de WooCommerce. Es un buen lugar para agregar contenido personalizado que aparece encima del bucle del producto en las p\u00e1ginas de la tienda o encima de los detalles del producto en las p\u00e1ginas de un solo producto. <\/p>\n\nEjemplo de uso:<\/strong> <\/p>\n\nadd_action( 'woocommerce_before_main_content', 'custom_content_before_main' ); \n \nfunction custom_content_before_main() { \n echo '<div class=\"custom-content\">Check out our latest products!<\/div>'; \n}<\/code><\/pre>\n\n2. ‘woocommerce_after_shop_loop_item<\/strong>‘: Este gancho se activa despu\u00e9s de cada producto en el bucle de la tienda. \u00daselo para agregar contenido personalizado o botones debajo del t\u00edtulo o precio del producto. <\/p>\n\nEjemplo de uso<\/strong>:<\/p>\n\nadd_action( 'woocommerce_after_shop_loop_item', 'custom_button_after_product' ); \n \nfunction custom_button_after_product() { \n echo '<a href=\"#\" class=\"custom-button\">Buy Now<\/a>'; \n} <\/code><\/pre>\n\n3. ‘woocommerce_before_cart<\/strong>‘: Este gancho se dispara antes de la mesa del carrito en la p\u00e1gina del carrito. Es una ubicaci\u00f3n ideal para mostrar mensajes personalizados, promociones o contenido adicional relacionado con el carrito. <\/p>\n\nEjemplo de uso<\/strong>:<\/p>\n\nadd_action( 'woocommerce_before_cart', 'custom_message_before_cart' ); \n \nfunction custom_message_before_cart() { \n echo '<div class=\"custom-message\">Spend $50 or more for free shipping!<\/div>'; \n} <\/code><\/pre>\n\n4. ‘woocommerce_checkout_before_customer_details<\/strong>‘: Usa este gancho para agregar contenido personalizado antes de la secci\u00f3n de detalles del cliente en la p\u00e1gina de pago. Este es un buen lugar para mostrar una barra de progreso, un mensaje sobre los campos obligatorios o un enlace a su pol\u00edtica de privacidad. <\/p>\n\n5. ‘woocommerce_checkout_order_review<\/strong>‘: Este gancho se activa en la p\u00e1gina de pago, dentro de la secci\u00f3n de revisi\u00f3n de pedidos. Util\u00edcelo para modificar la apariencia del resumen del pedido o agregar contenido personalizado relacionado con el pedido. <\/p>\n\nEjemplo de uso<\/strong>:<\/p>\n\nadd_action( 'woocommerce_checkout_order_review', 'custom_order_review_content' ); \n \nfunction custom_order_review_content() { \n echo '<div class=\"custom-order-review\">Your order will be processed within 1-2 business days.<\/div>'; \n}<\/code><\/pre>\n\n6. ‘woocommerce_email_header<\/strong>‘: Este gancho te permite modificar el encabezado de las plantillas de correo electr\u00f3nico de WooCommerce. \u00daselo para agregar contenido personalizado, cambiar el logotipo o ajustar el estilo del encabezado del correo electr\u00f3nico. <\/p>\n\n7. ‘woocommerce_email_footer<\/strong>‘: Similar al gancho del encabezado del correo electr\u00f3nico, este gancho le permite personalizar el pie de p\u00e1gina de las plantillas de correo electr\u00f3nico de WooCommerce. A\u00f1ade contenido personalizado, enlaces a redes sociales o modifica el estilo para que coincida con tu marca. <\/p>\n\nGanchos de filtro populares <\/h3>\n\n
Los ganchos de filtro se utilizan para modificar los datos antes de que WooCommerce los muestre o los procese. Le permiten cambiar el contenido de elementos espec\u00edficos, alterar el comportamiento de ciertas caracter\u00edsticas o manipular datos antes de que se guarden o recuperen. <\/p>\n\n
1. ‘woocommerce_product_title<\/strong>‘: Este gancho te permite modificar el t\u00edtulo del producto antes de que se muestre en la p\u00e1gina de un solo producto o en el bucle de la tienda. <\/p>\n\nEjemplo de uso<\/strong>:<\/p>\n\nadd_filter( 'woocommerce_product_title', 'custom_product_title' ); \n \nfunction custom_product_title( $title ) { \n return 'Best ' . $title . ' Available!'; \n} <\/code><\/pre>\n\n2. ‘woocommerce_product_tabs<\/strong>‘: Utilice este gancho para agregar, eliminar o reorganizar las pesta\u00f1as en la p\u00e1gina de un solo producto. Puede crear pesta\u00f1as personalizadas o modificar el contenido de las existentes. <\/p>\n\nEjemplo de uso<\/strong>:<\/p>\n\nadd_filter( 'woocommerce_product_tabs', 'custom_product_tab' ); \n \nfunction custom_product_tab( $tabs ) { \n $tabs['custom_tab'] = array( \n 'title' => 'Custom Tab', \n 'priority' => 50, \n 'callback' => 'custom_tab_content' \n ); \n return $tabs; \n} \n \nfunction custom_tab_content() { \n echo '<h2>Custom Tab Content<\/h2>'; \n echo '<p>This is the content of the custom tab.<\/p>'; \n} <\/code><\/pre>\n\n3. ‘woocommerce_add_to_cart_redirect<\/strong>‘: Este gancho le permite cambiar la URL de redireccionamiento despu\u00e9s de agregar un producto al carrito. \u00daselo para redirigir a los clientes a una p\u00e1gina espec\u00edfica, como una p\u00e1gina de venta cruzada o de venta adicional. <\/p>\n\nEjemplo de uso<\/strong>:<\/p>\n\nadd_filter( 'woocommerce_add_to_cart_redirect', 'custom_add_to_cart_redirect' ); \n \nfunction custom_add_to_cart_redirect( $url ) { \n return get_permalink( 123 ); \/\/ Replace 123 with the ID of the desired redirect page \n}<\/code><\/pre>\n\n4. ‘woocommerce_cart_totals<\/strong>‘: Utilice este gancho para modificar los totales del carrito antes de que se muestren en las p\u00e1ginas del carrito y del pago. Puedes a\u00f1adir totales personalizados, modificar los existentes o cambiar el orden en el que aparecen. <\/p>\n\nEjemplo de uso<\/strong>:<\/p>\n\nadd_filter( 'woocommerce_cart_totals', 'custom_cart_totals' ); \n \nfunction custom_cart_totals( $totals ) { \n $totals['custom_total'] = array( \n 'label' => 'Custom Total', \n 'value' => '10.00' \n ); \n return $totals; \n}<\/code><\/pre>\n\n5. ‘woocommerce_product_related_posts_query<\/strong>‘: Este gancho le permite modificar la consulta de productos relacionados en la p\u00e1gina de un solo producto. Util\u00edcelo para cambiar el n\u00famero de productos relacionados, filtrarlos en funci\u00f3n de criterios espec\u00edficos o modificar el orden en el que se muestran. <\/p>\n\n6. ‘woocommerce_checkout_fields<\/strong>‘: Utilice este gancho para agregar, eliminar o modificar los campos de pago. Puede crear campos personalizados, cambiar las etiquetas de campo o ajustar las reglas de validaci\u00f3n de campos. <\/p>\n\nEjemplo de uso<\/strong>:<\/p>\n\nadd_filter( 'woocommerce_checkout_fields', 'custom_checkout_fields' ); \n \nfunction custom_checkout_fields( $fields ) { \n $fields['billing']['custom_field'] = array( \n 'label' => 'Custom Field', \n 'required' => true, \n 'clear' => true, \n 'type' => 'text', \n 'class' => array( 'form-row-wide' ) \n ); \n return $fields; \n} <\/code><\/pre>\n\n7. ‘woocommerce_payment_gateways<\/strong>‘: Este gancho te permite agregar, eliminar o modificar las pasarelas de pago disponibles. \u00daselo para crear m\u00e9todos de pago personalizados o cambiar el orden en el que se muestran las pasarelas. <\/p>\n\nEjemplos pr\u00e1cticos de c\u00f3mo usar los hooks de WooCommerce <\/h2>\n\n
Ahora que est\u00e1s familiarizado con algunos de los ganchos m\u00e1s comunes de WooCommerce, exploremos ejemplos pr\u00e1cticos de c\u00f3mo usarlos para personalizar tu tienda online. Cubriremos la adici\u00f3n de contenido personalizado mediante ganchos de acci\u00f3n, la modificaci\u00f3n de la salida con ganchos de filtro y los casos de uso del mundo real para los ganchos de WooCommerce. <\/p>\n\n
Adici\u00f3n de contenido personalizado mediante ganchos de acci\u00f3n <\/h3>\n\n
Los ganchos de acci\u00f3n te permiten insertar contenido personalizado en puntos espec\u00edficos de tu tienda WooCommerce. Estos son algunos ejemplos de c\u00f3mo usar ganchos de acci\u00f3n para agregar contenido personalizado: <\/p>\n\n
Ejemplo 1: Agregar un mensaje personalizado a la p\u00e1gina del carrito<\/em><\/strong> <\/h4>\n\nadd_action( 'woocommerce_before_cart', 'custom_cart_message' ); \n \nfunction custom_cart_message() { \n echo '<div class=\"custom-message\">Thank you for shopping with us! Please review your cart before proceeding to checkout.<\/div>'; \n} <\/code><\/pre>\n\nEn este ejemplo, usamos el gancho ‘woocommerce_before_cart<\/strong>‘ para agregar un mensaje personalizado sobre la tabla del carrito. El mensaje agradece al cliente por comprar y le recuerda que revise su carrito antes de pagar. <\/p>\n\nEjemplo 2: Insertar un banner en la p\u00e1gina de la tienda<\/em><\/strong> <\/h4>\n\nadd_action( 'woocommerce_before_main_content', 'custom_shop_banner' ); \n \nfunction custom_shop_banner() { \n echo '<div class=\"custom-banner\"> \n <img src=\"path\/to\/banner-image.jpg\" alt=\"Shop Banner\"> \n <h2>Welcome to our shop!<\/h2> \n <p>Discover our latest products and special offers.<\/p> \n <\/div>'; \n}<\/code><\/pre>\n\nAqu\u00ed, usamos el gancho ‘woocommerce_before_main_content<\/strong>‘ para insertar un banner personalizado en la p\u00e1gina de la tienda. El banner incluye una imagen, un mensaje de bienvenida y una llamada a la acci\u00f3n para animar a los clientes a explorar la tienda. <\/p>\n\nEjemplo 3: Agregar una pesta\u00f1a personalizada a la p\u00e1gina de un solo producto<\/em><\/strong> <\/h4>\n\nadd_action( 'woocommerce_product_tabs', 'custom_product_tab' ); \n \nfunction custom_product_tab( $tabs ) { \n $tabs['custom_tab'] = array( \n 'title' => 'Custom Tab', \n 'priority' => 50, \n 'callback' => 'custom_tab_content' \n ); \n return $tabs; \n} \n \nfunction custom_tab_content() { \n echo '<h2>Custom Tab Content<\/h2>'; \n echo '<p>This is the content of the custom tab.<\/p>'; \n} <\/code><\/pre>\n\nEn este ejemplo, usamos el gancho ‘woocommerce_product_tabs<\/strong>‘ para agregar una pesta\u00f1a personalizada a la p\u00e1gina de un solo producto. La funci\u00f3n ‘custom_product_tab<\/strong>‘ agrega una nueva pesta\u00f1a con un t\u00edtulo, prioridad y funci\u00f3n de devoluci\u00f3n de llamada. <\/p>\n\nLa funci\u00f3n ‘custom_tab_content<\/strong>‘ define el contenido que se mostrar\u00e1 cuando se haga clic en la pesta\u00f1a personalizada. <\/p>\n\nModificaci\u00f3n de la salida con ganchos de filtro <\/h3>\n\n
Los ganchos de filtro te permiten modificar los datos antes de que WooCommerce los muestre o los procese. A continuaci\u00f3n, se muestran algunos ejemplos de c\u00f3mo usar enlaces de filtro para modificar la salida: <\/p>\n\n
Ejemplo 1: Cambiar el texto del bot\u00f3n \u00abAgregar al carrito\u00bb<\/strong><\/em> <\/h4>\n\nadd_filter( 'woocommerce_product_single_add_to_cart_text', 'custom_add_to_cart_text' ); \n \nfunction custom_add_to_cart_text() { \n return 'Buy Now'; \n} <\/code><\/pre>\n\nEn este ejemplo, usamos el filtro ‘woocommerce_product_single_add_to_cart_text<\/strong>‘ para cambiar el texto del bot\u00f3n \u00abAgregar al carrito\u00bb en la p\u00e1gina de un solo producto. La funci\u00f3n ‘custom_add_to_cart_text<\/strong>‘ devuelve el nuevo texto del bot\u00f3n, que en este caso es \u00abComprar ahora\u00bb. <\/p>\n\nEjemplo 2: Modificaci\u00f3n de los campos de pago<\/em><\/strong><\/h4>\n\nadd_filter( 'woocommerce_checkout_fields', 'custom_checkout_fields' ); \n \nfunction custom_checkout_fields( $fields ) { \n \/\/ Remove the \"Company\" field \n unset( $fields['billing']['billing_company'] ); \n \n \/\/ Make the \"Phone\" field required \n $fields['billing']['billing_phone']['required'] = true; \n \n \/\/ Add a custom field \n $fields['billing']['custom_field'] = array( \n 'label' => 'Custom Field', \n 'required' => true, \n 'clear' => true, \n 'type' => 'text', \n 'class' => array( 'form-row-wide' ) \n ); \n \n return $fields; \n} <\/code><\/pre>\n\nAqu\u00ed, usamos el filtro ‘woocommerce_checkout_fields<\/strong>‘ para modificar los campos de pago. La funci\u00f3n ‘custom_checkout_fields<\/strong>‘ elimina el campo \u00abEmpresa\u00bb, hace que el campo \u00abTel\u00e9fono\u00bb sea obligatorio y agrega un campo personalizado a la secci\u00f3n de facturaci\u00f3n. <\/p>\n\n