After a fresh install of core website programs, WordPress, WooCommerce, and WooCommerce’s Storefront, it was found that individual product pages were not loading. Instead of producing a product picture, description, etc., all the individual product page displayed was the error message: Oops That Page Can’t Be Found. Core and menu pages all seemed appropriately linked, – just the product page failed to display product information. In addition, the Search function of the website was also broken, and search results provided the same Oops That Page Can’t Be Found error message. Both problems pointed to the same likely suspect, permalinks.
Permalinks help WordPress link to a specific page, such as a specific blog page, on a blog website. With our problem, when one clicked on a product photo on a page of assorted products, the product clicked should open a product page showing a picture of the product, a description, and depending on how WooCommerce is configured, size, shipping weight, etc., as well as a button to aid the customer adding the product to a “shopping cart”. Like a specific blog is related to the whole website of blog pages, the product page in WooCommerce is related to the whole assortment of products.
Fixing a permalink problem in a WordPress can be simple: Open WordPress as an Administrator, go the Settings > Permalinks from the left menu, and make no changes to the options, just save the page. This tends to refresh the links, and often corrects permalink errors. Unfortunately, our Oops That Page Can’t Be Found error wasn’t corrected by saving the Permalink page settings.
The next step was to check the Permalink configuration options on the Settings > Permalinks page, as shown the featured image above.
Nowhere in any of the Common Settings was Products mentioned at all. Note that on the Custom Structure setting, %product% is not even listed as a tag option. I presume this is because both Products and Product Categories are unique to WooCommerce and other e-commerce software. In any event, the fix for the Oops That Page Can’t Be Found error is to simply add the %product% tag to the Custom Structure setting as shown above. With this done, both the Website’s Search and Product Page functions came to life. Problem solved.