3
November 7, 2011

BigCommerce Customize Compare Products Page

We can’t tweak the snippet used to print out the info on the compare products page. My client wanted to get rid of the “Availability” and “Brand” rows on the compare page of his BigCommerce shop. Since BigComemrce doesn’t even give relevant IDs or class names to their elements, I wrote another snippet of javascript that searches the page for the rows, and hides them. This goes at the end of the HTMLHead panel.

To hide the Availability row:

<script type="text/javascript">
    $(document).ready(function() {
        $("td.CompareFieldName").each(function() {
            if( $(this).text() == 'Availability' ){
            $(this).parent().hide();
            }        
        });
    });
</script>

To remove the Brand row:

<script type="text/javascript">
    $(document).ready(function() {
        $("td.CompareFieldName a").each(function() {
            if( $(this).text() == 'Brand' ){
               $(this).parent().parent().hide();
            }        
        });
    });
</script>

If you need help with customizing any other part of BigCommerce, please reach out, I’m available for hire.

7
October 30, 2011

BigCommerce make “Add to Cart” & “Choose Options” text an image

BigCommerce doesn’t let us touch any of the PHP or HTML that spits out the Add to Cart or Choose Options links. In their support guide, they say to add a background image, but this still means that we need to keep the text, which often times just won’t do. I wrote a quick bit of javascript that goes and finds those Add to Cart and Choose Options instances, and replaces them with an actual image.

<script type="text/javascript">
    $(document).ready(function() {
    	$(".ProductActionAdd a").each(function() {
    		if( $(this).text() == 'Choose Options' ){
    			$(this).html('<img src="/templates/__custom/images/options.png" alt="Choose Options" />');
    		}
    		if( $(this).text() == 'Add To Cart' ){
    			$(this).html('<img src="/templates/_custom/images/add.png" alt="Add to Cart" />');
    		}
    	});
    });
</script>

Hope this helps! If you need further BigCommerce customization (especially with displaying categories the way you want) let me know.