E Commerce Orders Add WhatsApp Chat button to WordPress Website – 6fc Live

Leave a Comment / Knowledge base / By

Adding a WhatsApp chat button to your WooCommerce WordPress site, such as your store “My Shop” (from your “Blog Page” guide), enhances customer interaction for products like “Flying Ninja” (from your “Creating Products” guide) or verified users (from your “Email Verification” guide). The Click to Chat plugin by HoliThemes, featured in the 6fc Live Educate WordPress video hosted by Aisha, is a simple tool with over 200,000 active installations, enabling one-on-one chats or bot integration via WhatsApp. This guide details how to install, configure, and customize the WhatsApp chat button, based on the video and enriched with web sources.

Why Use Click to Chat?

  • Customer Engagement: Enables direct WhatsApp communication, increasing conversions by up to 30% for eCommerce queries.
  • WooCommerce Fit: Ideal for product inquiries (e.g., “Flying Ninja”) and integrates with tools like Razorpay (from your “Razorpay” guide).
  • Free Features: Customizable button, pre-filled messages, and mobile/web redirection.
  • Premium Features ($19+/year): Advanced styles, group chats, and analytics.
  • Limitations: Free version lacks advanced targeting; WhatsApp Business account recommended for bots.

Step 1: Install and Activate Click to Chat

  1. Install Plugin:
    • In your WordPress dashboard, go to Plugins > Add New.
    • Search for WhatsApp Click to Chat (per video, “Click to Chat” by HoliThemes).
    • Click Install Now, then Activate (per video).
    • Alternative: Download from wordpress.org/plugins/click-to-chat-for-whatsapp/ and upload via Plugins > Add New > Upload Plugin.
  2. Verify Installation:
    • Confirm: Click to Chat appears in the sidebar under Settings > Click to Chat (per video).

Step 2: Configure WhatsApp Chat Settings

  1. Access Settings:
    • Go to Settings > Click to Chat (per video).
  2. Add WhatsApp Number:
    • Enter your WhatsApp number (personal or WhatsApp Business, per video).
      • Format: Include country code without “+” (e.g., 919876543210 for +91-9876543210).
    • Click Save Changes.
  3. Set Pre-filled Message:
    • Add a Pre-filled Message to identify website visitors (per video).
      • Default Example: “Hello, I’m from [Site Name]”.
      • Use shortcodes for dynamic content (per video):
        • [site]: Inserts site name (e.g., “My Shop”).
        • [url]: Inserts current page URL (e.g., yoursite.com/shop).
        • [title]: Inserts page title (e.g., “Homepage” or “Long Sleeve Tee”).
      • Example (per video):
        Hello [site], I would like to know more about [title]
        • Result on homepage: “Hello My Shop, I would like to know more about Homepage”.
        • Result on product page: “Hello My Shop, I would like to know more about Long Sleeve Tee”.
    • Note: Users can edit the pre-filled message before sending (per video).
  4. Set Call to Action (CTA):
    • Add a CTA text (e.g., “Chat with us on WhatsApp”, per video).
    • This appears next to the button for clarity.
  5. Configure for WooCommerce Products:
    • In the WooCommerce section, set a product-specific pre-filled message (per video).
      • Example:
        Hello [site], I want to know about the product [title]
        • Result: “Hello My Shop, I want to know about the product Long Sleeve Tee”.
    • Set product-specific CTA (e.g., “Chat with us on WhatsApp”, per video).

Step 3: Customize Button Appearance

  1. Choose Style:
    • In Settings > Click to Chat > Styles, select a button style (per video):
      • Default: Green WhatsApp icon (Style 1).
      • Alternatives: Floating button, text link, or custom image (Styles 2-9).
    • Use default for simplicity (per video).
  2. Set Position:
    • Adjust button position (per video, e.g., bottom-right corner).
      • Options: Bottom, top, left, right, or custom coordinates.
      • Drag to reposition or enter pixel values for precision.
    • Example: Bottom-right (per video, default placement).
  3. Mobile vs. Desktop:
    • Enable Web WhatsApp for desktop users (per video, redirects to web.whatsapp.com).
    • On mobile, it opens the WhatsApp app (per video).
  4. Preview:
    • Save changes and visit your site to preview the button (per video, e.g., bottom-right WhatsApp icon).

Step 4: Set Display Rules

  1. Show/Hide Pages:
    • In Settings > Click to Chat > Display Settings, configure where the button appears (per video).
      • Show on: Select specific pages (e.g., homepage, shop page).
      • Hide on: Exclude pages (e.g., 404 pages, per video).
    • Add post IDs or categories to hide (e.g., exclude blog categories).
  2. WooCommerce Pages:
    • Enable for product pages, cart, or checkout (per video).
    • Example: Show on product pages for inquiries about “Flying Ninja”.
  3. Save Changes:
    • Click Save Changes (per video).

Step 5: Test WhatsApp Chat Functionality

  1. Test on Homepage:
    • Visit your site (e.g., yoursite.com) in incognito mode.
    • Confirm: WhatsApp button appears (e.g., bottom-right with “Chat with us on WhatsApp”, per video).
    • Click the button:
      • On desktop: Opens web.whatsapp.com with pre-filled message (e.g., “Hello My Shop, I would like to know more about Homepage”).
      • On mobile: Opens WhatsApp app with the same message.
    • Verify: Message is editable before sending.
  2. Test on Product Page:
    • Visit a product page (e.g., yoursite.com/product/long-sleeve-tee).
    • Click the button and confirm the product-specific message (e.g., “Hello My Shop, I want to know about the product Long Sleeve Tee”, per video).
  3. Troubleshoot:
    • Button Not Showing?:
      • Check display rules in Settings > Click to Chat.
      • Verify number format (e.g., no spaces or “+”).
      • Clear cache (from your “Backup and Migration” guide).
    • Incorrect Message?:
      • Review shortcodes in pre-filled message.
      • Test in incognito mode to rule out user-specific issues.
    • Theme Conflicts?: Test with Neve or Storefront (from your “Neve” or “Creating Products” guides).
    • Contact support at holithemes.com/support/ or check holithemes.com/plugins/click-to-chat/.

Step 6: Enhance with Optional Features

  1. Click to Chat Features:
    • Free:
      • WhatsApp button with pre-filled messages and shortcodes.
      • Mobile/app redirection and desktop web support.
      • Customizable styles and positions.
    • Premium ($19+/year):
      • Group chat support.
      • Analytics for click tracking.
      • Advanced styles (e.g., animated buttons).
      • WooCommerce order status integration.
    • Purchase at holithemes.com/plugins/click-to-chat/pricing/.
  2. WhatsApp Bot Integration:
    • Use a WhatsApp Business account with a bot (per video, e.g., for FAQs).
    • Tools: WATI, Landbot, or WhatsApp Business API.
    • Set bot responses for common queries (e.g., “What’s the price of Flying Ninja?”).
  3. WooCommerce Integration:
    • Pair with NotificationX for sales alerts (from your “NotificationX” guide).
    • Secure payments with Razorpay or UPI QR Code (from your “Razorpay” or “UPI Payment” guides).
    • Enhance search with Search & Filter or FiboSearch (from your “Search & Filter” or “FiboSearch” guides).
    • Promote via Icegram Express popups (from your “Announcement Bar” guide).
  4. Custom Styling:

Add CSS in Appearance > Customize > Additional CSS:
.ht-ctc-chat { background: #25D366; border-radius: 50%; padding: 10px; }

.ht-ctc-chat:hover { opacity: 0.8; }

  • @media (max-width: 600px) { .ht-ctc-chat { bottom: 20px; right: 20px; } }
  • Align with Neve’s design (from your “Neve” guide).

Step 7: Best Practices

  1. Message Clarity:
    • Use concise pre-filled messages (e.g., “Hello [site], I’m interested in [title]”).
    • Include site/page details to track query sources (per video).
  2. Button Placement:
    • Place button in a visible spot (e.g., bottom-right, per video).
    • Avoid overlapping with other elements (e.g., popups from your “Announcement Bar” guide).
  3. User Experience:
    • Test mobile redirection to ensure seamless app opening.
    • Use WhatsApp Business for professional branding and bot support.
  4. Testing:
    • Test in incognito mode on desktop/mobile.
    • Verify pre-filled messages for homepage and product pages.
    • Check button visibility on targeted pages.
  5. Performance:
    • Click to Chat is lightweight; cache pages excluding dynamic content (from your “Backup and Migration” guide).
    • Monitor load times with GTmetrix.

Pro Tips

  • Engagement: Promote the chat button with a Welcome Bar (from your “Sticky Menu” guide) or Icegram Express popups (from your “Announcement Bar” guide).
  • Security: Protect chats with Wordfence (from your “Malware Removal” guide).
  • Compliance: Use GDPR Cookie Consent for tracking cookies (from your “Cookie Notice” guide).
  • SEO: Optimize product pages with Yoast SEO (from your “Yoast SEO” guide) to drive traffic to chat-enabled pages.
  • Backup: Save settings with UpdraftPlus (from your “Backup and Migration” guide).
  • Styling: Match button with Neve’s design (from your “Neve” guide).

Congratulations!

You’ve added a WhatsApp chat button to your WooCommerce WordPress site with Click to Chat and 6fc Live! Your store now offers seamless customer interaction, boosting engagement and sales. For advanced features like group chats or analytics, explore Click to Chat Premium (holithemes.com). Combine with your other guides (e.g., “NotificationX,” “Yoast SEO,” “Neve”) for a robust platform. Need help with setup, bot integration, or troubleshooting? Comment below or visit holithemes.com/support/!

Leave a Comment

Your email address will not be published. Required fields are marked *

Get your website at just ₹499/Year

enroll today

Subscribe

Website Demo

About

Follow Me

Facebook-f Twitter Pinterest Youtube