Social Proof w/ Elementor PRO

Let’s create some Amazing and Light Weight Social Proof Addons for Elementor, without installing useless plugins.

We’re going to use only HTML, CSS, jQuery/Javascript and obv Elementor + Elementor PRO.

Using this solution, you’ll inject Javascript code only into Product Page, this mean that the other pages will not load useless code that would not be used. ( SEO will thank you! )

Last 24 H Sold Item

Last 24H Item Sold Counter HTML Code ( use into Heading Component )

🔥 <b><span class="sold-number"> 10 </span></b> sold in the last <b>24 hours!</b>

Live Visitors

Live Visitors Counter HTML Code ( use into Heading Component )

🙍‍♀️ <span class="current-live">5</span> Live Visitors</b>

CSS used to customize Number Container (use into Advanced CSS Elementor )

selector .current-live{
    color: #fff;
    background: #E7040F;
    padding: 5px;
    border-radius: 3px;
}

Javascript & jQuery

Javascript & jQuery Snipped used to automate Number Changes into the 2 Headings. Place it into an HTML Elementor Container.

//add <script> tag
jQuery(document).ready(function(){
        var i = Math.floor((Math.random() * 30) + 1);
        
        var user = 10;
        var time = setInterval(function(){
            var rand = Math.floor((Math.random() * 10) + 1);
            
            if(rand < 5 &amp;&amp; user > 0){
                user = user - (rand + (user/10));
            }else{
                if(user < 50){
                    user = user + rand;
                    i = i + 1;
                }
            }
            
            jQuery('.sold-number').text(i);
            jQuery('.current-live').text(parseInt(user));
        }, 4500);
    });
//add </script> tag