Brayne Font Picker Plugin

A WordPress plugin for WooCommerce that allows customers to select fonts and enter names for personalized jewelry products.

Features

Version 1.6.0 - Custom Font Input & Enhanced Flexibility

• Custom Font Input: Users can now type their own font names when "Other" is selected
• Enhanced Font Flexibility: Support for any font family name, not just predefined options
• Improved Validation: Better validation for custom font inputs
• Visual Custom Font Indicators: Special styling for custom font input fields
• Seamless Integration: Custom fonts work with existing preview and cart functionality

Version 1.5.0 - Extended Font Support & Grid Layout

• Extended Font Support: Now supports up to 10 font selections per product
• Smart Grid Layout: Responsive grid design that adapts to the number of required fonts
• Progress Indicator: Visual progress bar showing completion status for multiple fonts
• Enhanced Mobile Experience: Improved responsive design for tablets and mobile devices
• Compact Design: Optimized layout to prevent the interface from looking too long

Version 1.4.0 - Collapsible Interface & Custom Fonts

• Collapsible Font Selection: Clean, organized interface with expandable/collapsible sections
• Custom Font Upload: Upload and manage custom fonts (WOFF2 format) not available on Google Fonts
• Status Indicators: Visual status showing completion state of each font selection
• Improved UX: Better organization for multiple font selections with clear visual hierarchy

Version 1.3.0 - Multiple Font Selection

• Multiple Font Support: Products can now require 1, 2, or 3 font selections
• Individual Font Previews: Each font selection has its own live preview
• Category-Based Configuration: Set different font requirements per product category
• Validation: Ensures all required fonts and names are selected before adding to cart
• Enhanced UI: Improved styling with numbered font selection groups

Core Features

• Font picker for WooCommerce products
• Live font preview with Google Fonts integration
• Character limit configuration per category
• Cart and order integration
• Admin settings page for easy configuration
• Responsive design for mobile devices

Installation

1. Upload the plugin files to /wp-content/plugins/brayne-font-picker/
2. Activate the plugin through the 'Plugins' menu in WordPress
3. Go to 'Settings > Font Picker Settings' to configure

Configuration

Setting Up Font Requirements

1. Navigate to Settings > Font Picker Settings
2. For each product category, configure:
   • Fonts: Enter Google Font family names separated by commas
   • Character Limit: Maximum characters allowed for names
   • Required Fonts: Choose 1-10 fonts required for products in this category

Managing Custom Fonts

1. In the Custom Fonts Management section:
   • Enter a unique name for your custom font
   • Upload a WOFF2 format font file
   • Click "Upload Custom Font" to add it to your font library
2. Custom fonts will appear in the "Custom Fonts" group in the font dropdown
3. Use the "Remove" button to delete custom fonts you no longer need

Example Configuration

Single Font Products (e.g., Simple Name Necklaces)

• Required Fonts: 1
• Character Limit: 8
• Fonts: Open Sans, Lobster, Roboto

Dual Font Products (e.g., Two-Name Bracelets)

• Required Fonts: 2
• Character Limit: 6
• Fonts: Open Sans, Lobster, Roboto, Dancing Script

Multiple Font Products (e.g., Family Name Rings, Complex Jewelry)

• Required Fonts: 4-5
• Character Limit: 5
• Fonts: Open Sans, Lobster, Roboto, Great Vibes, Pacifico, Playfair Display

Complex Multi-Font Products (e.g., Detailed Personalized Items)

• Required Fonts: 6-10
• Character Limit: 4-5
• Fonts: Various Google Fonts and Custom Fonts

How It Works

For Customers

1. When viewing a product, customers see font selection options based on the product category
2. For products requiring multiple fonts, they'll see a responsive grid layout with collapsible sections
3. The interface automatically adapts:
   • 1 Font: Single, always-expanded interface
   • 2-3 Fonts: Standard grid layout
   • 4-5 Fonts: Compact grid layout
   • 6+ Fonts: Very compact grid layout
4. Each font selection includes:
   • Clickable header showing completion status
   • Font dropdown with Google Fonts, Custom Fonts, and "Other" option
   • Custom font input field (appears when "Other" is selected)
   • Name input field with character limit
   • Live preview showing the selected font and name
5. Custom Font Selection:
   • Select "Other (type your own)..." from the font dropdown
   • A custom font input field appears with special styling
   • Type any font family name (e.g., "Comic Sans MS", "Verdana", "Georgia")
   • The preview updates in real-time to show the custom font
6. Progress bar shows overall completion status for multiple fonts
7. All required fonts and names must be selected before adding to cart
8. Visual status indicators show which selections are complete

For Administrators

1. Configure font requirements in the admin settings (1-10 fonts per category)
2. Set different requirements for different product categories
3. View font and name selections in cart and order details
4. Manage custom categories for special product types

File Structure

brayne-font-picker/
├── brayne-font-picker.php    # Main plugin file
├── font-picker.js           # Frontend JavaScript
├── font-picker.css          # Frontend styles
├── admin-scripts.js         # Admin JavaScript
└── README.md               # This file

Changelog

Version 1.6.0

• Added custom font input functionality with "Other" option in font dropdown
• Implemented dynamic custom font input field that appears when "Other" is selected
• Enhanced validation to ensure custom font names are provided when "Other" is selected
• Added special styling for custom font input fields with visual indicators
• Updated preview functionality to handle custom fonts seamlessly
• Improved progress tracking to account for custom font selections
• Enhanced cart and order processing to handle custom font names

Version 1.5.0

• Extended font support from 3 to 10 fonts per product
• Implemented responsive grid layout that adapts to font count
• Added progress indicator for multiple font selections
• Enhanced mobile responsiveness for tablets and phones
• Optimized layout to prevent interface from looking too long
• Added visual improvements with hover effects and gradients
• Updated admin settings to support up to 10 font requirements

Version 1.4.0

• Added collapsible interface for better organization of multiple font selections
• Implemented custom font upload functionality (WOFF2 format)
• Added visual status indicators for font selection completion
• Enhanced admin interface with custom font management
• Improved user experience with cleaner, more organized interface

Version 1.3.0

• Added support for multiple font selections (1, 2, or 3 fonts)
• Enhanced UI with numbered font selection groups
• Added validation for required font selections
• Improved styling for multiple font interfaces
• Updated admin settings to include font requirements configuration

Version 1.2.0

• Added character limit configuration per category
• Enhanced admin interface with custom category management
• Improved font loading and preview functionality

Version 1.0.0

• Initial release with basic font picker functionality
• Google Fonts integration
• Cart and order integration

Support

For support and feature requests, please contact Brayne Digital.

License

This plugin is proprietary software developed by Brayne Digital.