How To Use The Dev Tools To Locate And Remove Something

Hi chaps

Quick lesson if anyone can spare a few minutes.

I want to know the correct way to locate something on a page and remove it - using the dev tools etc on Chrome.

So, step 1, I identify what I want rid of E.G The Customer Comments Box

Step 2, I select the element using ‘Inspect Element’ and decide that I want to remove everything under

You can leave us a comment here


So now I've located the element, and displayed all its code etc, how to identify what i need to delete to remove the element, and how do I delete.

Thanks guys


there is no universal way for this, but some general pieces of advice may help:

  1. if you need to remove the something in template, you should remember that all templates are in “design/themes/THEME/templates” directory so you should search there.
  2. the next thing is that you should use content search in TPL files (in subdirectories of directory from point #1), usually by unique CSS class or sometimes by language variables:

    2.1. In your example it is a good idea to search by [color=#282828][font=arial, verdana, tahoma, sans-serif]class=“customer_notes” [/font][/color][color=#282828][font=arial, verdana, tahoma, sans-serif]or customer_notes[/font][/color]

    [color=#282828][font=arial, verdana, tahoma, sans-serif]2.2 Go to admin panel in menu Administration → Languages, find text “[/font][/color][color=#282828][font=arial, verdana, tahoma, sans-serif]You can leave us a comment here” and get language variable ID to make content search in TPL files.[/font][/color]

    p.s. After changes in template are done, don't forget to clean up the template cache to see effect.

    best regards,

    WSA team

Thanks Damir, I'll take that advice on board!