Hiding Product Descriptions in CMS Blocks: A CSS Solution for PrestaShop 8

Problem: Unwanted Product Descriptions in CMS Blocks

A PrestaShop 8 user, henryk55, sought to remove product descriptions from products displayed within CMS blocks. They were using the 'Products on CMS or anywhere v1.1.1' module by PrestaHero to display products within CMS pages, but found the default presentation, including product descriptions, visually unappealing. The user specifically wanted to retain only the product name, price, and 'add to cart' button.

The user provided an example URL (donice-duze.pl/c/35-artystyczne-donice) showcasing the issue – the product descriptions appearing under each product image within the CMS block.

Solution: CSS to the Rescue

ComGrafPL suggested a CSS-based solution to hide the product descriptions. The proposed CSS code targets 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;
}

The suggestion was to add this CSS code to the custom.css file of the theme and clear the PrestaShop cache.

Troubleshooting: CSS Not Working

henryk55 reported that the provided CSS code did not work as expected. They confirmed that the code was added to the end of the custom.css file located at /themes/NAZWA_MOJEGO_SZABLONU/assets/css/custom.css. This indicates a potential issue with CSS specificity, caching, or the correct file being modified.

Possible Causes and Further Steps:

• Cache Issues: Ensure that PrestaShop's cache is completely cleared after adding the CSS. This includes the theme cache and the browser cache.
• CSS Specificity: The provided CSS rule might be overridden by another rule with higher specificity. Use browser developer tools to inspect the element and identify any conflicting CSS rules. Try adding !important to the display: none; property as a temporary workaround (e.g., display: none !important;).
• File Location: Double-check that the custom.css file is the correct one being used by the active theme. Some themes might use different file structures or load CSS from different locations.
• Module CSS: The module itself might have CSS that overrides the theme's CSS. Inspect the module's files for any relevant CSS rules and modify them directly (though this is generally not recommended for maintainability).
• CSS Loading Order: The order in which CSS files are loaded can affect which rules take precedence. Ensure that custom.css is loaded after the module's CSS.

This thread highlights a common issue in PrestaShop customization: the need to override default styles using CSS. While a simple CSS snippet can often solve the problem, troubleshooting might be required due to caching, specificity, or file location issues.