Cómo personalizar la tienda WooCommerce con hooks

Contents

Introducción a los Hooks en WooCommerce

WooCommerce es la solución de comercio electrónico más popular para WordPress. Su gran flexibilidad proviene, en gran medida, de la capacidad de añadir o modificar funcionalidades mediante hooks (acciones y filtros). En este artículo extenso y detallado exploraremos cómo personalizar tu tienda WooCommerce aprovechando al máximo estos ganchos.

Conceptos Fundamentales

¿Qué son los Hooks

En WordPress y WooCommerce, un hook es un punto en el flujo de ejecución donde puedes “enganchar” tu código. Existen dos tipos básicos:

  • Acciones (actions): Ejecutan código adicional en un punto específico.
  • Filtros (filters): Modifican datos antes de que se muestren o se guarden.

Para profundizar, revisa la documentación oficial de WordPress: Hooks API.

Estructura básica de un Hook

// Acción
add_action(woocommerce_before_shop_loop, mi_funcion_personalizada, 10)
function mi_funcion_personalizada() {
    echo ltpgt¡Bienvenido a mi tienda!lt/pgt
}

// Filtro
add_filter(woocommerce_product_single_title, cambiar_titulo_producto, 10)
function cambiar_titulo_producto(title) {
    return Producto:  . title
}
  

Listado de Hooks Comunes

Hook Tipo Ubicación
woocommerce_before_shop_loop Action Antes del loop de productos
woocommerce_after_shop_loop Action Después del loop de productos
woocommerce_product_get_price Filter Al obtener el precio del producto
woocommerce_checkout_order_processed Action Tras procesar un pedido

Personalizaciones de la Página de Producto

1. Añadir Mensajes Promocionales

Puedes insertar un banner o aviso encima del precio usando woocommerce_single_product_summary:

add_action(woocommerce_single_product_summary, mostrar_banner_promocion, 5)
function mostrar_banner_promocion() {
    echo ltdiv style=background:#eee padding:10px margin-bottom:15px text-align:centergt
            ltstronggt¡Oferta especial: 20% de descuento!lt/stronggt
          lt/divgt
}
  

2. Modificar Precio Dinámicamente

Un filtro útil para ajustar precios según condiciones externas:

add_filter(woocommerce_product_get_price, ajustar_precio_por_usuario, 20, 2)
function ajustar_precio_por_usuario(price, product) {
    if(current_user_can(premium_member)) {
        return price  0.9 // 10% de descuento para miembros premium
    }
    return price
}
  

Personalizaciones del Checkout

1. Mostrar Nota Personalizada

Para incluir un texto informativo antes del formulario de checkout:

add_action(woocommerce_before_checkout_form, mensaje_antes_checkout, 10)
function mensaje_antes_checkout() {
    echo ltdiv style=background:#f0f0f0 padding:15px margin-bottom:20pxgt
            ltemgtRevisa bien tus datos de envío antes de finalizar tu compra.lt/emgt
          lt/divgt
}
  

2. Validar Campos Personalizados

Si añades campos personalizados, valida su contenido:

add_action(woocommerce_checkout_process, validar_campo_extra)
function validar_campo_extra() {
    if(empty(_POST[departamento_custom])) {
        wc_add_notice(Por favor, ingresa tu departamento., error)
    }
}
  

Personalizaciones de Correos Electrónicos

1. Añadir Texto al Pie de Email

Utiliza woocommerce_email_footer para colocar un aviso o redes sociales:

add_action(woocommerce_email_footer, agregar_pie_email)
function agregar_pie_email(email) {
    echo ltp style=text-align:center color:#555 font-size:12pxgt
            Síguenos en lta href=https://twitter.com/tu_tiendagtTwitterlt/agt y lta href=https://facebook.com/tu_tiendagtFacebooklt/agt.
          lt/pgt
}
  

Trucos Avanzados

1. Hooks Condicionales según Categoría

Solo aplica tu código en productos de una categoría concreta:

add_action(woocommerce_single_product_summary, promo_cat_especial, 15)
function promo_cat_especial() {
    global product
    if(has_term(especial, product_cat, product->get_id())) {
        echo ltdiv style=background:#dff0d8 padding:10pxgt
                ltstronggtPromoción exclusiva para esta categoría!lt/stronggt
              lt/divgt
    }
}
  

2. Depuración de Hooks

Para identificar los hooks disponibles en una plantilla, emplea la función current_filter():

add_action(all, verificar_hooks)
function verificar_hooks() {
    if(strpos(current_filter(), woocommerce) !== false) {
        error_log(Hook detectado:  . current_filter())
    }
}
  

Revisa el archivo debug.log en wp-content tras activar WP_DEBUG_LOG en wp-config.php.

Buenas Prácticas

  • Usa un plugin hijo o child theme para evitar sobreescrituras al actualizar.
  • Prefiere filtros cuando necesites modificar datos existentes usa acciones para añadir contenido.
  • Asigna prioridades cuidando el orden de ejecución (valor numérico).
  • Documenta tu código comentando la funcionalidad y los hooks empleados.
  • Comprueba compatibilidad con otros plugins que también usen hooks.

Recursos y Enlaces Útiles

copy 2024 Tu Tien da WooCommerce. Todos los derechos reservados.



Acepto donaciones de BAT's mediante el navegador Brave 🙂



Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *