How to Exclude Comments from Table of Contents Widget in Elementor

Elementor has a default widget called Table of Contents which you can use to add extra navigation feature on your website. With this widget, you don’t need to install an additional plugin only to add table of contents on your WordPress site. The Table of Contents widget itself can be used anywhere on your website, including blog posts. If you want to add table of contents on each blog post using the Table of Contents widget of Elementor, you can create a custom template for the single post using Elementor Theme Builder.

The way the Table of Content widget works is pretty similar to other ToC plugins whereby it generates the list items of ToC by HTML headings. If you use the widget on a custom single post template, chances are the comments section is included in the list. How to exclude it?

The Table of Contents widget allows you to exclude list items by CSS selector. Therefore, you need to figure out the CSS selector of the comments section on the theme you use. In most cases, you can find it on the comments.php file of your theme. To access this file, you can go to Appearance -> Theme Editor on your WordPress dashboard. Select comments.php on the right panel.

Once the file is selected, find the CSS selector on the editor box. In our case, the selector for the comments section is comments-area as shown on the screenshot below.

You can also find the CSS selectors of the comments area from the front-end (without login to dashboard). To do so, open a post on your website. Point out your cursor over a certain element on the comments area (e.g., comment title). Right-click and select Inspect.

The step above will open the developer tools feature window on your web browser. You can find the selector of the element you select on the left panel of the window. In this case above, the selector is “comments-title”.

Once you found the selector you need, the next step is to exclude it on your ToC. Go to the Elementor editor and edit the Table of Contents widget. On the Table of Content block under the Content tab, click the EXCLUDE tab and paste the CSS selector you have found above on the Anchors By Selector field. Add a dot as the prefix.

If you want to exclude other sections, you can simply add the CSS selector of the sections you want to exclude on the Anchors By Selector field. You can separate each CSS selector with a comma.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Picture of Editorial Staff

Editorial Staff

WordPress page builder tutorials, tips, and resources
Want to save yearly expense up to $219? why not?

2 thoughts on “How to Exclude Comments from Table of Contents Widget in Elementor”

Leave a Comment

Haven’t used Elementor Pro yet?