How to remove main category image

Hello,

i've got question related to theme modificaitons. I use default-bootstrap template in PrestaShop 1.6. On category page you can find wide cover image. I wonder how i can remove that category image in prestashop? Any suggestions?

PrestaShop expert answer

Hello,

You can achieve it in two ways. First - with .tpl file modifications, second with css only. I will describe both of them here. below I attach the screenshot of category page. We will remove this dark rectangle with "Women" description and image.

1. modification of .tpl file

category.tpl open this file - it is located in your theme directory, path to this file looks like (for default bootstrap template): /themes/default-bootstrap/category.tpl. near line 28 you can find code like below, remove it and save changes. Your category image will disappear. If you dont see changes after file change - you have to clear shop cache

{if $scenes || $category->description || $category->id_image}
			<div class="content_scene_cat">
            	 {if $scenes}
                 	<div class="content_scene">
                        <!-- Scenes -->
                        {include file="$tpl_dir./scenes.tpl" scenes=$scenes}
                        {if $category->description}
                            <div class="cat_desc rte">
                            {if Tools::strlen($category->description) > 350}
                                <div id="category_description_short">{$description_short}</div>
                                <div id="category_description_full" class="unvisible">{$category->description}</div>
                                <a href="{$link->getCategoryLink($category->id_category, $category->link_rewrite)|escape:'html':'UTF-8'}" class="lnk_more">{l s='More'}</a>
                            {else}
                                <div>{$category->description}</div>
                            {/if}
                            </div>
                        {/if}
                    </div>
				{else}
                    <!-- Category image -->
                    <div class="content_scene_cat_bg"{if $category->id_image} style="background:url({$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}) right center no-repeat; background-size:cover; min-height:{$categorySize.height}px;"{/if}>
                        {if $category->description}
                            <div class="cat_desc">
                            <span class="category-name">
                                {strip}
                                    {$category->name|escape:'html':'UTF-8'}
                                    {if isset($categoryNameComplement)}
                                        {$categoryNameComplement|escape:'html':'UTF-8'}
                                    {/if}
                                {/strip}
                            </span>
                            {if Tools::strlen($category->description) > 350}
                                <div id="category_description_short" class="rte">{$description_short}</div>
                                <div id="category_description_full" class="unvisible rte">{$category->description}</div>
                                <a href="{$link->getCategoryLink($category->id_category, $category->link_rewrite)|escape:'html':'UTF-8'}" class="lnk_more">{l s='More'}</a>
                            {else}
                                <div class="rte">{$category->description}</div>
                            {/if}
                            </div>
                        {/if}
                     </div>
                  {/if}
            </div>
		{/if}

2. Hide category image with css styles

To hide mentoned category block (wide image + descriptions) with css styles, you have to alter global.css or category.css file. Both of these files you can find in your theme directory. At the end of the file paste code:

.content_scene_cat {display:none!important;}

After changes please save file and clear browser cache (your browser remembers old .css files so you will not see changes). After that category block will disappear.

Answer by Milosz Myszczuk PrestaShop expert, official PrestaShop community moderator. PHP developer, specialist in relative and spatial databases management, GIS Analyst, CEO & founder of VEKIA interactive agency. Read more about VEKIA company

If you like my articles and want much more valuable tips, feel free to send me donation