Ever wanted to hide something on your page without having to remove the code just in case you decided to use it later down the road? This article will show you how to hide things by using HTML Commenting. Comments are not displayed by the browser, but they can help document your HTML. Comment is a piece of code that is ignored by any web browser. It is a good practice to add comments into your HTML code, especially in complex documents, to indicate sections of a document, and any other notes to anyone looking at the code.

Applies to Version(s): 3.7.0 - 3.8.0 series

Note: You can do this on all carts, but only in 3.7.x carts to 3.8.0 series can you do this in the Cart Designer.

Comments are used in the Source Code to place a marker for the Start and Ending of where to place certain code lines or to hide pieces of code you don't want currently showing on your site. To learn more about HTML commenting.

When you're working with your code you will want to Copy/Paste into a Notepad software such as ones found on your computer, I prefer to use Notepad++. This is very functional and easy to use. 

How to comment out HTML in the Cart Designer

Note: When using commenting as mentioned above make sure you're copy/pasting your code into a Notepad of sorts before making changes.

The following is an example of what my Product Page looks like before commenting out, demonstrating what to click and what we want to hide:

product page

Now after we Right Click and Click on Source Code you will see a box like the following which will contain the Source Code for that area you're making changes to:

source code

I use CTRL+A to highlight all of this code and then CTRL+C to copy it all, after you have the code go over to your Notepad and use CTRL+V to paste it to your clipboard or pad. 

Now we have our code we just need to find what we are commenting out. In the example above I have Sale Price boxed in showing what I want, so in the code I'll search for this by using CTRL+F to bring up a search box and then search for "Sale Price". This will find a few different items but what I'm looking for is the following:

<div class="price"><span class="sale-price-label">{$msg.product.sale_price}:</span> <span id="product_price" class="sale-price-amount">{$product.price|price}</span></div>

This tells me that this is the label that is being pulled from the cart's code to show the Sale Price that is at the Product Level. Now I will want to add Comments to each end which will cause it to no longer show up. The comments look something like the following:

<!--This is a comment. Comments are not displayed in the browser-->

<!--<p>This is a paragraph.</p>-->

Now for our code I've added <!-- to the very beginning and --> to the very end


In this example above the highlighted Green areas show what is needed, "This is a comment" and "Comments are not displayed in the browser" aren't needed but act as a place holder showing and reminding you of the comment. 

I can now copy and paste my code back into the Source Code through Cart Designer

Once we add the code back and save you will now no longer see Sale Price:

sale price

The main thing is to find the right area you're trying to hide, also making a copy of the file you're changing through Cart Designer. This may take a few attempts and some playing around with the code to make sure you're commenting out the correct code. 

Links to Related Articles

None at this time.

If you didn't get your question answered, please contact the Pinnacle Cart Support Team. To submit a ticket, go to the My Account drop-down menu at the top right of the admin area and select Support.