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
