How to Hide the Custom Fields Container in Joomla 4 & 5

Custom fields in Joomla are a powerful feature, allowing users to add extra data to their content. However, there may be situations where hiding the container of these fields is necessary—perhaps to streamline your website’s design or improve user experience.

This article outlines clear, step-by-step methods to hide the custom fields container in Joomla 4 & 5.

1. Disable Automatic Display

This is the simplest and most beginner-friendly method. By turning off automatic display, the custom fields won’t be shown on the frontend, but you can still access the data if needed.

Steps

1. Log in to the Joomla admin dashboard.
2. Go to Content → Fields.
3. Select the field you wish to hide.
4. Click on the Options tab.
5. Locate the Automatic Display setting and change it to Do not automatically display.

Result

The custom field will no longer appear on the frontend automatically. However, you can still retrieve its value using custom overrides or programmatically in templates.

2. Use a Custom Override

For advanced users, custom overrides offer more control over the display of custom fields.

Steps

1. Navigate to System → Templates → Template Overrides.
2. Select the component you wish to modify, such as com_content.
3. Create a new override or edit an existing one.
4. Inside the override file, you can:
   • Manually render the field value where you want it.
   • Completely remove or hide the HTML associated with the .field-container class.

Result

You gain full control over the field’s appearance and placement on your site. This method, however, requires basic PHP knowledge and familiarity with Joomla’s override system.

3. Hide the Container Using CSS

If you’re looking for a non-intrusive and quick solution, using CSS is an excellent option. This method only hides the container visually and doesn’t alter its underlying functionality.

Steps

1. Identify the CSS class of the field container. Typically, it’s .field-container, but you can confirm this in the Display Class field under the field’s options.
2. Add the following CSS rule to your template:

   .field-container {
       display: none;
   }
   

Result

The custom field container will be hidden from view while remaining in the page’s code. This approach works well for minor adjustments and doesn’t require coding expertise.

4. Develop a Custom Plugin

For advanced use cases, creating a custom plugin offers maximum flexibility. This method dynamically removes or hides the container during content preparation.

Steps

1. Write a plugin that listens to the onContentPrepare event in Joomla.
2. In the plugin code, manipulate the output to exclude the .field-container.
3. Install and enable the plugin via Extensions → Plugins.

Result

This approach gives you the ability to programmatically control the display of fields across your entire website. It requires knowledge of Joomla’s plugin system and PHP development.

Things to Consider

Before applying any of the above methods, take these factors into account:

• Impact on Extensions and Templates: Some third-party extensions or templates might depend on the field container. Removing it could break their functionality.
• Testing: Always test changes on a staging or development site to ensure there are no unintended consequences.
• Backup: Backup your site before making significant changes to avoid data loss.

Further notes...

Hiding the custom fields container in Joomla can be achieved using a variety of methods, from simple configuration changes to advanced custom development. Beginners will find the Disable Automatic Display or CSS methods the easiest, while experienced developers might prefer custom overrides or plugins for greater flexibility.