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 && 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