Soundwave Hub

Version: 1.0.0
Author: Eric Kowalewski
Website: https://thebeartraxs.com

Overview

Soundwave Hub is a WordPress/WooCommerce admin-side enhancement that improves how synced affiliate orders are displayed in the Hub (the central fulfillment site).

It reformats the order line-item UI for clarity and production workflow efficiency.

This plugin does not alter front-end customer behavior — it’s purely for administrators and production staff reviewing synced orders.

Core Features

🧩 Admin Order UI Enhancements

• Bold, Unlinked Product Title
  The product name is displayed as static bold text instead of a link (reduces accidental navigation).

• Affiliate SKU Injection
  Displays the resolved or derived affiliate SKU (e.g. bct-1407-1408) under each product title.

• Mockup Preview Integration
  Pulls the best available image from:

  • Variation Image URL
  • Product Image
  • product_image_full

  The mockup displays as both:

  • A Mockup: View button (linking to the full-size file)
  • The thumbnail image at the left of each order line

• Original Art Last
  Moves all Original Art rows to the bottom of the meta list to prevent clutter.

• Meta Cleanup
  Removes redundant or irrelevant order item meta:

  • Site Slug, Affiliate IDs, raw SKU values, etc.
  • Keeps only meaningful fields: Color, Size, Company Name, Vendor Code, Production, Print Location, Mockup, and Original Art.

Internal Architecture

File Responsibilities

Technical Details

Block A — SKU & Mockup Data Injection

• Extracts relevant metadata for each order line (aff_sku, resolved_sku, Variation Image URL, etc.).
• Stamps <tr class="item"> with:

  data-swhub-sku="bct-1407-1408"
  data-swhub-mock="https://bct.thebeartraxs.com/wp-content/uploads/...webp"

• Enables lightweight JavaScript hooks to target those datasets for DOM updates.

Block B — Meta Reformatting

• Filters the WooCommerce meta array (woocommerce_order_item_get_formatted_meta_data).
• Keeps only one instance of Color and Size.
• Drops internal keys and redundant fields.
• Appends a single Mockup View row and moves all Original Art fields to the end.

Block C — Admin-Side JavaScript

• Runs on the shop_order screen only.
• Converts linked product titles into bold text.
• Displays the affiliate SKU inline.
• Ensures the thumbnail column shows the mockup image (creates <img> if missing).
• Reactively updates the DOM when Woo reloads order items (e.g., AJAX refreshes).

Example Output (Visual Layout)

Before

Affiliate Product ID: 1407
Affiliate Variation ID: 1408
Resolved SKU: bct-1407-1408
Product Image: ...
Site Slug: bct

After

SKU: bct-1407-1408
Color: Black
Size: S
Company Name: Bay City Takeover
Vendor Code: SanMar(DT6000)
Production: Screen Print
Print Location: Front
Mockup: [View]
Original Art — Front: [View]

🖼️ Thumbnail → Replaced by the mockup image automatically.

Compatibility

• WooCommerce 8.x+
• WordPress 6.5+
• PHP 8.1+

Tested on:

• The Bear Traxs Hub (Production Site)
• ShipStation integration confirmed
• Soundwave (Affiliate Sync Plugin) compatible

Developer Notes

• No database changes.
• No API calls.
• Admin-side only; uses core WooCommerce hooks and safe JavaScript mutation observers.
• Fully idempotent — patching runs once per order item and auto-reapplies after WooCommerce AJAX refreshes.

Future Improvements (optional backlog)

• Add hover-zoom on thumbnails
• Inline lightbox viewer for mockups
• Batch meta cleanup tool for legacy orders

Version History

© 2025 Eric Kowalewski. All Rights Reserved.