WooCommerce Integration Guide

QuackChat on WooCommerce

Add the QuackChat widget to your WooCommerce store for instant customer support on product pages, cart, and throughout your shop.

Quick Start (TL;DR)

1. Download the QuackChat plugin: quackchat-widget.zip
2. Plugins → Add New → Upload Plugin → choose the zip → Install Now → Activate
3. Settings → QuackChat → paste your Bot ID → Save

WooCommerce runs on WordPress, so everything in the WordPress guide applies. This guide covers WooCommerce-specific behavior.

Prerequisites

• WordPress admin access with WooCommerce installed
• Bot ID from your QuackChat dashboard (Deploy page → Copy Bot ID)

Step-by-Step Installation

Option A: QuackChat Plugin (Recommended)

1. Download the plugin zip: quackchat-widget.zip (also on your dashboard's Deploy page).
2. In WordPress admin, go to Plugins → Add New → Upload Plugin.
3. Choose quackchat-widget.zip, click Install Now, then Activate.
   • Distributed directly by QuackChat — it won't appear in plugin search; use Upload Plugin.
4. Go to Settings → QuackChat, paste your Bot ID, and Save.

On WooCommerce sites the settings page shows one extra option:

• Hide on cart & checkout — default off, and recommended off: the assistant keeps answering questions during checkout, and cart-recovery / free-shipping nudges fire on exactly those pages.

Option B: WPCode Snippet (Manual Fallback)

If you can't upload plugins, use the WPCode method from the WordPress guide with this snippet in the Footer box:

<script
  src="https://www.quackchat.app/widget/quackchat-widget.js"
  data-bot-id="YOUR_BOT_ID"
  async
></script>

Live Store Answers (Pro)

The widget install above answers from your crawled site content. To let the bot answer live product, stock and order questions — plus product cards and add-to-cart — connect your store with the WooCommerce Store connector (see the "WooCommerce Store — live products & orders" guide). No extra widget config needed: cart features activate automatically when the widget runs on your store's own domain.

Verification

Quick test:

1. Visit your store's homepage
2. Navigate to a product page
3. Look for the chat bubble
4. Test sending a message

Troubleshooting

Two chat bubbles

Cause: The widget was previously installed via a code snippet (WPCode, theme editor) and the plugin is now also active.

Solution: Remove the old snippet — the plugin replaces it.

Widget overlaps "Add to Cart" on mobile

Cause: Fixed positioning conflict.

Solution: Switch Position to Bottom left in Settings → QuackChat, or add CSS margin:

/* Add to your theme's CSS */
@media (max-width: 768px) {
  .single-product .add_to_cart_button {
    margin-bottom: 80px;
  }
}

Caching plugins serve stale settings

Cause: WooCommerce sites often use aggressive page caching; settings changes don't show until purge.

Solution:

• Clear cache after changing QuackChat settings
• Exclude widget script from minification/concatenation
• For WP Rocket: Add quackchat-widget.js to excluded files

Widget not working with AJAX mini-cart

Cause: No conflict expected, but verify in console.

Solution: Check browser console for errors after cart updates.

Performance

1. Async by default: the plugin injects the script with async — it never blocks your page
2. Keep the widget on cart/checkout: it's where cart-recovery and free-shipping nudges earn their keep

Known Limitations

• Widget doesn't appear in WooCommerce emails
• Block-based checkout may have different z-index behavior
• Payment gateway overlays may cover the widget