Remove the sub category text links in Zen Cart


A category in Zen Cart can have either products or sub-categories.  Where you have a category within a category, we refer to these as sub-categories.  Sub-categories are displayed at the top of a category page and include an image and a text link.  If you have custom images that include the sub-category name, the text link is redundant and you will probably want to remove it.  Here is an example of how the sub-category images and text links are displayed.

Zen Cart Subcategory Text Links

There are two methods for achieving the same thing – removing the sub-category text link -  either by modifying the relevant code in your template’s override folder (this removes the text and link completely) or by modifying your template’s stylesheet (this effectively just hides the text and link).  We’re going to have a look at both methods here.

Method 1 – Modify module code

  1. Open the category_row.php file located in the /includes/modules directory.
  2. Find this section of code:
    $list_box_contents[$row][$col] = array('params' => 'class="categoryListBoxContents"' . ' ' . 'style="width:' . $col_width . '%;"',
    'text' => '<a href="' . zen_href_link(FILENAME_DEFAULT, $cPath_new) . '">' . zen_image(DIR_WS_IMAGES . $categories->fields['categories_image'], $categories->fields['categories_name'], SUBCATEGORY_IMAGE_WIDTH, SUBCATEGORY_IMAGE_HEIGHT) . '<br />' . $categories->fields['categories_name'] . '</a>');
  3. and replace with this: 
    $list_box_contents[$row][$col] = array('params' => 'class="categoryListBoxContents"' . ' ' . 'style="width:' . $col_width . '%;"',
    'text' => '<a href="' . zen_href_link(FILENAME_DEFAULT, $cPath_new) . '">' . zen_image(DIR_WS_IMAGES . $categories->fields['categories_image'], $categories->fields['categories_name'], SUBCATEGORY_IMAGE_WIDTH, SUBCATEGORY_IMAGE_HEIGHT) . '<br /></a>');
  4. Save the modified category_row.php file to your override folder.  This will be /includes/modules/CUSTOM/ where CUSTOM represents the name of your current template folder.

Method 2 – Modify stylesheet

  1. Open the stylesheet.css file located in the /includes/templates/CUSTOM/css directory, where CUSTOM represents the name of your current template folder.
  2. Add the following to the bottom of the file:
    .categoryListBoxContents a {visibility:hidden;}
    .categoryListBoxContents a img{visibility:visible;}
  3. Save the modified stylesheet.css file.

And that’s it!  The page looks much cleaner and more professional now.

Remove text links from sub categories in Zen Cart

     
   
     

  1. #1 by Stephany on 14 June, 2011 - 4:17 am

    Hello Kerrin,
    I am not a programmer but I am trying to customize some pages on my website. I don’t want to have the subcategories (neither text nor images) when I select the category on the left menu. I just want to have the products listed inmediately I hit clic the category like most online stores (ex: forever21, charlotterusse.com, etc). I could not find any information related on the zencart web regarding this. Thanks a lot!!!! Stephany

  2. #2 by kerrin hardy on 14 June, 2011 - 7:24 am

    Hi Stephany! Let me have a think about the best way to do that. If we just remove the text/image links to the subcategories you’d be left with a blank page if a visitor clicks on a high-level category as, by default, Zen Cart does not allow products and sub-categories in the same category. I guess you could make the high level categories headings only and not links? Or, what would you want to display on the page for high level categories?

  3. #3 by Stephany on 14 June, 2011 - 1:57 pm

    Instead of the blank page that would be weird I would like to have listed all the items in the subcategory 1 when I clic on the category 1, same with the other categories. I don’t want to show the labels and images for subcategories. Can I link to a subcategory directly, just for display purposes. Customers are supposed to select a subcategory inmediately anyways…. thanks for your help!!

  4. #4 by Shannon on 18 April, 2014 - 11:09 am

    Hello — I tried to modify my stylesheet.css file exactly as you described, but instead of just hiding the subcategory name, it hid both the subcategory names AND the images. I copied & pasted the code exactly as you instructed. Why did it hide the images also? How do I revise the code to only hide the subcategory name/text link?

(will not be published)

Notify me of followup comments via e-mail. You can also subscribe without commenting.