Moving / Removing Callouts on the left / right columns

Posted on 03. Sep, 2008 by Fido in Design, Magento

I recently answered a question on the magento forums about how to remove the callout images in the right / left columns.

This is a pretty easy task, but finding them required a small bit of digging (as usual).

My first recommendation when trying to find any thing in the front end is to turn on Template Path hints in the admin section

  1. Admin > System > Configuration
  2. Switch your “Current Configuration Scope” to your store (’Main Website’ on a stock build)
  3. Click on the Developer Tab (bottom left) and find the Debug area
  4. Template Path Hints: Yes (also might want to add Block Names to hints)

You will find that the template files (phtml files) which include the html for the callouts are located at:
app/design/frontend/*/*/template/callouts/right_col.phtml
app/design/frontend/*/*/template/callouts/left_col.phtml

You will also find that the block is being added onto your Magento install via catalog.xml
app/design/frontend/*/*/layout/catalog.xml

For the right column:

<reference name="right">
<block type="core/template" before="cart_sidebar" name="catalog.compare.sidebar" template="catalog/product/compare/sidebar.phtml"/>
<block type="core/template" name="right.permanent.callout" template="callouts/right_col.phtml"/>
</reference>

to

<reference name="right">
<block type="core/template" before="cart_sidebar" name="catalog.compare.sidebar" template="catalog/product/compare/sidebar.phtml"/>
<!--<block type="core/template" name="right.permanent.callout" template="callouts/right_col.phtml"/>--> <!-- or delete this line altogether -->
</reference>

You can do the same for the left callouts (the dog with the laptop)

Tags: , , ,

50 Comments

Ben

04. Sep, 2008

I’m just getting started – so these hints, tip and tricks are great – keep up the good work !
Ben

justin

08. Sep, 2008

got lost at “Click on the Developer Tab (bottom left)”
I did this but only see options for

developer client restrictions
debug
translate inline
log settings

and i suppose to edit the phtml files physically?

Fido

08. Sep, 2008

You need to do step 2: “Switch your “Current Configuration Scope” to your store”
This is an option on the top left.
Changing it to ‘Main Website’ will add the Template Path hints in the Debug area (where the template path hints resides)

You can edit the PHTML files directly, but I suggest moving them (and their file structure) to your own theme so you have a stock template to fall back on.

Say you want to edit:
app/design/frontend/default/default/Catalog/Product/New.phtml

Copy New.phtml, and move it here to edit:
app/design/frontend/default/mytheme/Catalog/Product/New.phtml

You’ll need to activate “mytheme” in the admin area in order to see your changes.

ohmmega

15. Dec, 2008

Hello fido,

I tested your tuto to remove both left and right pictures from category page but even if i commented phtml code, there are always displayed …
I correctly put Template Path Hints to Yes in configuration of Main web site. I cleared my cache. I directly edited phtml code.
What should i do ? i miss a step ?

ohmmega

15. Dec, 2008

I resolved my problem

Fido

15. Dec, 2008

Hi ohmmega – How exactly did you resolve your problem? It may help future visitors!

ohmmega

18. Dec, 2008

I just forgot to clear all my cache in the admin backend:
System -> cache management -> on the form “cache control” -> field “All Cache” i just selected “desactivate” and then saved it. After that i rechecked all the check list and just saved the page again.

crakmonkey

29. Dec, 2008

hi fido. your tips are really helpful.
after removing the right call out box, i inserted the code to remove the left call out box, but for some reason i keep getting an error message.
since the right and left call out codes were different im confused as to where to insert the “” code. ive been at this for hours its driving me nuts.

Ashley Bailey

08. Jan, 2009

Thank you very much for these hints!

Ashley Bailey

08. Jan, 2009

Thank you very much for your tips!

How do you change the link that the callout is going to? By default the left callout is going to the checkout screen instead of customer service, which I think is odd. I’d like to change it but don’t know how to. Thank you very much for your time.

~Ashley Bailey

Ashley Bailey

08. Jan, 2009

Never mind….I made the appropriate change from your instructions, I just wasn’t seeing it because I needed to clear my cache. :)

Prashant

20. Jan, 2009

Hi,

I want to edit the “Recently Viewed Product” section which is displayed in the right side bar, after viewing some of the products. I want to do some modification in this section, but I don’t know where the files related to this section are located in magento.
Please tell me where the files related to “Recently Viewed Products” are located.

Thanks,
Prashant

Tash

16. Feb, 2009

Hi Prashant

You will have to switch on template hints as Fido has already explained, in order to see the path. :)

Tash

Guy

10. Mar, 2009

How did you know that

You will also find that the block is being added onto your Magento install via catalog.xml
app/design/frontend/*/*/layout/catalog.xml

I sure i missed something basic

Thanks,

Guy

Fido

13. Mar, 2009

Catalog.xml is a very highly used layout (2nd probably only to page.xml). We just happen to dig through it all the time.

A better answer is this: We see the callouts when we are viewing the catalog (the categories, product lists, products, etc) and so its logical to look in the catalog.xml to see if there are references to the callouts there.

Frank D.

20. Mar, 2009

Perfect! Many thanks.

shahriat

26. Mar, 2009

Could u tell me why callouts is named here?

Swan TBS

28. May, 2009

Hi

Great help…….

Joe

30. May, 2009

Hello

Thanks for this website! And to Magento too!

Joe

Jeremy

13. Jun, 2009

Hello Fido, I went into the files just to remove the alt text. I then download the two images and changes to them and uploaded them back. I then cleared my cache in the cache management, next to “All Cache” I put “Refresh” I then saved but it still shows up with the old images, can you please help?

Chloee

09. Jul, 2009

Hi Fido,

Thanks for the tips! I’m glad someone’s out there to figure this stuff out for us.

I’m using a customized Magento template, and I really like the ‘leave a reply’ comment script you’re using on this website, how do I find this script and will it be hard to implement into my website?

ashvindx

14. Jul, 2009

It’s named in order to allow positioning that block above or another block, via the ‘before’ and ‘after’ attributes.

Anyone knows how to add callouts that can be managed from the admin?

Bernal Aguilar

17. Jul, 2009

After I fixed the callout I turned off the path hints but navigation/top and footer paths are still there. How can I remove all of the hints?

Fido

17. Jul, 2009

I would try clearing your cache in the admin area. They should definitely not be showing up anymore. If that doesn’t work, you can manually delete the cache files.

Micah

30. Jul, 2009

awesome explanations

Name

03. Aug, 2009

its good but i am looking for pagination in magento can u help me

LIz Lee

07. Aug, 2009

Hey Fido,
Interesting, I’m trying to put the cart_sidebar block underneath the right.permanent.callout block, but this is not working.
Doing the commenting out thing did work, so I know I’m on the right page, and I cleared my cache, so that shouldn’t be the issue.
Here’s my code… any ideas?

Liz Lee

07. Aug, 2009

Nm, I figured it out. I had an extra “before=” in there. Oops.

Dman

01. Sep, 2009

Hi Fido, I’m working on the left column banner. All I need to do is update the link and alt text for the banner. I had already found the files you outlined in your post, but thanks for verifying that I’m correct!

Here’s my question/concern. I’ve updated the existing alt text and banner URL/link in my app/design/frontend/*/*/layout/catalog.xml document. But, once this is modified, and then posted back to the server, there is still no change in the behavior of the banner. (Same ‘old’ alt tag, and bad ‘original’ link). I’ve cleared my browser cache, etc. but not luck.

Is there something I’m missing?!?

Thanks in advance!!!

Dan

26. Sep, 2009

Brilliant, thanks for sharing these little gems, really helpful!

PLR MART

05. Oct, 2009

Hi Fido,

Thanks for your help. I made changes to my site and now the left sidebar images gone. But i am able to see lot of white space bellow the footer(in firefox). Can you please help me why this is happening please.

site: http://www.theplrmart.com

Thanks in advance.

Regards
Venkat

Ryan

16. Jan, 2010

HI,

can i set a callouts right side in 3 column pages but not in 2 columns with right bar .

i set callouts in right side but display in both page in right side, i want keep it in 3 columns and remove in 2 columns with right bars.

any help?

Thanks

Gisely

05. Feb, 2010

Thank you very much! @Fido and @ohmmega

Robert

06. Feb, 2010

Does upgrading Magento remove any changes you have made to the catalog.xml file?

Fido

06. Feb, 2010

If you are editing the core template, than upgrading will most likely ( not 100% sure) overwrite your changes. It’s best to make new templates which override the core template.

Guillaume BRETOU

19. Mar, 2010

Hi,

You can also use the remove tag in the XML.
For example, if you want to remove the callout block from the left, just add to your custom xml file :

ching

18. Apr, 2010

how to get rid of the block hints on the top of the page:
http://www.metrosourceline.com

I have tried, but the blocks left up there.
1. Admin > System > Configuration
2. Switch your “Current Configuration Scope” to your store (’Main Website’ on a stock build)
3. Click on the Developer Tab (bottom left) and find the Debug area
4. Template Path Hints: NO (also NO to add Block Names to hints)

Thank you,
Ching

ching

18. Apr, 2010

Aha… the problem was solved! the block hints on the top were gone “automatically”… not sure why… maybe cache.
happy now :)
Ching

Name

24. Apr, 2010

I’m using the “modern” theme and there is no

app/design/frontend/*/*/template/callouts/left_col.phtml file.
There isn’t even the callouts folder.
I’ve tried to edit the catalog.xml file with no luck either.

Does anybody know which file I need to edit in order to get rid
of the callouts on the left side?

Hahnefeld

28. Apr, 2010

I want to use col_left_callout.jpg, but in change with another one. Is there an extension for randomizing?

aparna

02. Jul, 2010

@Fido, I need to move the compare products to show up in the footer, changing the reference name to footer in catalog.xml and report.xml is not helping..

SJ

23. Jul, 2010

Worked exactly as described, thanks for the share :)

Welanie

31. Aug, 2010

HI,

Im new to magento. Please help me.

I did what you said, I see the red markers on the front-end. But how do I edit…Isnt there an editor on magento that I can use to edit files. Also, when I turn it back OFF, the red markers are still there.

Thank you

Welanie

31. Aug, 2010

Alright, I found how to get rid of the hints by deleting the cache. Still need help to find how I can edit the file.

I tried finding the file and transfer it to my editor but I cant even find the damm files on my ftp event thow my debugger tells me it existes.

Men…cant wait to be comfortable with this software…

Thanks for helping me if you can.

ronaldo

09. Sep, 2010

thank you very much!!!!

Peter

11. Sep, 2010

You can also remove this using a local.xml file so you can upgrade Magento base files without a problem:

Enrique

07. Nov, 2010

I don´t understand nothing. Why you want to see the names of the blocks if if the file right_col.phtml doesn contain the boick itself?

I need to remove or edit the original back to school graphoc and replace it with one that really work on my web site and I can´t find anything to help me to solve it.

I hope some day somebody creates a step by step tutorial on how to change this things.

Marco

04. Dec, 2010

Hi Fido,

Thanks for a great tutorial! I got almost everything working. I only got one problem that I can’t seem to correct.
I made a table (3 rows 1 col.) In each row I specified one of the payement methods we accept by using the code snippets I got from the providers websites.
They all show up… But 2 of them get streched to the width and height of the biggest image.
If I edit the file in Dreamweaver, or use the included editor, the preview shows the images with their right dimensions. With whitespace in the tables. What am I missing?

Marco

04. Dec, 2010

P.S. The file I use and edit in the post above is the right_col.phtml

Mark

21. Dec, 2010

Hi there,

I know this is an old post, but still relevant just now for me :P

Can you tell me how to move Shop By/Shopping Options/Navigation section to the top of the left column, before the likes of the tags callout and newsletter callout?

I noticed that it automatically does this when the categories are not anchor categories, but if they are, it shifts the shopping options down the left column…

Any help would be greatly appreciated!

Thanks

Leave a reply