How to Create a Custom 404 Error Page in Flatsome Theme

An error page can be frustrating and confusing for users. 404 errors are not suitable for user experience.

When you click on a link and get a 404 error, it means that your page request to the server was successful, but the server did not found the particular page you were trying to access.

Luckily, you can let your users know they are still on your site and direct them back to your content by creating a custom 404 page.

This article will explain some reasons to have a custom 404 error page and show you to create one in Flatsome theme.

How most WordPress 404 page looks like

404 page is often the most neglected page on most sites. Usually a lot WordPress themes 404 page, look like this:

not found page

In Flatsome theme powered site, a 404 page appear as:

404 error page flatsome

It happens when you move, rename, or delete a page. This message also appears when the URL is mistyped, misspelled, or incomplete.

However, you can change how your WooCommerce site responds to this error by redirecting your visitors to arrive at a custom error page.

You need to make this experience better by properly conveying the error and give them a proper course of action. It can be done by showing visitors other website sections they can visit, or you need to provide them with a way to contact you, etc.

Why do you need to customize your 404 page

It confirms users that they are on the right website. But, a single page they may have been looking for doesn’t exist. This is much better than throwing into question whether or not the website itself exists.

Even the best websites get 404 error and this is why you should customize your 404 page to at least have your site’s navigation available.

When a user gets a browser-based 404-page error, they might think your site is dead, and as a result, won’t bother coming back.

Moreover, a custom 404 page acts as a soft-sell landing page. It serves to increase the brand as well. In comparison, a generic 404 page doesn’t bring any additional benefit to a user.  

Create a custom 404 error page in the Flatsome theme

From version 3.6.0, you can create a custom block and assign it to the 404 page to replace its content and edit it with the builder.

We have also created a step by step video tutorial on this topic.

If you prefer text over video, follow the below steps –

Step 01: Create a new block

To begin, you’ll need to create a new block. In your WordPress dashboard –

Navigate to Add New from UX Blocks and create a new block. Use a title and add some content to your liking.

add block for 404 page

Step 02: Customize your block:

A well-designed 404 page can prevent users from leaving your site when they encounter one.

To design the page, click on the Edit option.

edit 404 page

Then click UX builder to customize the page.

Once you click UX Builder, you’ll be redirected to the settings page. Click on the Add elements options.

Step 03: Add elements to 404 page:

custom 404

You can set up your custom page here. To use pre-made layouts option, click on the Flatsome Studio button.

Step 04: Design your page

You can select any pages from here and then change all the links and icons to your own.

404 error page demo

Once done, click on the Update button to save your settings.

After that, navigate to 404 page from Advanced under the Flatsome tab on the top.

Now, assign the newly created block from this page and Save All Changes.

That’s it! You can now hopefully create a custom 404 page with a custom user-friendly UI and message.

Now, whenever someone mistypes a URL or clicks on a broken link instead of being lost, they will find themselves on your custom 404 error page. It will give you a much better chance of keeping users engaged and happy as they navigate your website.

Customizing the product page is an awesome feature of UX Builder. You can customize the WooCommerce product page using UX Builder by Flatsome theme.