If you’ve ever added product descriptions inside Elementor and then previewed your WooCommerce product page—only to find your nice, spaced-out formatting turned into one giant, unreadable blob—welcome to the club.

This isn’t just a minor inconvenience. It’s a formatting disaster that can make your product pages look sloppy and hard to read, especially when you’ve taken the time to organize your descriptions with line breaks or clean paragraphs.

Let’s break down what’s going wrong—and how to fix it with a few lines of CSS.

The Problem: Line Breaks Vanish in WooCommerce Product Descriptions

WooCommerce + Elementor has a nasty little quirk when it comes to the Product Content widget. You format your description using line breaks or hit Enter a few times in the WYSIWYG editor, but once it hits the front end, it’s all shoved together like a wall of text.

Even worse? If you try to add <br> tags manually in the HTML view, they sometimes disappear the moment you switch views or re-save the product. This exact issue was brought up in the WordPress.org forums a year ago:

“If I hit enter once in the wysiwyg view, then nothing is created in the HTML view… If I add <br> tags manually and then switch to WYSIWYG again, they’re gone.”

— alco24, frustrated store owner

Sound familiar?


What made it even more annoying was that the usual “WordPress know-it-alls” in the replies didn’t actually offer a fix. Instead, they went with the classic “must be your plugins” response. No real solution, no deeper insight—just the typical surface-level shrug you get in those threads when no one wants to admit Elementor (and WooCommerce) have some janky default behavior when it comes to content formatting.

The Fix: Add CSS to Force Proper Paragraph and Line Break Spacing

Here’s the simple CSS that fixes the spacing issue in Elementor’s WooCommerce Product Content widget:

/* Fix spacing in WooCommerce Product Content (Elementor widget) */
.elementor-widget-woocommerce-product-content p {
  margin-bottom: 1em;
}

/* Standard line break */
.elementor-widget-woocommerce-product-content br {
  display: block;
  margin-bottom: 0.5em;
}

/* Extra spacing when there are two consecutive line breaks (Enter twice) */
.elementor-widget-woocommerce-product-content br + br {
  margin-bottom: 1.5em;
}

What This CSS Actually Does

  • Ensures every <p> tag gets a 1em bottom margin — so your paragraphs don’t run into each other.
  • Forces <br> tags to behave like real line breaks, not ignored code.
  • Adds extra space after double <br> tags (like when you press Enter twice), so paragraphs can actually breathe.

Drop this CSS in your WordPress Customizer or Site Settings > Custom CSS panel in Elementor and watch your product pages instantly look 10x more polished.

Why This Matters

✅ Your descriptions are easier to read

✅ You don’t have to fight the WYSIWYG editor anymore

✅ You avoid messing with theme functions or plugin hacks

Product descriptions sell your stuff. If they look like a cluttered mess, you’re losing sales. This is a simple fix to a stupidly common problem—and it saves you from breaking things just to get some white space on the screen.

Want to fix the same spacing issue in Elementor’s Text Editor widget too? Here’s how.