How to Create WooCommerce Custom Shop Page

Are you looking for a way to add a custom shop page in your WooCommerce store? In any online store, the shop page is where products are displayed. This means that it is one of the most important pages in your store.

Table of Contents

It should have an attractive and user-friendly design. You should arrange them well so that your customers have an easy time shopping in your store.

By default, the WooCommerce shop page is a pre-designed component of your store. This means that there is no in-built solution to change the look and feel of the shop page.

However, you can change it and add a custom one.

WooCommerce Custom Shop Page

In this brief tutorial, you will learn how to add a custom shop page. You can build a custom shop page from scratch using code or a page builder plugin.

It is not a complicated process. It will take a short time.

However, you need some coding skills but we will guide you through each step.

If you have not created a child theme, please create one before proceeding. This is because changes made using a child theme will not be lost during an update.

You also need to create a folder structure to store your files. If you are a beginner, we recommend that you download a child theme plugin

Steps to Add a Custom Shop Page

This is how the basic shop page looks like:

After you have created your page, here are the steps you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file where we will add the function to add the URL of the custom shop page.
Add the following code in the functions.php file: [php]/*
@ snippet : Add custom shop page
*/
add_action(‘template_redirect’, ‘njengah_redirect_woo_pages’);
function njengah_redirect_woo_pages()
{
if (function_exists(‘is_shop’) && is_shop()) {
wp_redirect(‘https://www.example.com/shop/’);
exit;
}
}[/php]

Remember to replace the URL within the wp_redirect to the one with the new shop page.
If you had added a shop page link on the header, remember to update it as well. This is the outcome in the front end:

Conclusion

That’s all you need to do to add a custom shop page. You can also create a custom page using shortcodes or a page builder plugin.

If you encounter any problems, we recommend consulting a qualified WordPress developer. This will ensure that you do not break down your site.

Editorial Staff

How to Create WooCommerce Custom Shop Page

WooCommerce Custom Shop Page

Steps to Add a Custom Shop Page

Conclusion

Similar Articles

Related