WooCommerce is one of the most popular eCommerce platform on the web for WordPress. Within Chatstack v5.1 and above we officially support adding the live chat HTML code within WooCommerce stores. You can follow the steps below to easily get started using Chatstack with WooCommerce.

Step 1 – Chatstack Server Installation

Before you can add the HTML code to your WooCommerce website (at http://www.example.com/livehelp/) you will need to complete the Chatstack server software installation. These instructions can be found at Documentation – Server Software Installation Instructions. Once you have completed the server software installation and successfully logged into the Chatstack administration you can add the live chat HTML code to your WooCommerce store.

Step 2 – WooCommerce Live Chat HTML Code Installation

The easiest installation option for WooCommerce is to install our WordPress plugin. This will automatically insert the live chat HTML code on all your WordPress pages and also your WooCommerce store pages.

As an alternative to installing our WordPress plugin you can manually insert the live chat HTML code within your WordPress template files. Manually inserting the live chat HTML code is explained further below. You don’t need to manually install the live chat HTML code if you already have our WordPress plugin installed. Both should not be used at the same time.

The following lines should be added within your WooCommerce header.php template file. You can locate this template file at /wordpress/wp-content/themes/{template}/header.php where {template} is your configured WordPress or WooCommerce template theme.

This code should be placed after the other <script> tags but before the </head> tag within the header.php file:

<!--  BEGIN chatstack.com Live Chat HTML Code //-->
<script type="text/javascript">
    var Chatstack = {};
    Chatstack.server = '<?php echo($_SERVER['SERVER_NAME']); ?>';
    Chatstack.embedded = true;
    (function(d, undefined) { 
        // JavaScript
        Chatstack.e = []; Chatstack.ready = function (c) { Chatstack.e.push(c); }
        var b = d.createElement('script'); b.type = 'text/javascript'; b.async = true;
        b.src = ('https:' == d.location.protocol ? 'https://' : 'http://') + Chatstack.server + '/livehelp/scripts/js.min.js';
        var s = d.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(b, s);
    })(document);
</script>
<!--  END chatstack.com Live Chat HTML Code //-->

Woohooo! You’re ready to start chatting to your WooCommerce customers

If you experienced any issues with the above instructions or require our assistance then please contact us via. email or live chat for help.