Clerk.js allows you to write custom javascript functions, that adds new functionality to the Designs.

TemplateFormatters should be inserted as a configuration for Clerk.js, in the tracking-script that is inserted on all pages.

For WooCommerce this file contains the tracking-script:


An example can be seen below:

<script type="text/javascript">
    window.clerkAsyncInit = function () {
            key: '<?php echo $options['public_key']; ?>',
            collect_email: <?php echo $options['collect_emails'] ? 'true' : 'false'; ?>,
            templateFormatters: {
                log_price: function(price) {
    (function () {
        var e = document.createElement('script');
        e.type = 'text/javascript';
        e.async = true;
        e.src = document.location.protocol + '//';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(e, s);

You can write any number of TemplateFormatters, separated by comma:

templateFormatters: {
   log_price: function(price) {
   calculate_discount: function(price,special_price) {
      return price-special_price;
   substring: function(text) {
      var short_string = text.substring(0,20);
      return short_string;

After creating your TemplateFormatters, you can use them in your Designs using this syntax:

{{ substring name }} {{ calculate_discount price special_price }}

This effectively allows you to create any functionality in your Designs that you require.

Did this answer your question?