WooNooW/SETTINGS_PLACEMENT_STRATEGY.md

WooNooW Settings Placement Strategy

Philosophy

No separate "WooNooW Settings" page needed.

Instead, integrate WooNooW settings seamlessly into existing WooCommerce/WordPress settings pages by context.

---

Current WooCommerce Settings Structure

WooCommerce > Settings
├── General
│   ├── Store Address
│   ├── Selling Location
│   ├── Currency
│   └── ...
├── Products
│   ├── General
│   ├── Inventory
│   └── ...
├── Tax
│   ├── Tax Options
│   └── Standard Rates
├── Shipping
│   ├── Shipping Zones
│   └── Shipping Options
└── ...

---

WooNooW Settings Integration

1. Store Identity Settings

Location: WooCommerce > Settings > General (or new "Store Details" tab)

WooNooW Fields:

• ✅ Store Logo (upload)
• ✅ Store Icon/Favicon
• ✅ Brand Colors (primary, secondary)
• ✅ Store Tagline

Why here?

• Related to store identity
• Used across admin and frontend
• Makes sense with existing "Store Address" fields

Implementation:

add_filter('woocommerce_general_settings', function($settings) {
    $woonoow_settings = [
        [
            'title' => __('Store Identity', 'woonoow'),
            'type'  => 'title',
            'desc'  => __('Customize your store branding', 'woonoow'),
            'id'    => 'woonoow_store_identity',
        ],
        [
            'title' => __('Store Logo', 'woonoow'),
            'type'  => 'text',
            'desc'  => __('Upload your store logo', 'woonoow'),
            'id'    => 'woonoow_store_logo',
            'custom_attributes' => ['data-upload' => 'image'],
        ],
        [
            'title' => __('Primary Color', 'woonoow'),
            'type'  => 'color',
            'id'    => 'woonoow_primary_color',
            'default' => '#3b82f6',
        ],
        [
            'type' => 'sectionend',
            'id'   => 'woonoow_store_identity',
        ],
    ];
    
    return array_merge($settings, $woonoow_settings);
});

---

2. Order Settings

Location: WooCommerce > Settings > General or new "Orders" tab

WooNooW Fields:

• ✅ Default order status
• ✅ Order number format
• ✅ Enable order notes
• ✅ Auto-complete virtual orders

Why here?

• Order-specific settings
• Used in OrderForm and order processing
• Contextually related

---

3. Product Settings

Location: WooCommerce > Settings > Products

WooNooW Fields:

• ✅ Enable quick edit
• ✅ Default product type
• ✅ Enable bulk actions
• ✅ Product image sizes

Why here?

• Product-specific settings
• Used in ProductForm
• Already in Products context

---

4. UI/UX Settings

Location: New tab WooCommerce > Settings > Admin UI or WooNooW

WooNooW Fields:

• ✅ Enable/disable SPA mode
• ✅ Theme (light/dark/auto)
• ✅ Sidebar collapsed by default
• ✅ Items per page
• ✅ Date format preference

Why separate tab?

• WooNooW-specific features
• Not related to store operations
• Admin experience customization

Implementation:

add_filter('woocommerce_settings_tabs_array', function($tabs) {
    $tabs['woonoow'] = __('Admin UI', 'woonoow');
    return $tabs;
}, 50);

add_action('woocommerce_settings_woonoow', function() {
    woocommerce_admin_fields([
        [
            'title' => __('WooNooW Admin Settings', 'woonoow'),
            'type'  => 'title',
            'desc'  => __('Customize your admin experience', 'woonoow'),
        ],
        [
            'title'   => __('Enable SPA Mode', 'woonoow'),
            'type'    => 'checkbox',
            'desc'    => __('Use single-page application for faster navigation', 'woonoow'),
            'id'      => 'woonoow_enable_spa',
            'default' => 'yes',
        ],
        [
            'title'   => __('Theme', 'woonoow'),
            'type'    => 'select',
            'options' => [
                'light' => __('Light', 'woonoow'),
                'dark'  => __('Dark', 'woonoow'),
                'auto'  => __('Auto (System)', 'woonoow'),
            ],
            'id'      => 'woonoow_theme',
            'default' => 'auto',
        ],
    ]);
});

---

Settings Organization

By Context (Recommended):

WooCommerce > Settings > General
  └── Store Identity (WooNooW)
      ├── Store Logo
      ├── Brand Colors
      └── ...

WooCommerce > Settings > Products
  └── Product Management (WooNooW)
      ├── Quick Edit
      ├── Bulk Actions
      └── ...

WooCommerce > Settings > Orders
  └── Order Processing (WooNooW)
      ├── Order Number Format
      ├── Default Status
      └── ...

WooCommerce > Settings > Admin UI (New Tab)
  └── WooNooW Settings
      ├── SPA Mode
      ├── Theme
      ├── UI Preferences
      └── ...

Benefits:

✅ Contextual - Settings appear where they're relevant ✅ Familiar - Uses existing WooCommerce settings structure ✅ No clutter - No separate "WooNooW Settings" menu ✅ Intuitive - Users find settings where they expect them ✅ Seamless - Feels like native WooCommerce

---

Implementation Strategy

Phase 1: Integrate into Existing Tabs

// Store Identity → General tab
add_filter('woocommerce_general_settings', 'woonoow_add_store_identity_settings');

// Product Settings → Products tab
add_filter('woocommerce_product_settings', 'woonoow_add_product_settings');

// Order Settings → General tab or new Orders tab
add_filter('woocommerce_general_settings', 'woonoow_add_order_settings');

Phase 2: Add WooNooW-Specific Tab (If Needed)

// Only for settings that don't fit elsewhere
add_filter('woocommerce_settings_tabs_array', function($tabs) {
    $tabs['woonoow'] = __('Admin UI', 'woonoow');
    return $tabs;
});

Phase 3: Settings API

Provide a clean API for addons to register settings:

// Addon can add settings to any tab
WooNooW_Settings::add_field('general', [
    'id'    => 'my_addon_setting',
    'title' => 'My Setting',
    'type'  => 'text',
]);

// Or create own section
WooNooW_Settings::add_section('general', [
    'id'    => 'my_addon_section',
    'title' => 'My Addon Settings',
    'fields' => [...],
]);

---

Examples

Example 1: Store Logo

Bad (Separate Page):

WooNooW > Settings > Store Logo

Good (Contextual):

WooCommerce > Settings > General > Store Identity > Store Logo

Example 2: Order Number Format

Bad (Separate Page):

WooNooW > Settings > Order Number Format

Good (Contextual):

WooCommerce > Settings > Orders > Order Number Format

Example 3: SPA Mode

Acceptable (WooNooW-Specific):

WooCommerce > Settings > Admin UI > Enable SPA Mode

---

Settings Categories

Store Settings (Contextual Integration)

• Store Logo → General
• Brand Colors → General
• Currency Display → General
• Tax Display → Tax
• Shipping Display → Shipping

Product Settings (Contextual Integration)

• Default Product Type → Products > General
• Quick Edit → Products > General
• Inventory Settings → Products > Inventory

Order Settings (Contextual Integration)

• Order Number Format → Orders (new tab) or General
• Default Status → Orders
• Auto-complete → Orders

Admin UI Settings (New Tab)

• SPA Mode → Admin UI
• Theme → Admin UI
• Sidebar → Admin UI
• Items per Page → Admin UI

---

Migration from Current Settings

If WooNooW currently has a separate settings page:

Step 1: Identify Settings

Current: WooNooW > Settings > All Settings

Step 2: Categorize

Store Logo → Move to General
Order Format → Move to Orders
SPA Mode → Move to Admin UI

Step 3: Migrate

// Remove old settings page
remove_menu_page('woonoow-settings');

// Add to WooCommerce settings
add_filter('woocommerce_general_settings', ...);
add_filter('woocommerce_settings_tabs_array', ...);

Step 4: Redirect

// Redirect old URL to new location
add_action('admin_init', function() {
    if (isset($_GET['page']) && $_GET['page'] === 'woonoow-settings') {
        wp_redirect(admin_url('admin.php?page=wc-settings&tab=general'));
        exit;
    }
});

---

Conclusion

No separate "WooNooW Settings" page needed.

Instead:

1. ✅ Integrate into existing WooCommerce settings tabs by context
2. ✅ Add "Admin UI" tab for WooNooW-specific UI settings
3. ✅ Provide settings API for addons
4. ✅ Keep settings contextual and intuitive

Result:

• Seamless integration
• Better UX
• No clutter
• Familiar to users

WooNooW feels like a native part of WooCommerce, not a separate plugin.