WooCommerce Integration | CallMeBack Documentation

Documentation

WooCommerce Integration

Integrate CallMeBack with your WooCommerce-powered WordPress site to capture leads and provide instant callback requests for your e-commerce business.

Quick Start

Get CallMeBack live on your WooCommerce site in under 5 minutes using the WordPress theme editor method.

Prerequisites

  • A CallMeBack account (get one at callmeback.com)
  • WordPress site with WooCommerce plugin installed and activated
  • Admin access to your WordPress dashboard
  • Your CallMeBack integration code (found in your dashboard)

Integration Methods

Method 1: WordPress Theme Editor (Recommended)

This method adds the CallMeBack widget to all pages of your WooCommerce site.

Steps:

  1. Log in to your WordPress admin dashboard
  2. Go to Appearance → Theme Editor
  3. Select your active theme from the dropdown
  4. Click on header.php in the file list
  5. Find the </head> tag
  6. Paste your CallMeBack integration code just before the closing </head> tag
  7. Click Update File

Important

Always backup your theme files before making changes. Consider using a child theme for better safety.

Method 2: WooCommerce Specific Pages

Add the widget only to WooCommerce pages like product pages, cart, and checkout.

Steps:

  1. Go to Appearance → Theme Editor
  2. Select your active theme
  3. Click on functions.php
  4. Add this code at the end of the file:
// Add CallMeBack to WooCommerce pages only
function add_callmeback_to_woocommerce() {
    if (is_woocommerce() || is_cart() || is_checkout() || is_account_page()) {
        // Your CallMeBack integration code here
        echo '<script>/* Your CallMeBack code */</script>';
    }
}
add_action('wp_head', 'add_callmeback_to_woocommerce');

Pro Tip

This method ensures the widget only appears on WooCommerce pages, keeping your main site clean.

Method 3: WooCommerce Hooks

Use WooCommerce-specific hooks to place the widget in strategic locations.

Steps:

  1. Go to Appearance → Theme Editor
  2. Select your active theme
  3. Click on functions.php
  4. Add this code at the end of the file:
// Add CallMeBack to WooCommerce product pages
function add_callmeback_to_product_pages() {
    if (is_product()) {
        echo '<div class="callmeback-product-widget">';
        echo '<script>/* Your CallMeBack code */</script>';
        echo '</div>';
    }
}
add_action('woocommerce_single_product_summary', 'add_callmeback_to_product_pages', 25);

// Add to cart page
function add_callmeback_to_cart() {
    if (is_cart()) {
        echo '<script>/* Your CallMeBack code */</script>';
    }
}
add_action('woocommerce_after_cart_table', 'add_callmeback_to_cart');

Strategic Placement

This method places the widget exactly where your customers are most likely to need assistance.

Method 4: WooCommerce Form Integration

Integrate CallMeBack with WooCommerce forms like checkout and contact forms.

Steps:

  1. Install a form plugin like Contact Form 7 or Gravity Forms
  2. Create a contact form with email and phone fields
  3. Use the form's webhook feature to send data to CallMeBack
  4. Add the webhook URL: https://api.callmeback.com/webhook
  5. Map form fields to CallMeBack requirements

Advanced Integration

This method integrates CallMeBack directly with your existing WooCommerce forms for seamless lead capture.

Supported WooCommerce Forms

CallMeBack works with various WooCommerce form types:

  • Checkout forms
  • Contact forms
  • Product inquiry forms
  • Account registration forms
  • Custom forms with email and phone fields
  • WooCommerce extensions forms

Testing Your Integration

How to Test:

  1. Visit your WooCommerce website
  2. Navigate to a product page, cart, or checkout
  3. Look for the CallMeBack widget (floating button or embedded form)
  4. Click the widget to open the callback form
  5. Fill out the form with test information
  6. Submit the form and check your CallMeBack dashboard
  7. Verify that you receive the callback request notification

Troubleshooting

Widget Not Appearing

  • Check that your integration code is correctly pasted
  • Clear your browser cache and refresh the page
  • Verify your CallMeBack account is active
  • Check if your WordPress theme supports the method you used
  • Ensure WooCommerce is properly installed and activated

Form Submissions Not Working

  • Ensure your CallMeBack account has available credits
  • Check that the form fields match CallMeBack requirements
  • Verify your integration code is from the correct account
  • Test with a different browser or device
  • Check WordPress error logs for any issues

WooCommerce Conflicts

  • Check if WooCommerce extensions conflict with the widget
  • Try deactivating other plugins temporarily
  • Use a WooCommerce-compatible theme
  • Contact CallMeBack support for WooCommerce-specific help

Advanced Configuration

Custom Styling for WooCommerce

You can customize the widget appearance to match your WooCommerce theme:

/* Add this to your theme's CSS */
.callmeback-widget {
  /* Your custom styles here */
}

.callmeback-button {
  background-color: #your-woocommerce-primary-color !important;
  border-radius: 4px !important;
  font-family: inherit !important;
}

/* WooCommerce specific styling */
.woocommerce .callmeback-widget {
  margin: 20px 0;
}

WooCommerce Theme Integration

Most WooCommerce themes use specific CSS classes and color schemes. You can match these to create a seamless integration.

Need Help?

If you're having trouble with your WooCommerce integration:

Ready to get started?

Create your CallMeBack account and start capturing leads today.

Get Started Free