PrestaShop Product Display Control: Hiding Descriptions in CMS Blocks for a Cleaner Look

Mastering Your PrestaShop Store's Visuals: A Guide to Customizing Product Displays in CMS Blocks

As e-commerce experts at Migrate My Shop, we understand that the visual presentation of your products is paramount to converting visitors into customers. A clean, focused, and aesthetically pleasing layout can significantly impact user experience and sales. While PrestaShop offers robust functionality, sometimes the default display of modules might not perfectly align with your brand's vision or specific page objectives.

A common scenario we encounter involves merchants wanting more granular control over how products appear when embedded within CMS (Content Management System) pages or custom blocks. This often means simplifying the display, focusing on key information, and removing elements that might clutter the design. Let's dive into a real-world example and explore the solutions.

The Challenge: Unwanted Product Descriptions in CMS Blocks

Recently, a PrestaShop 8 user, henryk55, faced a familiar dilemma. Utilizing the 'Products on CMS or anywhere v1.1.1' module by PrestaHero, they successfully integrated product listings into their CMS pages, such as a category showcasing artistic pots (donice-duze.pl/c/35-artystyczne-donice). However, the default output included product descriptions beneath each product image, which henryk55 found visually unappealing and distracting. Their goal was clear: retain only the product name, price, and the 'add to cart' button, creating a much cleaner, more focused presentation.

This desire for a streamlined look is common. For many landing pages, promotional sections, or curated collections, a concise display encourages quicker browsing and action, rather than overwhelming the user with too much text.

The Initial Solution: CSS to the Rescue

For visual adjustments like hiding elements, CSS (Cascading Style Sheets) is almost always the first and most straightforward approach. ComGrafPL, a fellow PrestaShop community member, wisely suggested a CSS-based solution. The proposed code targeted the specific class associated with the product description within the module's output:

.ph_pcms_block_product_list .product-miniature .product-description {
 position: relative;
 width: 100%;
 display: none;
}

Let's break down this CSS snippet:

• .ph_pcms_block_product_list: This is likely the main container class for the product list generated by the PrestaHero module.
• .product-miniature: A common PrestaShop class for individual product display blocks.
• .product-description: The specific class wrapping the product description text.
• display: none;: This is the magic property that completely hides the element from the page, making it occupy no space.

The recommendation was to add this code to the theme's custom.css file, typically found at /themes/YOUR_THEME_NAME/assets/css/custom.css, and then clear the PrestaShop cache.

When CSS Doesn't Work: Troubleshooting Common Pitfalls

Despite following the instructions, henryk55 reported that the CSS code didn't work. This is a common scenario in web development, and it points to a few potential issues that require systematic troubleshooting.

1. The Ever-Present Cache

PrestaShop, like many modern CMS platforms, heavily relies on caching to improve performance. If you make changes to CSS, Smarty templates, or module configurations, the old cached version might still be served. Always perform a thorough cache clear:

• PrestaShop Cache: Navigate to Advanced Parameters > Performance in your back office. Click 'Clear cache' at the top right. Ensure 'Template compilation' is set to 'Recompile templates if the files have been updated' or 'Force compilation for development' during testing.
• Browser Cache: Your browser also caches CSS files. Perform a hard refresh (Ctrl+F5 on Windows/Linux, Cmd+Shift+R on Mac) or clear your browser's cache entirely.
• Server Cache (if applicable): If you use server-level caching (e.g., Varnish, LiteSpeed Cache), ensure that is also purged.

2. CSS Specificity: The Silent Overrider

CSS rules follow a hierarchy of specificity. A more specific rule will override a less specific one, even if the less specific rule appears later in the stylesheet. If the module or theme has another CSS rule targeting .product-description with higher specificity (e.g., using an ID, more nested classes, or an !important flag), your rule might be ignored.

How to Diagnose Specificity Issues:

• Browser Developer Tools (F12): This is your best friend. Right-click on the product description (or where it should be) and select 'Inspect' (or 'Inspect Element').
• In the 'Elements' or 'Inspector' tab, locate the HTML element corresponding to the description.
• In the 'Styles' or 'Computed' tab, you'll see all the CSS rules applied to that element. Look for your display: none; rule. If it's there but crossed out, another rule is overriding it. The overriding rule will usually be listed above it.
• You can then adjust your CSS selector to be more specific (e.g., add an ID if available, or more parent classes) or, as a last resort, add !important to your rule (e.g., display: none !important;). Use !important sparingly, as it can make future CSS debugging harder.

For example, if the module's CSS was #module-ph_pcms .product-description { display: block; }, then your rule would need to be at least as specific, or use !important.

3. Incorrect Selector or File Path

Double-check that the CSS selector .ph_pcms_block_product_list .product-miniature .product-description precisely matches the HTML structure generated by the module. Sometimes, module versions or theme integrations can alter class names. Use the browser developer tools to confirm the exact classes and nesting.

Also, verify that your custom.css file is actually being loaded by your PrestaShop theme. You can check this in the developer tools under the 'Network' tab, filtering for CSS files, or by viewing the page source.

Advanced Solutions: When CSS Isn't Enough

If CSS troubleshooting proves fruitless, or if you need a more robust solution, consider these advanced methods:

1. Module Configuration

Always check the module's configuration settings in the PrestaShop back office. Many well-developed modules offer options to show/hide specific elements like descriptions, images, or prices. This is the cleanest solution if available.

2. Smarty Template Override

PrestaShop uses the Smarty templating engine. You can override a module's template file to directly remove the HTML code responsible for displaying the description. This is a powerful technique but requires more technical expertise:

• Locate the Module's Template: Find the module's original template file, usually located in modules/your_module_name/views/templates/front/ (or similar). Look for a .tpl file that renders the product miniature or list.
• Create an Override: Copy this .tpl file to your theme's override directory. The path would typically be themes/YOUR_THEME_NAME/modules/your_module_name/views/templates/front/your_template_file.tpl.
• Edit the Override: Open the copied .tpl file and carefully locate and remove or comment out the Smarty code responsible for displaying the product description (e.g., {$product.description_short} or similar).
• Clear Cache: Crucially, clear your PrestaShop cache (especially Smarty cache) after making template changes.

Important Note: Always work within a PrestaShop child theme when making template or CSS modifications. This ensures that your customizations are not lost when you update your main theme.

Conclusion: Take Control of Your PrestaShop Store's Design

Controlling the visual elements of your PrestaShop store is crucial for creating an engaging and effective e-commerce experience. Whether it's a simple CSS tweak or a more involved template override, understanding these techniques empowers you to tailor your store precisely to your needs.

At Migrate My Shop, we specialize in helping PrestaShop merchants optimize their stores, from performance and security to design and migrations. If you find yourself struggling with complex customizations or need expert assistance in refining your store's appearance, don't hesitate to reach out. Our team is ready to help you achieve a polished, high-converting online presence.