How to Hide a Block From the Frontend

If there’s a block that you don’t want to display temporarily but you don’t want to completely erase it from a page, you can do so by adding a custom CSS class to your theme.

First, from the WordPress dashboard, go to Appearance > Editor.

Select the page like in the video below to edit the website theme.

Click on the Styles Actions button in the Styles panel.

A screenshot of the WordPress site editor, with the cursor pointed at the Styles Actions button in the Styles panel

And select the Additional CSS option.

A screenshot of the site editor, with the cursor pointed at the Additional CSS button under the Styles Actions menu.

Paste this custom class unto the text box and hit Publish

.hide-me {
    display: none;
}
A screenshot of the Additional CSS text box in the Site Editor

Now, go to the page where you want to hide a block. In the example below, we want to hide the second button.

A screenshot of a post in the block editor. The cursor has selected a button.

Select the block, and in the Advanced panel, add the CSS class hide-me.

A screenshot of the block settings. The Advanced panel is highlighted and the "hide-me" additional css class is added.

Save the draft or publish the page. When you view the page, the block should now be hidden.

A screenshot of the page with the button hidden to demonstrate the result of the process

Note: This only visibly hides the block from the frontend, but it will still be seen in the webpage’s source.

Alternatively, they can use third party block plugins such as Stackable – we have our Display Conditions feature that can hide the block depending on various conditions like if the viewer isn’t logged in, the role of the viewer, or depending on the date, and plenty more.

Leave a Reply

Your email address will not be published. Required fields are marked *