Plugin Setup

The WooNuxt Settings plugin is the cornerstone of your WooNuxt setup. It automatically installs dependencies and provides a central configuration hub for your headless WooCommerce store.

WooNuxt setup plugin woonuxt-settings.zip

Installation Steps

Upload to WordPress

1. In WordPress admin, navigate to Plugins > Add New
2. Click the Upload Plugin button at the top
3. Click Choose File and select woonuxt-settings.zip
4. Click Install Now
5. Click Activate once installation completes

Access Settings

After activation, find the settings page:

• Go to Settings > WooNuxt in WordPress admin
• You'll see a comprehensive dashboard with multiple sections

What the Plugin Does

The WooNuxt Settings plugin handles the heavy lifting of WordPress configuration for your headless WooCommerce store.

Required Dependencies

The plugin will automatically install these dependencies for you:

Name: WPGraphQL
Purpose: GraphQL API for WordPress
Description: Provides GraphQL endpoint at /graphql
Auto-installed: ✅ Yes

Name: WPGraphQL WooCommerce (WooGraphQL)
Purpose: WooCommerce GraphQL integration
Description: Exposes WooCommerce data via GraphQL
Auto-installed: ✅ Yes

Name: WPGraphQL Headless Login
Purpose: Headless authentication
Description: Enables login/logout via GraphQL mutations
Auto-installed: ✅ Yes

Auto-Installation Process

When you visit Settings > WooNuxt for the first time:

1. The plugin checks for required dependencies
2. Shows "Required Plugins" section with install buttons
3. Click Install Now for each plugin
4. Plugins are downloaded, installed, and activated automatically
5. Once all plugins are installed, the section changes to deployment options

Plugin Settings Overview

Once installed, the WooNuxt Settings plugin provides these configuration options:

Global Settings

Global Attributes

Configure product attributes for filtering:

• Custom Label - Display name for the filter
• Attribute - WooCommerce attribute taxonomy (e.g., pa_color)
• Show Count - Display product count per term
• Hide Empty - Hide attributes with no products
• Open By Default - Expand filter by default

These settings are exposed via GraphQL as global_attributes array.

SEO Settings

Add social media handles:

• Provider - Social platform (Facebook, Twitter, Instagram, etc.)
• Handle - Your username/handle
• URL - Full profile URL

Stripe Configuration

Stripe settings are automatically exposed via GraphQL:

• Reads from WooCommerce > Settings > Payments > Stripe
• Exposes stripeSettings with:
  • enabled - Whether Stripe is active
  • testmode - Test or live mode
  • publishable_key - Public key based on environment

GraphQL Schema

After installation, the plugin adds woonuxtSettings to your GraphQL schema:

query getWooNuxtSettings {
  woonuxtSettings {
    primary_color
    logo
    publicIntrospectionEnabled
    frontEndUrl
    domain
    maxPrice
    productsPerPage
    wooCommerceSettingsVersion
    global_attributes {
      slug
      showCount
      openByDefault
      label
      hideEmpty
    }
    stripeSettings {
      enabled
      testmode
      test_publishable_key
      publishable_key
    }
  }
}

Verification

After installation, verify everything is working:

Common Issues

Plugin auto-installation fails? Ensure WordPress is 6.9.4+ and you have admin access. Manual installation: download from WordPress.org and GitHub releases.

GraphQL endpoint not accessible? Go to Settings > Permalinks and click Save Changes to flush rewrite rules.

Plugin Configuration

After installing the WooNuxt Settings plugin, configure it to connect your WordPress backend with your Nuxt frontend.

Accessing Settings

Navigate to Settings > WooNuxt in your WordPress admin dashboard.

Logo Configuration

Upload or specify your site logo:

Logo URL: https://yoursite.com/wp-content/uploads/logo.svg

How to set:

1. Upload logo to Media Library
2. Copy the file URL
3. Paste into the Logo field
4. Click Save Changes

Best practices:

• Use SVG format for best quality
• Recommended size: 200x50px to 400x100px
• Transparent background works best
• Logo appears in your Nuxt frontend header

Frontend URL

Specify your Nuxt application URL (not your WordPress URL):

Frontend URL: https://your-store.netlify.app

Use cases:

• Links in emails point to frontend
• Redirects after login/logout
• CORS configuration
• Social sharing links

Products Per Page

Set pagination limit for product listings:

Products Per Page: 24 (default)

Common values:

• 12 - Fewer products, faster loading
• 24 - Balanced (default)
• 48 - More products per page

This value is exposed via GraphQL and used by your Nuxt frontend for pagination.

Primary Color

Define your brand's primary color:

Primary Color: #7F54B2 (default)

Features:

• Color picker interface
• Live preview of frontend elements
• Hex color code input
• Affects buttons, links, and interactive elements

The color is exposed via GraphQL as primary_color for your Nuxt theme.

Build Hook

Trigger deployments from WordPress:

Build Hook: https://api.netlify.com/build_hooks/your_unique_id

Where to find:

1. Netlify: Site Settings > Build & Deploy > Build Hooks
2. Vercel: Project Settings > Git > Deploy Hooks

When to use:

• After publishing new products
• After updating content
• After changing settings
• Automatic deployments on save

Once configured, a Deploy button appears in the WooNuxt toolbar.

Global Attributes

Global Attributes enable advanced product filtering on your frontend.

What Are Global Attributes?

Product attributes in WooCommerce (like Color, Size, Material) that you want to use as filters across all product pages.

Adding a Filter:

1. Click Add New button
2. Enter a custom label (e.g., "Filter by Color")
3. Select the attribute from dropdown (e.g., Color)
4. Configure display options:
   • ☑️ Show Count - Display number of products
   • ☑️ Hide Empty - Hide terms with 0 products
   • ☑️ Open By Default - Start expanded
5. Click Save Changes

SEO Settings

Configure social media profiles for rich meta tags:

Adding Social Profiles:

1. Click Add new button
2. Enter provider name (e.g., "facebook", "twitter", "instagram")
3. Add your handle (e.g., "@yourstore")
4. Add full profile URL (e.g., "https://facebook.com/yourstore")
5. Click Save Changes

These settings populate Open Graph and Twitter Card meta tags on your frontend for better social sharing.

Stripe Configuration

Stripe settings are automatically pulled from WooCommerce:

1. Configure Stripe in WooCommerce > Settings > Payments > Stripe
2. WooNuxt Settings automatically exposes these via GraphQL
3. Your Nuxt frontend reads the appropriate key based on environment

Verification

After configuring settings, verify in GraphQL IDE:

query TestSettings {
  woonuxtSettings {
    logo
    primary_color
    frontEndUrl
    productsPerPage
    global_attributes {
      label
      slug
      showCount
      hideEmpty
      openByDefault
    }
    stripeSettings {
      enabled
      testmode
      publishable_key
    }
  }
}

What's Next

With WordPress fully configured, you're ready to start building with WooNuxt!