A WordPress website with the popular WooCommerce plugin shows a page title, automatically generated according to the category page being viewed.
For a WordPress website I was looking to remove the page title from view.
Hide the Category page title using CSS or programmatically with WooCommerce filters?
Often, the simple approach to hiding website content is to set the enveloping DIV’s CSS display setting to none.
The changes are made within the theme’s skin.css file. The file can be accessed from the WordPress admin view. Click on Appearance in the left menu and then select Editor. Usually the file opened is the file we’re interested in skin.css. But do check. Make your changes and click on the blue Update File button.
Looking at the page source the WooCommerce category title is a simple header, with a class of page-title, which can be used.
To hide this category title with CCS the class is added to the theme’s style.css file, with the setting for the display:
Dependant upon how your WordPress theme has been defined, you may need to further expand on the class path, or add important! to ensure the extra setting over rides and I’d implemented.
Historically there have been issues regards hiding page content, making it only visible to search engines.
Most notable was the era when keywords were stuffed into a page, with many invisible to the visitor, but visible and targeting the search engine indexing robots.
From this stems the idea that hiding content should be taken with care. But note, menu items are hidden until the parent is hovered over. There are also effects such as sliders and moving imagery. These are accepted as website feature and expectations.
Looking to the future, when the new website theme has been completed and is operational. With the WooCommerce category title hidden programmatically in the functions.php file it is as a clear action, alongside of which sits appropriate commentary. With the inclusion in the CSS file of the title hiding, there is more chance of it being undone and shown, by accident on the future.
An alternative is to edit the WooCommerce template files. This can be the original plugin files, or a copy placed within the theme. A better a approach one which won’t be overwritten the next time the plugin is updated. However, occasionally there are changes to the WooCommerce templates which.
Whilst the WooCommerce category title may be hidden using CSS, I think a better approach is to do it programmatically, interacting with the WooCommerce variable values and hooks.
To hide the WooCommerce category title programmatically let’s begin by looking at the file generating the title output. The file of interest is
We wish to override the section:
<?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?> <h1 class="page-title"><?php woocommerce_page_title(); ?></h1> <?php endif; ?>
by adding our override code in our functions.php located within the child theme being developed:
As can be seen the header has a test to check whether woocommerce_show_page_title is true of false.
To hide the title set the value to false. I added the following line in the functions.php file:
I would favour editing the functions.php file over changing the CSS.
Making the changes in the functions.php file is more repeatable. A single line within the functions.php file. But the CSS approach may require further adaptation to ensure its implemented, dependent upon the wrapping of the title on the page and CSS precedence.
If you are making the edit changes via the WordPress appearance editor menu option. Making the changes to the CSS style.css file is probably your safest option. An error in your spelling may have an effect on the appearance of the website but it won’t be catastrophic, it can be really edited and corrected. However, misspelling the addition of content to the functions.php file may render your website a white screen.