Wooassist

Assistance for Your Woocommerce Store

  • How it Works
  • Pricing
  • Site Maintenance
  • Blog
    • How-To Articles
    • Code Snippets
    • SEO For E-Commerce
    • Theme and Plugin Reviews
    • Wooassist News
    • WordPress/WooCommerce News
    • Interviews
  • About Us
  • Contact
You are here: Home / How-To Articles / How to Create a Custom 404 Error Page for Your WooCommerce Store

How to Create a Custom 404 Error Page for Your WooCommerce Store

February 25, 2016 By Nick J Leave a Comment

What is a 404 Error

A 404 Error is an error message displayed when an accessed page is not found in the server that you want to access. It is a standard response when an entered address does not match a data from a server.

This happens when you rename, move, or delete a page. This message also appears when the URL is incomplete, mistyped or misspelled. You can change the way your WooCommerce store responds to this error by redirecting or just letting your visitors arrive at a custom 404 Error page.

Creating a Custom 404 Error Page

default-404-error-page_screenshot-pngYou can actually just leave it and most websites would just send out a typical text response. So why create a custom 404 error page for your Woocommerce store? A lot of people are highly visual.

The Stanford Persuasive Technology Lab conducted a survey about web design in 2012. Half of the respondents said that web design is a huge factor in discerning a company’s credibility. To back that up, Zabisco found out that 40% will respond to visual information better than plain text.

Custom content will not only boost your branding but will make customers have a more positive view of your company. Custom content is one of the many reasons that make a customer feel positive about your website.

Statistics/Case Studies on 404 Error Pages

From a search engine ranking standpoint, 404 error pages will not hurt your ranking per se. It only matters when an important link in your site returns a 404 error. This important link could be your “about” page or “contact” page. Your rankings could suffer since these important pages are actually ranking factors.

Any other 404 error could also frustrate your visitors and just leave your website. Shopify surveyed why online retailers are losing 67.45% of their sales. They discovered that some of the most common mentioned issues are website problems.

Shopify-survey-why-online-shoppers-leave_screenshot-png

A 404 error also affects a website’s bounce rate. A bounce happens when a visitor comes to your website, does not click on any other page and leaves. Search engines like Google use bounce rate as ranking factor.

A high bounce rate raises several red flags for your WooCommerce store. It may imply poor user experience and your website may be deemed irrelevant to your market.

Elements of a Custom 404 Error Pagelabyrinth

Now before you go and make any changes, keep in mind that each theme is different. There are different ways on how you can create a custom 404 Error page. Here are some important things that you need to consider.

Use Simple Language

A regular site visitor will not understand a typical technical 404 message. Use simple human language to inform your site visitor of what went wrong. You can even use language translations or location specific pages. The goal is to deliver a clear message.

How You Can Help

Apologizing and offering a helpful suggestion should be the main theme. The aim is to change the negative experience from 404 pages into a positive one. You can do this by:

touch-screen_touchscreen

  • Adding a search box
  • Showing your menu navigation
  • Adding a contact, subscription or ticket submission form
  • Adding a sitemap, category lists or key links
  • Linking popular posts or social media accounts
  • Giving out coupons, discounts, or other offers

Time spent in your site should not end in your 404 page. These elements are also engagement and conversion boosters. Your customers stay happy and you get a positive rep.

Examples of Good 404 Error Pages

A lot of huge brands out there appeal to human emotions in their marketing strategy. This is because customers are not buying products, they buy the experience. 404 Error pages in the past are just simple text warnings. Websites now use humor or a bit of personality to communicate their brand to the customers. You can use graphics, animations, or even videos. Here’s some inspiration to get you started.

Popscreen

Popscreen showcases a clean and bright but simple and straightforward 404. You can see a link to the home page and popular videos as well as search bar.

404-error-page_Popscreen_screenshot

GOG

GOG displays a unique design to say that you lost your way. The 404 error page retains the navigation and footer menu so it is easy for users to navigate. Users can also report the error.

404-error-page_GOG_screenshot

UX Booth

The UX Booth 404 error page uses simple, concise and direct language and an immediate apology. The page suggests popular links on the website as well as the list of categories. It also retains the footer links and the search bar.

404-error-page_UX-Booth_screenshot

Average Joes Blog

Average Joes Blog is a good example of category-rich 404 error page. In fact, the 404 error page is a replica of the home page.

404-error-page_Average-Joes-Blog_screenshot

Philips

Philips goes creative and witty with its 404 error page. It mentions the absence of lighting then explains what happened and suggests popular links.

404-error-page_Philips_screenshot

Email Center UK

The Email Center UK website uses humor. Since you are at an error page, it means someone messed up and you get to choose who to fire for the fiasco. Below all that is a simple link to the home page.

404-error-page_Email-Center-UK_screenshot

Hootsuite

The Hootsuite 404 error page lists down possible reasons for the error. They used ‘fowl” language to keep the identity of the brand/mascot.

404-error-page_Hootsuite_screenshot

IMDB

The IMDB 404 error page uses a simple layout with a clever idea. Every visit to a 404 error displays a random movie quote. Movie buffs will definitely find this entertaining. A convenient link to the home page is also positioned at the top.

404-error-page_IMDB_screenshot

404-error-page_IMDB2_screenshot

Blue Fountain Media

Blue Fountain Media makes a 404 page that you will look forward to – an actual PAC-MAN game. They retained their main navigation and a “Go Back” link that takes you to the last visited working page.

404-error-page_Blue-Fountain-Media_screenshot

Not Found Org

NotFound.org actually uses its 404 error page to achieve a goal. It is an app that you can install in your website. It lets you customize your 404 page to help their cause – find thousands of children that go missing every year.

404-error-page_Not-Found-Org_screenshot

Creating a Custom 404 Error Page

Now that you have some inspiration, it’s time to create your own. You can check out WordPress’ basic guide here if you are able to code, if not you can check out the plugins below.

Since WooCommerce is installed on the WordPress platform, you can use the power of WordPress plugins to create awesome About Us pages.

Custom 404 Pro

The Custom 404 Pro plugin lets you override the default 404 page with any page of your choice. To set your custom 404 error page:

  1. Install and activate the Custom 404 Pro plugin.
  2. Create a new page that you want to use as your 404 error page.
  3. Click on Custom 404 Pro on your WordPress Dashboard and then click on Settings.
  4. Set the page or URL that you want to use as your 404 error page and then click on Save Changes.

Create-custom-404-error-page_Plugin_Custom-404-Pro-Settings

404page

404page is another easy plugin to use to create custom 404 error pages. To create a custom 404 error page using the 404page plugin:

  1. Install and activate the plugin.
  2. Create a new page that you want to use as your 404 page.
  3. Click on Settings and then choose the page that you want to use as your 404 error page.
  4. Click on Save Changes.

Plugin_404page_Create-custom-404-error-page

Test Your 404 Error Page

To test if your new 404 error page is working, just pop any non-existent URL in your domain on your browser. If your new 404 error page does not appear, check if your website is set to redirect to your new 404 error page.

Create-custom-404-error-page_Plugin_404page

Conclusion

404 Error Pages can be annoying but you can use them to your advantage. Customize them to boost engagement and conversion. Align your new 404 error page with your brand image and website goals. It will do wonders for your WooCommerce store and your brand. Do you have any other suggestions for creating a good 404 error page?

People that read this article also liked

Related-Products-in-WooCommerce_featured-imageHow to Change the Number of Related Products in WooCommerce How to Set up Redirects for WordPress Sites superhero-silhouette-hero-imageHow to Add a Hero Image in Storefront Storefront-Top-Bar-screenshot-sampleHow to Add a Top Bar in Storefront Theme

Filed Under: Code Snippets, How-To Articles Tagged With: best practices, design tweaks, navigation, plugins, redirection, WordPress

Leave a Reply Cancel reply

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

Woocommerce Support

wooassist-team-in-Iloilo

Get 2 Hours of
FREE SUPPORT

We are so confident that you will love our services that we will give you your first 4 hours at a 50% discount

That's 4 hours for only $75

BUY NOW

Happy Wooassist Customers

Awesome! Fantastic! I just went to our site and I see that our site has been fixed!! We are getting orders again thanks to you all at WooAssist! Our site has not worked and looked this good for many months!! You all are awesome! Thank you so much for fixing our site! You have a customer for life! Thanks for making my day wonderful!

Kenneth Arnold

We have been quite pleased working with WooAssist as they help fill in the gaps of our development needs, all at a great price. They are always timely and communicate great, I highly recommend their services.

James Grasty

My husband and I am EXTREMELY pleased with the WooAssist Team. They provide excellent service, are very knowledgeable, and super easy to communicate with. The team ALWAYS has our company's best interests in mind. I love WooAssist! All of you make my job easier.

Jennifer Taft leetaft.com

Categories

  • Code Snippets
  • How-To Articles
  • Interviews
  • SEO For E-Commerce
  • Theme and Plugin Reviews
  • Wooassist News
  • WordPress/WooCommerce News

Recent Posts

  • The Ultimate Guide on How to Set Up Shipping on Your WooCommerce Store
  • WordPress Site Gets Infected
  • Where to Hire a WooCommerce Developer?
  • Recent Spike in Attacks Targeting Outdated WordPress Plugins
  • Security Vulnerability in Spam protection, AntiSpam, FireWall by CleanTalk
Let us support your online store so you can manage your business

Get started today

Get 2 Hours of FREE SUPPORT

We are so confident that you will love our services that we will give you your first 4 hours at a 50% discount

That's 4 hours for only $75

BUY NOW

Free eBook

Your subscription could not be saved. Please try again.
Your subscription has been successful.

YOURS FREE!

5 Things Every Online Store Can Fix On Their Website In The Next Week To Increase Sales

Quick Links

  • How it Works
  • Pricing
  • Blog
  • Contact
  • About Wooassist
  • My Account
  • Checkout
  • Privacy Policy
  • Cookie Policy
  • Terms and Conditions

Wooassist

Australia:
8 Storie St.
CLONTARF QLD 4019

Philippines:
San Miguel St.
Poblacion, Iligan City 9200

Connect

  • Facebook
  • LinkedIn
  • Twitter
  • YouTube

Copyright © 2023 · Wooassist

Yours FREE!

5 Things Every Online Store Can Fix On Their Website In The Next Week To Increase Sales