|
↳ See all 15 articles
/ Documentation /Troubleshooting/ Fix Hidden Title on WooCommerce and Other Pages When an Elementor Template Is Used

Fix Hidden Title on WooCommerce and Other Pages When an Elementor Template Is Used

A missing product title on WooCommerce single product pages, or missing titles on other pages, is usually caused by the Hide Title option being turned on in an Elementor template that loads across the site, such as a header or footer template, sometimes the Default Kit too. Turning that option off in the template brings the titles back without changing pages that hide their own title.

Why the Title Gets Hidden

The title is hidden by a CSS rule that comes from an Elementor template’s Hide Title setting, not from Astra or WooCommerce.

Symptom: The product title is missing on single product pages, and sometimes on other pages or posts too. When you inspect the page with your browser’s developer tools, the title is still in the page code (for example, <h1 class=”product_title entry-title”>), but it is hidden by display: var(–page-title-display) with –page-title-display: none.

image

Cause: When Hide Title is turned on in an Elementor page or template, Elementor sets –page-title-display: none in that template’s CSS. This hides any title that matches Elementor’s page title selector, which is h1.entry-title by default.

  • A header or footer template loads on every page of the site, so its CSS loads everywhere too.
  • WooCommerce product titles use the entry-title class, so they match the selector and get hidden.
  • Titles on regular pages and posts that use the same class are hidden in the same way.

The template causing this does not have to be a Single Product template. A footer template with Hide Title turned on is enough to hide product titles across the store, even when no Single Product template exists.

This can also happen when Hide Title is turned on for Elementor’s Default Kit, the template that stores your Elementor Site Settings. The Default Kit’s CSS loads across the site, so its Hide Title setting hides titles on every page, including WooCommerce product titles. The steps below apply to the Default Kit in the same way.

Before You Begin

A few quick checks help rule out other causes and keep the site safe while making changes.

  • Take a backup of your site. It’s recommended to follow Backup Your Website in Less than 10 Minutes if you don’t have one yet.
  • Make sure the latest versions of Astra, Elementor, and Elementor Pro are installed.
  • Confirm the title is enabled in Astra’s single product layout. Go to Appearance > Customize > WooCommerce > Single Product and check that the Title item in Single Product Structure is visible (eye icon turned on).

How to Find the Template Hiding the Title

There are two ways to find the template: check your templates one by one, or use the browser’s developer tools to see exactly which template the rule comes from.

Method 1: Check Your Elementor Templates

If you’re wondering which template is hiding your product title, start with the templates that load on every page.

  1. Go to WordPress Dashboard > Elementor > Editor > Templates > Published.
  2. Look for templates that display on the whole site or on product pages, such as Header, Footer, and Single Product.
  3. Hover over a template and click Edit with Elementor.
  4. In the Elementor editor, click the gear icon to open the template’s settings.
  5. Check whether Hide Title is turned on.
  6. Repeat steps 3 to 5 for each template until you find the one with Hide Title turned on.
hide title option in Elementor editor settings

You can also find the templates on a product page from the admin menu bar by hovering over the Edit with Elementor link. Also check Elementor’s Default Kit the same way, since its Hide Title setting applies to the whole site.

Method 2: Use Browser Developer Tools

This method is faster when the site has many templates, because it shows the template ID directly.

  1. Open any single product page where the title is missing.
  2. Right-click the area where the title should appear and select Inspect.
  3. In the page code, select the hidden title element, for example <h1 class=”product_title entry-title”>.
  4. In the Styles panel, find –page-title-display: none. It’s usually listed under Inherited from html.
  5. Note the file name next to that rule, for example post-1234.css. The number is the ID of the template that hides the title.
  6. To open that template, go to yoursite.com/wp-admin/post.php?post=1234&action=elementor, replacing yoursite.com with your domain and 1234 with the ID you found.
Browser console showing the missing product title

How to Fix the Hidden Title

Turning off Hide Title in the template removes the rule that hides the titles across the site.

If you’re looking to bring back the product title on WooCommerce single product pages, follow the steps below.

  1. Open the template you found in the previous section with Edit with Elementor.
  2. Click the gear icon to open the template’s settings.
  3. Turn off Hide Title.
  4. Click Publish to save the template.
  5. After saving, clear your site cache (caching plugin, server cache, or CDN) and your browser cache.
  6. Reload a single product page to confirm the title is back.

Turning off Hide Title on a header or footer template does not change how that template looks, because header and footer templates don’t display a page title.

This content is blocked because it requires Video cookies.

If the template is a Single Product template and you don’t want the title to show there, it’s recommended to turn off Hide Title and remove the title widget from the template design instead.

Expected Outcome

The product title shows again on WooCommerce single product pages, and titles return on any other pages or posts that were affected. Pages that have Hide Title turned on in their own page settings keep their titles hidden, because Elementor saves this setting separately for each page and template.

Notes

  • On regular pages, Elementor’s Hide Title option syncs with Astra’s Disable Title option for that page. It’s recommended to use this per-page setting to hide titles on specific pages, rather than a template-level setting.
  • The same behavior can happen with any Elementor template that loads site-wide, including templates created with other header and footer builders that use Elementor. Check those templates too if the Theme Builder templates don’t have Hide Title turned on.
  • If the title is still hidden after turning off Hide Title and clearing the cache, regenerate Elementor’s CSS files from WP Dashboard > Elementor > Editor > Tools > Regenerate CSS & Data and check again.

If the title is still hidden after following the steps above, reach out to the support team.

Was this doc helpful?
What went wrong?

We don't respond to the article feedback, we use it to improve our support content.

Need help? Contact Support
%title %title
Scroll to Top