Removing Automatic Line Breaks <br> From Magento’s Product Descriptions
By default, Magento’s WYSIWYG editor (Tiny MCE) will insert an automatic line break after every time you enter onto a new line – even though you will be unable to view the <br> or <br /> tags in the HTML.
This is caused by a PHP function nl2br, which inserts an HTML line break before all newlines in a string.
|
1 |
string nl2br ( string $string [, bool $is_xhtml = true ] ) |
This causes spacing between lines of text copy on the page to appear excessive and look untidy such as the below:-
The nl2br function is used for the short description and the long description in Magento, you can resolve the automatic line breaks by removing the function like below:-
Short Description
Locate the view.phtml file (/app/design/frontend/[package]/[theme]/template/catalog/product/view.phtml) and search for:-
|
1 |
<div><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?></div> |
Change this to:-
|
1 |
<div><?php echo $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description') ?></div> |
Description
Locate the description.phtml file (/app/design/frontend/[package]/[theme]/template/catalog/product/view/description.phtml) and search for:-
|
1 |
<?php echo $this->helper('catalog/output')->productAttribute($this->getProduct(), nl2br($_description), 'description') ?> |
Change this to:-
|
1 |
<?php echo $this->helper('catalog/output')->productAttribute($this->getProduct(), $_description, 'description') ?> |
If you have trouble locating any files in your Magento installation, try navigating to /app/design/frontent/default/base/template… and copying any files over to [package]/[theme]/template… ensuring that you’re replicating the same directory paths.
You may also be using 3rd party extensions that will be over-riding the default template handling that Magento uses, for example EasyTabs creates its own directory at /app/design/frontend/[package]/[theme]/template and includes files that will over-ride description.phtml with its own description.phtml and view.phtml with catalogproductview.phtml.
Always backup any files before making changes and flush Magento cache after saving/uploading changes.
Update 04/12/2014
If you’re using Magento 1.8.X upwards, then the code for the description above won’t work and you’ll need to use the below instead:-
|
1 |
<?php echo $this->helper('catalog/output')->productAttribute($_product, $_product->getDescription(), ‘description’) ?> |
Thanks to Coen in the comments for spotting this.
Hi,
Thank you for your post on the extra line breaks that Magento was putting into the product descriptions.
It had been driving me slowly mad – and I couldn’t figure out where it was coming from.
Thanks again!
Richard
You’re welcome Richard.
Thanks for explaining and now it works!
The only different we had to make was in the code of the description and we placed the code lik:
productAttribute($_product, $_product->getDescription(), ‘description’) ?>
With the one you placed in your article the description did not show.
Thanks for commenting Coen, it is possible that different versions of Magento or custom theme’s may require some slight alteration in order for this to work.
Funnily enough, I’ve just happened to have to work on this on a Magento 1.9 store.
You’re right, my original code does not work in Magento 1.8 upwards but yours does.
Good work!
Btw. we did have one more thing implementing this. The styling of our old products is going wrong now because he does not load the extra space between p classes and most products are implemented that way.
We are now looking how to make it work both ways.
Probably only a small tweak required to the CSS to make the paragraph blocks have a margin-bottom? For what it’s worth, in the latest versions of Magento, I don’t think this is an issue any longer.
Cheers Geoff. Did the trick for me on a clients site! Was a slightly different piece of code in Mage 1.9 but it was clear to just remove “nl2br”
No problem Wayne, glad that you got it sorted.
IT WORKS! Thank you very much.
You’re welcome cosmin, glad it helped.
Thanks so much! 🙂 My next task is to try and remove the need to enter html tags in Description / Short description attribute fields. In Short Description I need every new line to appear as a new <li></li> in a <ul></ul> list. For Description I need to do exactly the same, but I also want to include a lump of text at the start that shouldn’t be affected (maybe wait two line breaks before starting the <ul>). Any idea where I might find info on how to do this?
Thanks again for this post, was extremely helpful 🙂
Kind Regards,
Gideon
Hey Gideon, glad the post helped and thanks for taking the time to leave a comment.
Is there any reason why you could not just enable the WYSIWYG editor and then click the bullet list to add your lists in the description fields (eradicating the need to manually add the HTML tags for each)?
By modifying this in the theme template files, you could only wrap the entire WYSIWYG contents in specific markup which wouldn’t achieve the desired effect you’re after (every new line in the editor as an <li></li> within a <ul></ul>). The only way to achieve that would be to modify this after it is saved with JavaScript but it can become a bit messy.
There’s loads of ways to insert a paragraph of text before your list though which won’t get changed. You could either insert it directly into the template file (theme/template/catalog/product/view/description.phtml) after <div class=”std”> so that it appears at the start of every product description although this means that you’d have to manually edit a template file to make any changes to it (shouldn’t really be done like this) or you could just add this text to a static block and then call the static block in from the same location in the template file or in the editor for each description. You could add it as a custom attribute and call it in before the product descriptions amongst other methods as well.
Hope that helps.
Thank you very much, very easy to understand and implement. Keep up the good work!
Glad you found this useful Michael – thanks.