How To Set Woocommerce Shop Page Without Subdirectory

How to Set Your WooCommerce Shop Page Without a Subdirectory: A Beginner’s Guide

So, you’ve got WooCommerce up and running, products are uploaded, and you’re ready to sell. Great! But you’re probably thinking, “Why is my shop page at `www.example.com/shop`? I want it at `www.example.com/`!”

Don’t worry, you’re not alone. Having your shop at the root URL (like `www.example.com/`) is cleaner, easier to remember, and arguably better for SEO. While WooCommerce *defaults* to using a `/shop` subdirectory, it’s completely possible to set it up how you prefer. This article walks you through the steps, explaining why each matters, and providing real-life examples to help you understand.

This guide is designed for WooCommerce newbies, but it includes tips useful for seasoned WordPress developers as well. Let’s get started!

Why Use the Root URL for Your Shop?

Before we dive into the “how,” let’s cover the “why.” Here’s why you might want your WooCommerce shop at the root URL:

• Branding & Memorability: `www.yourbrand.com` is easier to remember than `www.yourbrand.com/shop`. It’s more direct and professional. Imagine telling someone, “Check out our products at our website,” instead of, “Check out our products at our website…slash shop.” Simpler is always better.
• SEO Benefits (Minor): While not a massive SEO factor, having keywords in your root domain name is generally a *small* advantage. If your business name is “Amazing Widgets,” having `www.amazingwidgets.com` (pointing to your shop) is better than hiding the shop page further down.
• User Experience (UX): A shorter, more direct URL makes it easier for users to navigate your site. It also aligns with user expectations; many expect the homepage to be the shop, or at least a clear entry point to the shop.

Step-by-Step Guide to Removing the /shop Subdirectory

Here’s how to move your WooCommerce shop page to the root domain:

1. Create (or Identify) Your Shop Page:

• If you already have a “Shop” page: Great! Ensure this page is *actually* displaying your products. By default, WooCommerce creates a page named “Shop” for this purpose.
• If you don’t have a dedicated “Shop” page:
• In your WordPress dashboard, go to Pages > Add New.
• Give it a title (e.g., “Shop”).
• Important: Leave the content area blank! WooCommerce dynamically fills this page with your products. Do NOT add any text or images here (unless you have a very specific reason and understand how WooCommerce’s product archive works).
• Publish the page.

2. Set the Shop Page in WooCommerce Settings:

• Go to WooCommerce > Settings > Products.
• Look for the “Shop page” dropdown.
• Select the page you created or identified in Step 1 (e.g., “Shop”).
• Save Changes. This tells WooCommerce which page should display your product catalog.

3. Configure Your WordPress Reading Settings:

• Navigate to Settings > Reading.
• Under “Your homepage displays,” choose “A static page”.
• In the “Homepage” dropdown, select a different page *other than the shop page*. This is crucial! Your homepage cannot be your shop page at this stage. Typical choices are “Home,” “Welcome,” or a custom page.
• In the “Posts page” dropdown, select a page for your blog posts (e.g., “Blog,” “News”). If you don’t have a blog, you can leave this blank (or create one).
• Save Changes. This step effectively assigns a different page as your homepage, freeing up the root URL for your shop.

4. Set the Shop Page as Your Homepage (Final Step):

• This part requires a little custom code (don’t worry, it’s simple and easily reversible).
• Add the following code snippet to your theme’s `functions.php` file or, even better, a custom plugin:

<?php
function set_shop_page_as_homepage() {
// Get the shop page ID
$shop_page_id = wc_get_page_id( 'shop' );

// Check if a static front page is already set

if ( ‘page’ == get_option( ‘show_on_front’ ) && get_option( ‘page_on_front’ ) != $shop_page_id ) {

// Update the options to set the shop page as the homepage

update_option( ‘show_on_front’, ‘page’ );

update_option( ‘page_on_front’, $shop_page_id );

}

}

add_action( ‘wp_loaded’, ‘set_shop_page_as_homepage’ );

Explanation of the code:

• `wc_get_page_id( ‘shop’ )`: This WooCommerce function safely retrieves the ID of the page designated as your “Shop” page in the WooCommerce settings.
• `get_option( ‘show_on_front’ )` and `get_option( ‘page_on_front’ )`: These WordPress functions get the current settings for your homepage (whether it’s a static page or your latest posts, and which page is selected as the static homepage).
• `update_option( ‘show_on_front’, ‘page’ )` and `update_option( ‘page_on_front’, $shop_page_id )`: These update the WordPress options to set the shop page as the static front page (homepage).

Where to put the code:

• Child Theme (Recommended): Create a child theme and add the code to the `functions.php` file within your child theme. This prevents your changes from being overwritten when your theme updates.
• Theme’s `functions.php` (Less Recommended): You can directly edit your theme’s `functions.php` file. Important: Back up your `functions.php` file before making any changes. If something goes wrong, you can restore the backup.
• Custom Plugin (Best Practice): Create a small custom plugin. This is the most robust and organized approach for adding custom functionality to your site.

5. Flush Your Permalinks:

• Go to Settings > Permalinks.
• Simply click “Save Changes”. This forces WordPress to regenerate its permalink rules, ensuring everything works correctly.

6. Test Your Site:

• Visit your domain (`www.example.com`). You should now see your shop page as your homepage.
• Test navigation, add products to your cart, and go through the checkout process to ensure everything is working as expected.

Troubleshooting and Common Issues

• “Page Not Found” Errors: This usually means your permalinks haven’t been flushed (Step 5). Go back to Settings > Permalinks and click “Save Changes.” This is *the* most common fix.
• Blank Page or Errors: If you see a blank page or error messages after adding the code, there might be a syntax error in your `functions.php` file. Recheck the code carefully for typos. If using a theme’s functions.php, revert to the previous version of the file to remove the error.
• Incorrect Shop Display: Double-check that you’ve correctly selected your shop page in WooCommerce > Settings > Products. Also, ensure your “Shop” page is empty (unless you have a specific reason to add content there).
• Caching Issues: If you’re using a caching plugin, clear your cache after making these changes. Caching can sometimes prevent the changes from being reflected immediately.

Reverting the Changes

If you need to revert back to the original `/shop` URL structure, follow these steps:

1. Remove the Code: Delete the code snippet you added to your `functions.php` file or custom plugin.

2. Reset Reading Settings: Go to Settings > Reading and either select “Your latest posts” or choose a static page *other* than your shop page for your homepage.

3. Flush Permalinks: Go to Settings > Permalinks and click “Save Changes.”

4. Ensure Shop Page is Correct: Go to WooCommerce > Settings > Products and verify the “Shop page” dropdown is correctly set to the page you want as your shop.

That’s it! You’ve successfully moved your WooCommerce shop to the root URL. This provides a better user experience and can contribute (in a small way) to improved SEO. Remember to always back up your site before making changes and test thoroughly after implementation. Happy selling!