prestashop 1.7 subcategories images

[email protected] · December 29, 2016

Hello,

in prestashop 1.7, in the category page, how can I show the subcategories images under the category image? Now I only have the subcategory list in the left column.

Thanks

Ester

vekia · December 30, 2016

detailed step by step guide is here: subcategories on category page

go to /themes/classic/templates/catalog/listing/category.tpl

change its code to:

{**
 * 2007-2016 PrestaShop
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/osl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to [email protected] so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to http://www.prestashop.com for more information.
 *
 * @author    PrestaShop SA <[email protected]>
 * @copyright 2007-2016 PrestaShop SA
 * @license   http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0)
 * International Registered Trademark & Property of PrestaShop SA
 *}
{extends file='catalog/listing/product-list.tpl'}

{block name='product_list_header'}
    <div class="block-category card card-block hidden-sm-down">
      <h1 class="h1">{$category.name}</h1>
      {if $category.description}
        <div id="category-description" class="text-muted">{$category.description nofilter}</div>
        <div class="category-cover">
          <img src="{$category.image.large.url}" alt="{$category.image.legend}">
        </div>
      {/if}
    </div>
    <div class="text-xs-center hidden-md-up">
      <h1 class="h1">{$category.name}</h1>
    </div>
		{if isset($subcategories)}
        {if (isset($display_subcategories) && $display_subcategories eq 1) || !isset($display_subcategories) }
		<!-- Subcategories -->
		<div id="subcategories">
			<p class="subcategory-heading">{l s='Subcategories'}</p>
			<ul class="clearfix">
			{foreach from=$subcategories item=subcategory}
				<li>
                	<div class="subcategory-image">
						<a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}" title="{$subcategory.name|escape:'html':'UTF-8'}" class="img">
						{if $subcategory.id_image}
							<img class="replace-2x" src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'category_default')|escape:'html':'UTF-8'}" alt="{$subcategory.name|escape:'html':'UTF-8'}"  />
						{else}
							<img class="replace-2x" src="{$img_cat_dir}{$lang_iso}-default-category_default.jpg" alt="{$subcategory.name|escape:'html':'UTF-8'}"  />
						{/if}
					</a>
                   	</div>
					<h5><a class="subcategory-name" href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}">{$subcategory.name|truncate:25:'...'|escape:'html':'UTF-8'}</a></h5>
					{if $subcategory.description}
						<div class="cat_desc">{$subcategory.description}</div>
					{/if}
				</li>
			{/foreach}
			</ul>
		</div>
        {/if}
		{/if}
{/block}

and to /themes/classic/templates/assets/css/theme.css file and at the end paste these styles:


/* ************************************************************************************************
									Sub Categories Styles
************************************************************************************************ */
#subcategories {
  border-top: 1px solid #d6d4d4;
  padding: 15px 0 0px 0; }
  #subcategories p.subcategory-heading {
    font-weight: bold;
    color: #333;
    margin: 0 0 15px 0; }
  #subcategories ul {
    margin: 0 0 0 -20px; }
    #subcategories ul li {
      float: left;
      width: 145px;
      margin: 0 0 13px 33px;
      text-align: center;
      height: 202px; }
      #subcategories ul li .subcategory-image {
        padding: 0 0 8px 0; }
        #subcategories ul li .subcategory-image a {
          display: block;
          padding: 9px;
          border: 1px solid #d6d4d4; }
          #subcategories ul li .subcategory-image a img {
            max-width: 100%;
            vertical-align: top; }
      #subcategories ul li .subcategory-name {
        font: 600 18px/22px "Open Sans", sans-serif;
        color: #555454;
        text-transform: uppercase; }
        #subcategories ul li .subcategory-name:hover {
          color: #515151; }
      #subcategories ul li .cat_desc {
        display: none; }
      #subcategories ul li:hover .subcategory-image a {
        border: 5px solid #333;
        padding: 5px; }

effect:

[email protected] · January 1, 2017

Hi Vekia,

thanks so much, that worked perfectly.

Ester

Vilius PromoApranga · January 2, 2017

Had to remove names, because of length

Update?

vekia · January 2, 2017

Had to remove names, because of length

Update?

can you share url please? i will change css to support names properly :-)

if you want to remove name just remove this:

<h5><a class="subcategory-name" href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}">{$subcategory.name|truncate:25:'...'|escape:'html':'UTF-8'}</a></h5>

Vilius PromoApranga · January 3, 2017

http://promoapranga.lt/lt/ will do in a few minutes

mgintas · January 6, 2017

I copied and pasted suggested script but for some reason is not showing correctly

vekia · January 8, 2017

I copied and pasted suggested script but for some reason is not showing correctly

if you copied css styles as it is described in the guide, please clear browser cache - there is a chance that your browser remember old .css file you modified (so dont see the changes you applied)

mgintas · January 8, 2017

yes, thank you! stupid me..

vekia · January 9, 2017

hey no worries, its a common problem

many of us forget to clean browser cache and pulling hair out then ;-)

waynetruck · April 12, 2017

I am having an issue with the product description on this https://www.petratruck.com/12-steel-dump-bodies

waynetruck · April 13, 2017

I changed the settings back due to the issues I was having

I have subcategories with rather long descriptions and they were showing the source code

waynetruck · April 13, 2017

here is a link to a screenshot of the issue I am having

https://drive.google.com/file/d/0B1Gsd5jeRQipa3BVTnYwMXl6dGs/view?usp=sharing

vekia · April 13, 2017

I changed the settings back due to the issues I was having

I have subcategories with rather long descriptions and they were showing the source code

exactly as i replied in my previous messages - clear browser cache

your browser remember old css file so in effect you see it without proper layout.

waynetruck · April 14, 2017

Thank you. The cache issue was not in the browser but in prestashop. I was able to clear it and now it is displaying correctly.

waynetruck · April 14, 2017

Now I am having trouble with the products crowding the categories text http://www.petratruck.com/12-steel-dump-bodies

is there a way to increase the spacing?

vekia · April 14, 2017

im not sure about the issue

i checked the page and i dont see there anything strange

Vicente Paul · May 9, 2017

Thanks Vekia, I loved it!

Rob45 · May 26, 2017

Hello there,

I saw this post while looking for a solution to my problem => display the parent category image when a sub category doesnt have its own image.

Can someone help me ?

Thanks in advance.

Nevermind, i found a way ^^

{url entity='categoryImage' id=$category.id_parent name='$category.name'}

Edited May 26, 2017 by Rob45 (see edit history)

Testapresta · October 20, 2017

Hi,

It is responsive? Should I see subcategires on page even on a smartphone?

salomonsson · January 11, 2018

On 2017/4/14 at 3:36 PM, vekia said:

im not sure about the issue

i checked the page and i dont see there anything strange

Hi Vekia!

When these codes are used to Prestashop version 1.7.2.4, all the buttons are changed to square blocks and the shopping cart looks very strange. Can you please take a look and tell me the solution? I attach here screenshot from my web shop giftify.se. / thanks

sallen_acs · July 27, 2018

Hi there!

With this code i having the same issue like last post, because the img url of the categories points to a wrong directory...

The cod its:

src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'category_default')|escape:'html':'UTF-8'}"

but, for me shows:

src="http://www.URL.com/c/es-default-category_default/quimicos.jpg"

There is not a "c" directory on the root, and the thumbnails on the administrator, in the categories, show the img in a temp directory:

http://www.avencarlink.com/img/tmp/category_10-thumb.jpg?time=1532695241

Any ideas about what could happen?

Working with 1.7.3.3

Thanks!

Edited July 27, 2018 by sallen_acs (see edit history)

harrisatria · September 25, 2018

hallo vekia, i have some isue, but your solution only for prestashop 1.7
can you give me solution for prestashop 1.6.1 ??

thanks before

Edited September 25, 2018 by harrisatria (see edit history)

chanart · October 29, 2018

@vekia - thanks a lot for this solution. A couple of issues I've encountered -

first, the category image in your code takes the category cover image, which might have different size than the thumb image that supposed to be shown under the parent category. I changed the category_default into small_default and it seems to work as expected.

The other issue I encounter is that the <div class="cat_desc">{$subcategory.description}</div> pulls into it automatically <p> tags (which are actually rendered in the description). Any way to prevent this?

ikedubaku · November 17, 2018

Hi vekia!

Thanks your code!

Even if a category has no subcat the Subcategories text is there, what can be the problemo?

yarekyarek · December 16, 2018

Hi,

in mobile version of my shop it doesnt show names properly. Can you help me?

Also I want to show 2 rows with product in mobile version, it is possible?

Link: shop.streetbtch.eu

Thanks

xarly89 · December 27, 2018

@sallen_acs did you manage to solve the problem with the images??? I'm getting the exact same error and I get no images displayed. With the same kind of URLs generated as you got.

Thanks in advance

xarly89 · December 27, 2018

@sallen_acs just in case you still didn't get it right, I found the correct naming for images on Prestashop 1.7.2 (possibly it works on 1.7.3 and higher):

<img class="replace-2x" src="{$urls.base_url}img/c/{$subcategory.id_category}-small_default.jpg" alt="{$subcategory.name|escape:'html':'UTF-8'}"  />

sallen_acs · December 27, 2018

4 hours ago, xarly89 said:
@sallen_acs just in case you still didn't get it right, I found the correct naming for images on Prestashop 1.7.2 (possibly it works on 1.7.3 and higher):
<img class="replace-2x" src="{$urls.base_url}img/c/{$subcategory.id_category}-small_default.jpg" alt="{$subcategory.name|escape:'html':'UTF-8'}"  />

@xarly89 thanks for your answer mate! i solve it time ago, but really i dont remeber how or in what proyect.

In case that your solution will not work, tellme and i try to find it.

Regards

yarekyarek · December 28, 2018

On 1/3/2017 at 12:13 AM, vekia said:
can you share url please? i will change css to support names properly 🙂

if you want to remove name just remove this:
<h5><a class="subcategory-name" href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}">{$subcategory.name|truncate:25:'...'|escape:'html':'UTF-8'}</a></h5>

How to change css to support names properly? thanks

SOLVED

Edited January 6, 2019 by yarekyarek
SOLVED (see edit history)

ikedubaku · May 16, 2019

I digged the solution out for my question:

use this:

{if $subcategories|count}
            <p class="subcategory-heading">{l s='Subcategories'}</p>
          {/if}

TVBZ · July 7, 2020

Any way to use this code to display categories on home page? Only first level categories?

TVBZ · July 7, 2020

5 hours ago, ndiaga said:

You want a code or a module?

I prefer to implement the code directly into my (child)theme.
It helps me get a better understanding on how PS works.

Thanks

Edited July 7, 2020 by TVBZ (see edit history)

scuba · August 22, 2020

On ‎4‎/‎14‎/‎2017 at 3:36 PM, vekia said:

im not sure about the issue

i checked the page and i dont see there anything strange

On ‎12‎/‎30‎/‎2016 at 4:32 AM, vekia said:

detailed step by step guide is here: subcategories on category page

go to /themes/classic/templates/catalog/listing/category.tpl

change its code to:


{**
 * 2007-2016 PrestaShop
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/osl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@prestashop.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to http://www.prestashop.com for more information.
 *
 * @author    PrestaShop SA <contact@prestashop.com>
 * @copyright 2007-2016 PrestaShop SA
 * @license   http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0)
 * International Registered Trademark & Property of PrestaShop SA
 *}
{extends file='catalog/listing/product-list.tpl'}

{block name='product_list_header'}
    <div class="block-category card card-block hidden-sm-down">
      <h1 class="h1">{$category.name}</h1>
      {if $category.description}
        <div id="category-description" class="text-muted">{$category.description nofilter}</div>
        <div class="category-cover">
          <img src="{$category.image.large.url}" alt="{$category.image.legend}">
        </div>
      {/if}
    </div>
    <div class="text-xs-center hidden-md-up">
      <h1 class="h1">{$category.name}</h1>
    </div>
		{if isset($subcategories)}
        {if (isset($display_subcategories) && $display_subcategories eq 1) || !isset($display_subcategories) }
		<!-- Subcategories -->
		<div id="subcategories">
			<p class="subcategory-heading">{l s='Subcategories'}</p>
			<ul class="clearfix">
			{foreach from=$subcategories item=subcategory}
				<li>
                	<div class="subcategory-image">
						<a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}" title="{$subcategory.name|escape:'html':'UTF-8'}" class="img">
						{if $subcategory.id_image}
							<img class="replace-2x" src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'category_default')|escape:'html':'UTF-8'}" alt="{$subcategory.name|escape:'html':'UTF-8'}"  />
						{else}
							<img class="replace-2x" src="{$img_cat_dir}{$lang_iso}-default-category_default.jpg" alt="{$subcategory.name|escape:'html':'UTF-8'}"  />
						{/if}
					</a>
                   	</div>
					<h5><a class="subcategory-name" href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}">{$subcategory.name|truncate:25:'...'|escape:'html':'UTF-8'}</a></h5>
					{if $subcategory.description}
						<div class="cat_desc">{$subcategory.description}</div>
					{/if}
				</li>
			{/foreach}
			</ul>
		</div>
        {/if}
		{/if}
{/block}

and to /themes/classic/templates/assets/css/theme.css file and at the end paste these styles:



/* ************************************************************************************************
									Sub Categories Styles
************************************************************************************************ */
#subcategories {
  border-top: 1px solid #d6d4d4;
  padding: 15px 0 0px 0; }
  #subcategories p.subcategory-heading {
    font-weight: bold;
    color: #333;
    margin: 0 0 15px 0; }
  #subcategories ul {
    margin: 0 0 0 -20px; }
    #subcategories ul li {
      float: left;
      width: 145px;
      margin: 0 0 13px 33px;
      text-align: center;
      height: 202px; }
      #subcategories ul li .subcategory-image {
        padding: 0 0 8px 0; }
        #subcategories ul li .subcategory-image a {
          display: block;
          padding: 9px;
          border: 1px solid #d6d4d4; }
          #subcategories ul li .subcategory-image a img {
            max-width: 100%;
            vertical-align: top; }
      #subcategories ul li .subcategory-name {
        font: 600 18px/22px "Open Sans", sans-serif;
        color: #555454;
        text-transform: uppercase; }
        #subcategories ul li .subcategory-name:hover {
          color: #515151; }
      #subcategories ul li .cat_desc {
        display: none; }
      #subcategories ul li:hover .subcategory-image a {
        border: 5px solid #333;
        padding: 5px; }

effect:

Thx a lot for this solution, but my category pictures are not showing i have the pictures in the img/c and i have all the images but they are not showing, please can you help me with my problem, thx a lot.

Hotparts.ee · May 26, 2021

Anybody maiby can help to code the css file.

Everything is working perfectly, but the KERE image is on the upper category name.

Have to be space there.

Clients doesnt see the subcategory name, only picture :)

Maiby somebody can help me with that.

aliasali · October 8, 2021

Hi Vekia,

Wil this also work for prestashop 1.7.7.8?

We could not find this file: /themes/classic/templates/assets/css/theme.css

Warm regards,

Aliasali

Giovanni.TS · October 9, 2021

Hi Milos, are you going to give me my money back since for second time you got my money and you didnt give me the service accorded?!?!?! No answer to all my mail! Embarassing your attitude!

twoha1 · August 3, 2022

Hello, thank you for this good solution.

Is it possible to have larger images and category names ?

Doing this I have only small images and need to reduce font-size to show complete names.

For me would be great to have only 4 categories in a row...

AOnline · October 10, 2022

Hello everybody.

In place of the image of the category I want to add the thumbnail of the category or sub-category, what can I do?

I guess you need to change src = "{$ img_cat_dir} to something like src =" {$ img_thumb_cat_dir} or am I wrong?

Thanks

babolops · March 19, 2023

Hello everyone, I have a problem I hope someone can help me, in my theme, not classic, prestashop 1.7.8 I have the cover image that is long, but if I put it with the right size the sub category image remains rectangular, instead if I put it square for the sub category in the category section it remains the image centered and empty on the sides, I share screeshots to make it clear

thx who will can help me

prestashop 1.7 subcategories images

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment