Hooks

WooNuxt hooks let you inject custom components at predefined locations in the storefront. They are useful when you only need to add a small piece of UI or logic and do not want to override a full page or component from woonuxt_base.

Hooks work with Nuxt layers, SSR, and static generation. Add your hook files to the root project or to a custom layer so upstream WooNuxt updates can still be pulled cleanly.

Available Hooks

These hook outlets are currently rendered by WooNuxt:

If no hook is registered for a location, WooNuxt renders nothing for that outlet and does not add an empty wrapper element.

How Hooks Are Loaded

Create a hooks folder in your app or custom layer. WooNuxt automatically loads every .ts and .js file in that folder.

app/
├── components/
│   └── ProductTrustMessage.vue
└── hooks/
    └── product.ts

Register hooks with registerHook. The name must match one of the available hook locations, and the id must be unique for that location.

import ProductTrustMessage from '~/components/ProductTrustMessage.vue'

export default () => {
  registerHook({
    name: 'product.summary.afterPrice',
    id: 'product-trust-message',
    renderer: ProductTrustMessage,
    priority: 10,
  })
}

The registered component receives the hook context as a ctx prop.

<script setup lang="ts">
defineProps<{
  ctx: {
    product: {
      name?: string
    }
  }
}>()
</script>

<template>
  <div class="mt-4 rounded-md border border-green-200 bg-green-50 p-3 text-sm text-green-800">
    Free returns and secure checkout for {{ ctx.product?.name || 'this product' }}.
  </div>
</template>

This renders the trust message after the product price on product pages without replacing the product page component.

Priority And Conditions

Use priority when multiple hooks are registered for the same location. Lower priority values render first. If no priority is set, WooNuxt uses 10.

Use when to render a hook only for matching context.

import SaleNotice from '~/components/SaleNotice.vue'

export default () => {
  registerHook({
    name: 'product.summary.beforeTitle',
    id: 'sale-notice',
    renderer: SaleNotice,
    priority: 5,
    when: ({ product }) => Boolean(product?.salePrice),
  })
}