# COD Express Checkout - WordPress.org Assets Guide This guide contains all specifications, prompts, and requirements for creating plugin assets for WordPress.org submission. --- ## 📁 Required Files Structure Upload these to your SVN `assets/` folder (NOT in the plugin zip): ``` assets/ ├── banner-1544x500.png (Banner - high DPI - REQUIRED) ├── banner-772x250.png (Banner - standard - REQUIRED) ├── icon-256x256.png (Icon - high DPI - REQUIRED) ├── icon-128x128.png (Icon - standard - REQUIRED) ├── screenshot-1.png (Product page form) ├── screenshot-2.png (Admin general settings) ├── screenshot-3.png (Admin field config) ├── screenshot-4.png (Thank you page) ├── screenshot-5.png (Mobile view) └── screenshot-6.png (Variable product) ``` --- ## 🎨 Color Palette | Color | Hex Code | Usage | |-------|----------|-------| | Primary Blue | `#0073aa` | Main brand color (WordPress blue) | | Dark Blue | `#005a87` | Gradients, hover states | | Success Green | `#00d084` | Checkmarks, success states | | Light Blue | `#00b4d8` | Accents, gradients | | Dark Text | `#333333` | Headings | | Light Gray | `#f5f5f5` | Backgrounds | | White | `#ffffff` | Backgrounds, text on dark | --- ## 🖼️ BANNER SPECIFICATIONS ### Dimensions | File Name | Size | Purpose | |-----------|------|---------| | `banner-1544x500.png` | 1544×500 px | High-DPI/Retina displays | | `banner-772x250.png` | 772×250 px | Standard displays | **Design at 1544×500, then resize to 772×250** (exactly half). ### Banner AI Prompt (for DALL-E, Midjourney, etc.) ``` Professional WordPress plugin banner for "COD Express Checkout", 1544x500 pixels. CONCEPT: Split design showing problem vs solution LEFT SIDE (40% - The Problem): - Faded, frustrated customer looking at complex checkout - Multiple cart/checkout page icons crossed out - Muted gray and red tones - Small text: "Complex Checkout = Lost Sales" RIGHT SIDE (60% - The Solution): - Happy customer on mobile phone - Clean, minimal checkout form mockup visible on screen - Single blue "Order Now" button - Bright, professional colors - Large text: "COD Express Checkout" - Tagline: "One Form. One Click. Done." STYLE: - Modern, flat design (not 3D or glossy) - Primary color: #0073aa (WordPress blue) - Secondary: #7e3bd0 (Purple accent) - Clean white backgrounds - Professional but approachable ELEMENTS TO INCLUDE: - Lightning bolt ⚡ icon (representing speed/express) - Mobile device showing the checkout form - Cash/money icon (representing COD) - Subtle WooCommerce integration hint DO NOT INCLUDE: - Text smaller than 24px (won't be readable) - Cluttered elements - Copyrighted brand logos - Human faces (to avoid licensing issues) ``` ### Alternative Minimalist Banner Prompt ``` Minimalist WordPress plugin banner, 1544x500 pixels. CENTER COMPOSITION: - Plugin name "COD Express Checkout" in bold, modern sans-serif typography - Lightning bolt ⚡ icon in gradient blue (#0073aa to #00b4d8) - Tagline below: "Skip Cart. Skip Checkout. More Sales." BACKGROUND: - Clean gradient from light blue (#e3f2fd) to white - Subtle geometric shapes or dots pattern - Professional and trustworthy feel RIGHT SIDE (optional): - Small isometric mobile phone mockup showing checkout form - Floating form fields animation style BADGES (optional, bottom corners): - "WooCommerce Compatible" badge - "Cash on Delivery" badge COLORS: - Primary: #0073aa - Accent: #00d084 (success green) - Background: Light gradient to white - Text: #333333 (dark gray) FONTS: - Heading: Poppins Bold or Inter Bold - Subheading: Poppins Regular STYLE: Flat, modern, clean, professional ``` --- ## 🔲 ICON SPECIFICATIONS ### Dimensions | File Name | Size | |-----------|------| | `icon-256x256.png` | 256×256 px | | `icon-128x128.png` | 128×128 px | **Design at 256×256, then resize to 128×128** (exactly half). ### Icon AI Prompt ``` Square plugin icon for "COD Express Checkout", 256x256 pixels. DESIGN OPTIONS (choose one): OPTION A - Express Cart: - Stylized shopping cart silhouette - Lightning bolt ⚡ striking through/above it - Represents "express/fast checkout" - Blue gradient background (#0073aa to #005a87) - White/light icon elements OPTION B - Form + Checkmark: - Minimalist checkout form/document shape - Green checkmark ✓ overlay (top right corner) - Represents "one-click completion" - Blue form (#0073aa), green checkmark (#00d084) - White or light blue background OPTION C - Speed Box: - Package/box shape - Speed lines or motion blur effect - Represents "fast delivery" - Blue and white with subtle orange accent OPTION D - Lightning + COD: - Bold lightning bolt ⚡ as main element - Small cash/money symbol integrated - Represents "express cash on delivery" - Blue gradient background STYLE REQUIREMENTS: - Simple enough to recognize at 128px and even 64px - Works on both light AND dark backgrounds - Flat design, minimal gradients - 2-3 colors maximum - Rounded corners (8-16px radius) - NO text (won't be readable at small sizes) - Centered composition COLOR PALETTE: - Primary: #0073aa (WordPress blue) - Secondary: #00d084 (success green) - Background: White or very light blue - Optional accent: #f0b429 (gold/cash color) FORMAT: PNG with transparent or white background ``` --- ## 📐 LOGO SPECIFICATIONS ### Logo Variations Needed 1. **Full Logo** - Icon + Text (horizontal layout) 2. **Icon Only** - Square, for favicons/social media 3. **Dark Background Version** 4. **Light Background Version** ### Logo AI Prompt ``` Professional logo for WordPress plugin "COD Express Checkout" LAYOUT: Horizontal (icon on left, text on right) ICON (Left Side): - Square with rounded corners (16px radius) - Lightning bolt ⚡ integrated with cart/checkout concept - Blue gradient (#0073aa to #00b4d8) or solid blue - Should work standalone as a square icon TEXT (Right Side): - "COD Express" - first line (bold weight) - "Checkout" - second line (regular/light weight) - Modern sans-serif font (Poppins, Inter, or Montserrat style) - Text color: #333333 (dark gray) or #0073aa (blue) - Clean letter spacing OVERALL STYLE: - Clean and professional - Tech/SaaS company feel - Trustworthy for e-commerce - Scalable from 32px favicon to 500px+ hero VARIATIONS: 1. Full color on white background 2. Full color on dark (#1a1a1a) background 3. Single color (all blue) version 4. Single color (all white) version AVOID: - Overly complex details that don't scale - Clip art or cartoon style - Dated glossy/3D effects - Thin lines that disappear at small sizes DELIVERABLES: - SVG (vector) for scalability - PNG at 500px width (for web use) - PNG at 128px width (for favicon) ``` --- ## 📸 SCREENSHOT SPECIFICATIONS Screenshots should be **clear, high-resolution captures** of the actual plugin in use. ### General Screenshot Guidelines - **Resolution**: At least 1200px wide (WordPress scales them) - **Format**: PNG (preferred) or JPG - **Clean State**: No browser toolbars, clean theme, no personal data - **Annotations**: Optional arrows/highlights to show features --- ### Screenshot 1: Express Checkout Form on Product Page **Filename:** `screenshot-1.png` **Caption:** "Express checkout form on product page" **What to capture:** - WooCommerce single product page - Clean theme (Storefront recommended) - Product with: - Product image (nice product photo) - Title: "Premium Wireless Headphones" (or similar) - Price: "$99.00" - Star rating - "Add to Cart" button - Express checkout form prominently displayed: - ⚡ "Express COD Checkout" title - Full Name field - Phone Number field - Address field - City field - Blue "Order Now - Pay on Delivery" button **Highlight:** The main value proposition - form right on product page --- ### Screenshot 2: Admin Settings - General Configuration **Filename:** `screenshot-2.png` **Caption:** "Admin settings - General configuration" **What to capture:** - WordPress admin panel - WooCommerce → COD Express settings page - General Settings section showing: - ✅ Enable COD Express Checkout (toggle ON) - Button Text: "Order Now - Pay on Delivery" - Form Title: "Express COD Checkout" - Primary Color picker showing #0073aa - Save Changes button **Highlight:** Easy configuration, no coding required --- ### Screenshot 3: Admin Settings - Field Configuration **Filename:** `screenshot-3.png` **Caption:** "Admin settings - Field configuration with drag-and-drop" **What to capture:** - Field Configuration section of admin panel - Sortable fields list with drag handles (☰ icons) - Each field showing: - Checkbox (enabled/disabled) - Field name - Required indicator (asterisk) - Editable label - Visible fields: - ✅ Full Name *(Required)* - ✅ Phone Number *(Required)* - ☐ Email Address - ✅ Address *(Required)* - ✅ City *(Required)* - ✅ State/Province - ✅ Postcode/ZIP - ☐ Order Notes **Highlight:** Drag-and-drop flexibility, customizable labels --- ### Screenshot 4: Order Confirmation (Thank You Page) **Filename:** `screenshot-4.png` **Caption:** "WooCommerce order confirmation page" **What to capture:** - WooCommerce "Order received" / Thank You page - Success message: "Thank you. Your order has been received." - Order details box showing: - Order number: #1234 - Date: Current date - Total: $99.00 - Payment method: Cash on delivery - Order details table (product, quantity, total) - Customer details section **Highlight:** Seamless WooCommerce integration, standard order flow --- ### Screenshot 5: Mobile Responsive View **Filename:** `screenshot-5.png` **Caption:** "Mobile responsive view" **What to capture:** - Mobile device frame (iPhone or Android mockup) - Or browser DevTools mobile view (375px width) - Product page with: - Stacked layout - Full-width product image - Price and title - Express checkout form (full width) - Touch-friendly large input fields - Full-width "Order Now" button **Tools to create mockup:** - Browser DevTools (Responsive mode) - mockuphone.com - shotsnapp.com - Or real device screenshot **Highlight:** Works perfectly on mobile devices --- ### Screenshot 6: Variable Product with Variation Selection **Filename:** `screenshot-6.png` **Caption:** "Variable product with variation selection" **What to capture:** - Variable product page (e.g., T-Shirt) - Product with variations: - Size dropdown: S / M / L / XL - Color dropdown or swatches: Red / Blue / Black - Price updating based on selection - "Clear" link to reset selection - Express checkout form below - Form correctly capturing selected variation **Two options for this screenshot:** 1. Show variation dropdowns BEFORE selection (with placeholder) 2. Show variation dropdowns AFTER selection (with specific size/color chosen) **Highlight:** Full variable product support --- ## ✅ PRE-SUBMISSION CHECKLIST Before uploading to WordPress.org SVN: ### Images - [ ] banner-1544x500.png created and optimized - [ ] banner-772x250.png created (resized from large) - [ ] icon-256x256.png created - [ ] icon-128x128.png created (resized from large) - [ ] screenshot-1.png - Product page form - [ ] screenshot-2.png - Admin general settings - [ ] screenshot-3.png - Admin field config - [ ] screenshot-4.png - Thank you page - [ ] screenshot-5.png - Mobile view - [ ] screenshot-6.png - Variable product ### Image Optimization - [ ] All PNGs compressed (tinypng.com or similar) - [ ] File sizes under 1MB each (preferably under 500KB) - [ ] No personal/identifying information visible - [ ] No copyrighted content or trademarked logos - [ ] Clean, professional appearance ### readme.txt Alignment - [ ] Screenshot descriptions in readme.txt match actual screenshots - [ ] Screenshots numbered correctly (screenshot-1, screenshot-2, etc.) --- ## 🔧 Useful Tools ### For Screenshots - **ShareX** (Windows) - Free screenshot tool - **Snagit** (Windows/Mac) - Professional screenshots - **CleanShot X** (Mac) - Beautiful screenshots - **Browser DevTools** - Mobile view simulation ### For Image Editing - **Figma** (Free) - Vector design, easy resizing - **Canva Pro** - Templates and easy design - **Adobe Illustrator** - Professional vector design - **Photoshop** - Raster editing ### For AI Image Generation - **DALL-E 3** (ChatGPT Plus) - Text to image - **Midjourney** - High quality images - **Adobe Firefly** - Commercial-safe images - **Canva AI** - Integrated with Canva ### For Optimization - **TinyPNG** - PNG/JPG compression - **Squoosh** - Google's image optimizer - **ImageOptim** (Mac) - Lossless compression ### For Mockups - **mockuphone.com** - Free device mockups - **shotsnapp.com** - Beautiful mockups - **cleanmock.com** - Browser mockups --- ## 📝 Notes 1. **Design once, export twice** - Create banners/icons at the larger size, then resize for the smaller version. 2. **Keep it simple** - WordPress.org plugins with clean, professional assets perform better. 3. **Consistency** - Use the same color palette (#0073aa blue) across all assets. 4. **Test at small sizes** - Make sure your icon is recognizable at 64px. 5. **Update regularly** - When you add features, update screenshots to match. --- *Guide created for COD Express Checkout v1.0.0* *Last updated: December 2024*