Tuesday’s Tip: Hide the Add to Cart button in Infusionsoft

The Infusionsoft storefront makes it easy to sell your products online. You can easily change the colors and graphics to make it fit the look and feel of your brand. What makes it really powerful is the ability to add custom JavaScript.

For example, do you want to make sure your customers read the product description before adding your product to your cart? Or perhaps you want the Add to Cart button to grab their attention by fading in a few moments after the page loads? The code to do this is pretty simple:

<script type="text/javascript">
// <![CDATA[
jQuery( document ).ready(function() {
    jQuery('.cartButton').hide();
    setTimeout(function(){
        jQuery('.cartButton').fadeIn();
    }, 5 * 1000);
});
// ]]>
</script>

This snippet of JavaScript will make the Add to Cart button invisible when your customer first visits a product page. After 5 seconds, the Add to Cart button will fade in, drawing attention to itself. You can change the delay time by changing 5 to the number of seconds you’d like to wait before the button fades in.

To hide the Add to Cart button for an entire shopping cart theme, edit the theme and add the code snippet to the Custom Header under the HTML Areas tab.

To hide the Add to Cart button for an individual product, edit the product and add the code snippet to the Long Description. Click the Source tab for the Long Description before pasting in the code.

Leave a Reply