Cómo usar los ganchos de WooCommerce: una guía completa

En este artículo, discutiremos cómo puede usar WooCommerce Hooks para ampliar su tienda WooCommerce de acuerdo con sus requisitos.

¿Alguna vez te has preguntado cómo WordPress se hizo tan grande? Más del 40% de los sitios web del mundo ahora usan WordPress como su CMS. Todo fue posible gracias a los ganchos y filtros con los que las personas crearon miles de complementos.

De vez en cuando, puede escuchar a la gente decir que PHP morirá pronto, pero la participación de WordPress continúa creciendo y WordPress está completamente basado en PHP. Bueno, sólo el tiempo lo dirá.

Si nunca ha desarrollado un complemento de WordPress, debe consultar esta guía porque debe saber cómo crear un complemento de WordPress antes de poder usar esta guía.

¿Qué son los ganchos?

Es posible editar o agregar código en WordPress sin editar los archivos principales usando ganchos.

WordPress y WooCommerce hacen un uso extensivo de ganchos, que son funciones que los desarrolladores de WordPress y WooCommerce pueden personalizar. Los ganchos son de dos tipos.

1. Acciones : estos tipos de ganchos le permiten ejecutar código personalizado cada vez que se activan.
2. Filtros : los ganchos de filtro le permiten manipular y devolver un valor (por ejemplo, el precio de un producto) a medida que pasa a través de ciertas funciones.

WooCommerce es un complemento de WordPress que también se creó utilizando acciones y ganchos; sin embargo, cada complemento también puede crear sus propios ganchos y filtros que otros desarrolladores de complementos pueden usar para ampliar aún más la funcionalidad del complemento.

Ganchos de WooCommerce

Ahora, en este tutorial, explicaremos varios ganchos de WooCommerce, también le daremos ejemplos visuales y ejemplos de código. Inicialmente, nuestro código de complemento parece

 <?php /** * Plugin Name: CyberPanel * Plugin URI: https://cyberpanel.net * Description: CyberPanel Tutorial * Version: 1.0.0 * Requires at least: 5.2 * Requires PHP: 7.1 * Author: Usman Nasir * Author URI: https://cyberpanel.net * License: GPL v2 or later * License URI: https://www.gnu.org/licenses/gpl-2.0.html */ if (!defined('WPINC')) { die("Please don't run via command line."); }

A medida que continuamos con el tutorial, seguiremos agregando más código a este archivo.

Ganchos de WooCommerce del producto

Primero comenzaremos con ganchos que puede usar en las páginas de productos, luego le daremos un código de ejemplo de cómo usar woocommerce_before_single_product para mostrar algo encima de su producto.

Ganchos mostrados en la parte superior y al pie de la página del Producto

• woocommerce_before_main_content
• woocommerce_after_main_content

Ganchos que se muestran encima y debajo de la descripción de un producto

• woocommerce_before_single_product_summary
• woocommerce_after_single_product_summary

Ganchos mostrados en la parte superior y al pie de la página del Producto

• woocommerce_antes_de_un_producto
• woocommerce_after_single_product

Ganchos que se muestran en la breve descripción del producto.

• woocommerce_single_product_summary
• woocommerce_product_meta_start
• woocommerce_product_meta_end
• woocommerce_share

Ganchos mostrados en los comentarios.

• woocommerce_review_antes
• woocommerce_review_before_comment_meta
• woocommerce_review_meta
• woocommerce_review_before_comment_text
• woocommerce_review_comment_text
• woocommerce_review_after_comment_text

woocommerce_antes_de_un_producto

Ahora digamos que desea mostrar algo en la parte superior de la página de su producto individual, puede usar los ganchos de WooCommerce llamados woocommerce_before_single_product , nuestro código para esto se ve así:

 add_action( 'woocommerce_before_single_product', 'woocommerce_output_all_notices_custom', 10 ); function woocommerce_output_all_notices_custom() { echo "hello world"; }

Ahora puede ver en la imagen a continuación que hello world está impreso en la parte superior de la imagen del producto.

De manera similar, puede usar otros ganchos en la tabla a continuación para agregar información en la página del producto. Aspecto actual de nuestro archivo de complemento:

 <?php /** * Plugin Name: CyberPanel * Plugin URI: https://cyberwp.cloud * Description: Manage multiple CyberPanel installations via WordPress. * Version: 1.0.0 * Requires at least: 5.2 * Requires PHP: 7.1 * Author: Usman Nasir * Author URI: https://cyberwp.cloud * License: GPL v2 or later * License URI: https://www.gnu.org/licenses/gpl-2.0.html */ if (!defined('WPINC')) { die("Please don't run via command line."); } add_action( 'woocommerce_before_single_product', 'woocommerce_output_all_notices_custom', 10 ); function woocommerce_output_all_notices_custom() { echo "hello world"; }

Ganchos de carro WooCommerce

Ahora veamos todos los ganchos utilizados en la página del carrito, divididos en tres categorías para su comodidad.

Ganchos mostrados antes de la lista de productos en el carrito

• woocommerce_antes_del_carro
• woocommerce_before_cart_table
• woocommerce_before_cart_contents
• woocommerce_cart_contents
• woocommerce_after_cart_contents

Ganchos mostrados después de la lista de productos en el carrito

• woocommerce_cart_coupon
• woocommerce_cart_acciones
• woocommerce_after_cart_table
• woocommerce_cart_colaterales
• woocommerce_before_cart_totals

Hooks mostrados al final de un pedido

• 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

Y si no hay productos en el carrito se utilizará el siguiente gancho

woocommerce_cart_is_empty

woocommerce_antes_del_carro

Veamos cómo podemos usar el gancho woocommerce_before_cart para mostrar algo antes de la mesa del carrito

Y el fragmento de código para esto es

 add_action( 'woocommerce_before_cart', 'woocommerce_before_cart_custom', 10, 0 ); function woocommerce_before_cart_custom() { echo "before cart content"; }

Y el código final se verá así

 <?php /** * Plugin Name: CyberPanel * Plugin URI: https://cyberpanel.net * Description: CyberPanel Tutorial * Version: 1.0.0 * Requires at least: 5.2 * Requires PHP: 7.1 * Author: Usman Nasir * Author URI: https://cyberpanel.net * License: GPL v2 or later * License URI: https://www.gnu.org/licenses/gpl-2.0.html */ if (!defined('WPINC')) { die("Please don't run via command line."); } add_action( 'woocommerce_before_single_product', 'woocommerce_output_all_notices_custom', 10 ); function woocommerce_output_all_notices_custom() { echo "hello world"; } add_action( 'woocommerce_before_cart', 'woocommerce_before_cart_custom', 10, 0 ); function woocommerce_before_cart_custom() { echo "before cart content"; }

De manera similar, puede usar otros ganchos en su código y puede hacer casi cualquier cosa con su código.

Pago - Ganchos de WooCommerce

La página de pago es una página muy importante y funcional en una tienda WooCommerce. A continuación se mencionan múltiples categorías de ganchos utilizados en las páginas de pago.

Ganchos utilizados antes del formulario de información de contacto del usuario

• woocommerce_before_checkout_form
• woocommerce_checkout_antes_de_los_detalles_del_cliente
• woocommerce_checkout_facturación
• woocommerce_before_checkout_billing_form

Ganchos utilizados para configurar el marcado de los detalles de facturación

• woocommerce_after_checkout_billing_form
• woocommerce_checkout_envío
• woocommerce_before_order_notas
• woocommerce_after_order_notas

Ganchos utilizados antes del resumen del producto en orden

• 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_before_order_total
• woocommerce_review_order_after_order_total

Ganchos que se muestran debajo del formulario de pedido

• woocommerce_checkout_order_review
• woocommerce_review_order_before_pago
• woocommerce_review_order_before_submit
• woocommerce_review_order_after_submit
• woocommerce_review_order_after_pago
• woocommerce_after_checkout_form

Ganchos de categoría de WooCommerce

Mostrar el título de la categoría

woocommerce_archive_descripción

woocommerce_shop_loop

Se muestra antes de la ficha Producto en la lista.

woocommerce_before_shop_loop

Se muestra encima de la lista de productos en la categoría.

woocommerce_after_shop_loop

Se muestra debajo de la lista de productos en la categoría.

woocommerce_after_shop_loop_item

Se muestra al final de cada descripción de la tarjeta de producto.

Hooks que adicionalmente marcan la ficha de Producto en la lista.

• woocommerce_after_shop_loop_item_title
• woocommerce_shop_loop_item_title
• woocommerce_before_shop_loop_item_title

Conclusión

Hemos hecho todo lo posible para brindarle una representación visual de casi todos los ganchos de importación que puede usar para ampliar su tienda WooCommerce.

Aparte de eso, hemos dado dos ejemplos prácticos de código para mostrar lo fácil que es usar esos ganchos en el código de su complemento. Puede usar fácilmente estos ganchos de WooCommerce para incluso agregar campos de pago o agregar cuadros de entrada para recopilar más información del usuario durante su proceso de pedido.

Hay posibilidades ilimitadas a su alcance, si todavía tiene alguna pregunta, no dude en hacerla en el cuadro de comentarios a continuación.