WooCommerce Chat Plugin

A WordPress plugin that adds a chat widget to your WooCommerce store, allowing customers to check their order status through predefined questions.

Features

• Floating Chat Widget: Appears on all pages of your WordPress site
• Predefined Questions: Users can select from common questions
• Two-Step Verification: Email/phone + order number for security
• Human-Friendly Responses: Different messages for each order status that sound natural
• Order Tracking Integration: Shows tracking numbers from custom meta fields
• Auto-Reset Conversation: After each query, asks "Can I help with something else?"
• Settings Page: Configure tracking number meta key in WooCommerce settings
• Greek Language Support: Full interface in Greek language
• Responsive Design: Works on desktop and mobile devices
• AJAX-Powered: Real-time order status updates without page reload

File Structure

woo-chat/
├── woo-chat.php              # Main plugin file
├── LICENSE.txt               # Plugin license
├── readme.txt                # WordPress plugin readme
├── assets/
│   ├── css/
│   │   └── woo-chat.css      # Chat widget styles
│   └── js/
│       └── woo-chat.js       # Chat functionality
├── includes/
│   ├── class-woo-chat-widget.php  # Widget rendering class
│   └── class-woo-chat-ajax.php    # AJAX handler class
└── templates/
    └── chat-widget.php       # HTML template for chat widget

Installation

1. Upload the woo-chat folder to /wp-content/plugins/
2. Activate the plugin through the 'Plugins' menu in WordPress
3. Make sure WooCommerce is installed and activated

Usage

For Customers

1. Click the blue chat button in the bottom-right corner of any page
2. Select a predefined question (e.g., "Που είναι η παραγγελία μου?")
3. Enter your order ID/number when prompted
4. View your order status instantly

For Developers

Adding Custom Questions

You can add more predefined questions using the woo_chat_predefined_questions filter:

add_filter( 'woo_chat_predefined_questions', function( $questions ) {
    $questions[] = array(
        'question' => 'Πώς μπορώ να αλλάξω τη διεύθυνση παράδοσης?',
        'response' => 'Παρακαλώ επικοινωνήστε με την εξυπηρέτηση πελατών.'
    );
    return $questions;
} );

Customizing Styles

You can override the CSS by adding custom styles in your theme:

/* Change chat button color */
#woo-chat-toggle {
  background-color: #your-color !important;
}

/* Change chat header color */
#woo-chat-header {
  background: linear-gradient(
    135deg,
    #your-color1 0%,
    #your-color2 100%
  ) !important;
}

How It Works

1. Frontend Display: The widget is loaded on all pages via wp_footer hook
2. User Interaction: JavaScript handles user clicks and input
3. Two-Step Verification: User provides email/phone, then order number
4. AJAX Request: Data is sent securely to WordPress backend
5. Order Lookup: PHP searches for the order and verifies email/phone match
6. Tracking Retrieval: If configured, retrieves tracking number from meta field
7. Smart Response: Generates human-friendly message based on order status
8. Auto-Reset: After showing info, asks if user needs more help and shows questions again

Settings

Navigate to WooCommerce → Chat Settings to configure:

Tracking Number Meta Key

Enter the custom field name where your tracking numbers are stored. Examples:

• _wet_tracking_numbers (WooCommerce Extend Tools)
• elta_tracking_number (ELTA Courier)
• _wc_shipment_tracking_items (WooCommerce Shipment Tracking)
• _tracking_number (Generic)

The plugin will automatically detect and display tracking numbers in completed orders.

Technical Details

JavaScript (woo-chat.js)

• Uses jQuery for DOM manipulation
• Manages chat state (initial, waiting_order_code)
• Handles AJAX communication with WordPress backend
• Implements smooth animations and transitions

PHP Classes

Woo_Chat_Widget

• Enqueues CSS and JavaScript files
• Renders the chat widget template
• Provides predefined questions

Woo_Chat_Ajax

• Handles AJAX requests securely with nonce verification
• Searches for orders by ID or order number
• Returns formatted order data (status, date, total)

CSS (woo-chat.css)

• Modern, clean design with smooth animations
• Fully responsive for mobile devices
• Custom scrollbar styling
• Hover effects and transitions

Requirements

• WordPress 5.8 or higher
• WooCommerce 5.0 or higher
• PHP 7.4 or higher

Security

• AJAX requests are protected with WordPress nonces
• All user input is sanitized
• Order lookup verifies order existence before returning data
• No sensitive order information is exposed unnecessarily

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

Changelog

1.0.0

• Initial release
• Floating chat widget
• Predefined questions in Greek
• Order status tracking
• Responsive design

Author

Akis Paneras

License

GPL2+