Magento’s out of the box WYSIWYG editor annoying adds a line break after each time you press enter or return. I found this to be very frustrating when I was creating descriptions and even more annoying when I was copy and pasting descriptions. No other eCommerce platform or WYSIWYG system I’ve worked for did this odd extra spacing. In the end its quite an easy fix:

Open File: /app/design/frontend/default/-YOURTEMPLATE-/template/catalog/product/view/description.phtml

Locate this code:

1

<?php echo $this->helper(’catalog/output’)->productAttribute($this->getProduct(), nl2br($this->getProduct()->getDescription()), ‘description’) ?>

Replace it with this code:

1

<?php echo $this->helper(’catalog/output’)->productAttribute($this->getProduct(), $this->getProduct()->getDescription(), ‘description’) ?>

The code which causes this extra spacing is nl2br(). So if you need to adjust it in future versions or other fields just find the nl2br() call.

Here is one problem that was a simple Magento fix, but took me hours to understand. Of course many of my products require bullet points – it’s like a standard on eCommerce products. When I imported or even manually inserted them into my Magento website it would never display correctly. I searched the forums, google, and even asked a few people. There was no easy answer. I gave up and came back the next day. I luckily stumbled on this quick and simple fix in the Magento wiki:

Add this code to the bottom of your boxes.css: (/skin/frontend/default/-YOURTHEME)/css)

1
2
3
4
5
6

.product-specs ul li { list-style-type: disc; list-style-position: outside; margin-left: 20px; }
.short-description ul li { list-style-type: disc; list-style-position: outside; margin-left: 20px; }
.product-specs ol li { list-style-type: decimal; list-style-position: outside; margin-left: 20px; }
.short-description ol li { list-style-type: decimal; list-style-position: outside; margin-left: 20px; }<a href="http://www.robbiehodge.com/wp-content/uploads/2010/04/bullets.jpg"><img src="http://www.robbiehodge.com/wp-content/uploads/2010/04/bullets.jpg" alt="" title="bullets" width="127" height="71" class="alignright size-full wp-image-156" /></a>
.description ul li { list-style-type: disc; list-style-position: outside; margin-left: 20px;}
.description ol li { list-style-type: decimal; list-style-position: outside; margin-left: 20px;}

Now open up view.phtml (app/design/frontend/default/-YOURTHEME-/template/catalog/product/view.phtml)

Find this code:

1

<div class="short-description"><?php echo nl2br($_product->getShortDescription()) ?></div>

Replace with:

1

<div class="short-description"><?php echo $_product->getShortDescription() ?></div>

Do the same for description field and now you have bullets and ordered lists..

Hopefully one day this will be fixed/patched in. I really enjoy the wysiwyg editor, but sometimes it just causes more problems then its worth.