How to Change the Default Shop Page in WooCommerce: A Comprehensive Guide

Learning how to change the default shop page in WooCommerce can enhance your online store’s functionality and aesthetics.

This guide explains the necessary steps to customize the default shop page, offering various methods, from using WordPress settings to advanced customizations. Tailoring your shop page can improve user experience and reflect your brand identity.

FAQ

Understanding the WooCommerce default pages

When you set up WooCommerce, it automatically creates specific pages that are essential for your online store to operate smoothly.

• Shop: This is your main storefront, where products are displayed. No additional content is needed on this page, as it serves as a product archive.
• Cart: Features the WooCommerce Cart Block and shows current cart contents.
• Checkout: Contains WooCommerce Checkout Block, presenting shipping and payment options.
• My Account: Utilizes the [woocommerce_my_account] shortcode to show customer-related information like orders and account details.
• Terms and Conditions: Though not mandatory, it is strongly advised to have this for customer checkout agreement.

How to change the default shop page in WooCommerce settings

To change the default shop page, navigate to WooCommerce > Settings > Products.

Here, you can select a new page from the Shop Page dropdown to replace the default shop page. Remember, this just instructs WooCommerce to display shop content on the chosen page.

Understanding the WooCommerce shop page

The shop page is unique because it’s an archive template, which is not directly editable. It’s a PHP file that produces dynamic shop content and functions differently from typical WordPress pages.

This setup ensures a consistent display of your products, no matter what theme or customizations you apply. Even though you can’t edit the shop page directly, you can change the default shop page’s layout, design, and overall appearance.

Methods to change the default shop page in WooCommerce

Different methods to edit the default shop page include:

1. Custom coding: Create a custom shop template file if you are comfortable with HTML, CSS, PHP, and coding.
2. WordPress Customizer: Some settings can be adjusted via the WordPress Customizer to modify shop page aspects.
3. Block editor: Use blocks to create a new page layout.
4. Page builder: Utilize a page builder to craft a new product archive template or a custom shop page.
5. Ecommerce themes: Some WooCommerce-compatible themes come with their own settings to edit the shop page.
6. Plugins: There are plugins available that allow you to customize the shop page without coding.

Changing the default shop page in WooCommerce settings

To change your default shop page in WooCommerce, you’ll need to access your WooCommerce settings from the WordPress dashboard.

The process is straightforward and involves a few clicks within the WooCommerce settings panel.

Here are the steps you should follow:

1. Log in to your WordPress dashboard.
2. In the sidebar menu, hover over WooCommerce and click on Settings.
3. Navigate to the Products tab located near the top of the settings page.
4. Within the Products settings, you will find a drop-down menu next to Shop page. Click on this drop-down to see a list of all your pages.
5. Select the page you want to set as your new default shop page from this drop-down menu.
6. After selecting your new shop page, click the Save changes button at the bottom to apply your new settings.

Selecting a different page as your shop page changes its slug, and this page will now serve as the main product archive, displaying your shop’s items.

Any existing content on the new shop page will be overridden by your normal shop page content.

How to change the default shop page’s appearance

The WooCommerce Shop page serves as your virtual storefront, and customizing it can both reflect your brand and enhance your customers’ shopping experience.

Fortunately, even though changing the shop page in WooCommerce’s settings doesn’t change the default shop page content, there are several methods to tailor your shop’s layout, content, and features.

WordPress Customizer

To change the appearance of your default shop page using the Customizer:

1. Navigate to Appearance → Customize.
   
2. Click on the WooCommerce section to expand it.
3. Here you can tweak various options like Store Notice, Product Catalog, and Product Images.
   
4. Adjust settings such as how products are displayed, image sizes, and the default sorting order.

Using CSS for visual tweaks

Changing the visual elements of your shop page can make it stand out. Use CSS customizations to alter style, color, and font:

1. Navigate to Appearance > Customize in your WordPress dashboard.
2. Open the Additional CSS section.
   
3. Here, you can add your custom CSS rules. For example:

   /* Change the background color of all product titles */
   .woocommerce-loop-product__title {
     background-color: #eaeaea;
     color: #333;
     font-family: 'Helvetica', sans-serif;
   }
   

4. Click the Publish button to apply your changes.

With CSS, you can ensure that your shop page’s visual appeal aligns with your brand’s identity. This will offer a consistent and enjoyable experience for your shoppers.

Changing the shop page with an ecommerce theme

Choosing one of the many available ecommerce-focused themes can open a wealth of options to customize the store’s appearance.

For instance, using the Astra theme’s options:

1. Go to Appearance → Customize.
2. Choose the Global or WooCommerce section, depending on your theme.
   
3. Modify product catalog settings, including layout, sidebar options, and grid settings.

Building a new shop page in the block editor with blocks and shortcodes

You can use the various WooCommerce blocks available in the block editor to design a custom shop page.

 

To design a new shop page with the block editor:

1. Navigate to the Pages section, then click Add New.
2. Use blocks such as Products, Featured Products, or Categories to add and arrange your items.
   
3. Integrate WooCommerce shortcodes with the Shortcode block if specific customizations are needed.

WooCommerce depends on its default pages to function correctly. If you decide to create a new page that serves as a shop page, you may want to consider redirecting the old shop page URL.

Why redirect the WooCommerce shop page?

Before diving into the how-to, it’s important to understand the reasons behind redirecting your WooCommerce shop page:

1. Improved user experience: Directing users to a more relevant or updated page can enhance their browsing experience.
2. SEO benefits: Proper redirection ensures that search engines recognize the new URL, preserving your SEO rankings.
3. Website restructuring: As you revamp your site, redirecting helps maintain site integrity and prevents broken links.
4. Promotions and campaigns: Redirecting to a promotional page can boost sales during special campaigns.

Steps to redirect the WooCommerce shop page

To redirect the old WooCommerce shop page to a new URL, you can use a plugin or modify your site’s code. Below, we’ll explore both methods.

Method 1: Using a plugin

Plugins are the easiest way to set up redirects without touching any code. Here’s how you can do it:

Step 1: Install and activate a redirect plugin

1. Go to your WordPress dashboard.
2. Navigate to Plugins > Add New.
3. Search for a redirection plugin, such as “Redirection” by John Godley.
   
4. Click Install Now, then Activate.

Step 2: Set up the redirect

1. After activation, go to Tools > Redirection.
2. Click Start Setup to start the setup wizard. Follow the prompts.
3. After setup, in the Source URL field, enter the relative URL of your default WooCommerce shop page (e.g., /shop).
4. In the Target URL field, enter the new URL where you want to redirect the shop page (e.g., /new-shop).
   
5. Click Add Redirect.

Step 3: Test the redirection

1. Locate and hover over the new redirect in the list at Tools > Redirects.
2. Click Check Redirect.
3. Ensure it redirects to the new URL seamlessly.

Remember to try the redirect in an incognito window or clear your browser cache if you experience any unexpected behavior. Old data stored in the browser can interfere with seeing updated changes to your website.

Method 2: Using code (functions.php)

If you prefer to handle redirection without a plugin, you can add a snippet to your theme’s functions.php file. Here’s how:

Step 1: Access the Theme File Editor

1. From the WordPress dashboard, go to Appearance > Theme File Editor.
2. Locate and open the functions.php file of your active theme.
   

Step 2: Add the redirection code

1. Add the following code snippet to your functions.php file:

   add_action('template_redirect', 'redirect_woocommerce_shop');
   
   function redirect_woocommerce_shop() {
       if (is_shop()) {
           wp_redirect(home_url('/new-shop'));
           exit();
       }
   }
   
   

   • Replace '/new-shop' with the URL path you want to redirect to.

Step 3: Save and test

1. Save the changes to the functions.php file.
2. Open a new browser tab and enter the original shop page URL.
3. Ensure it redirects to the new URL correctly.

Creating a new product archive template with a page builder

Page builders like Elementor and the 10Web Builder provide drag-and-drop functionality to change the default shop page in WooCommerce to suit your needs. The user-friendly interface makes it easy to lay out your shop page by dropping in WooCommerce widgets to create a product archive template. This template can be set to replace the default shop page automatically.

For example, to change the default shop page with the 10Web Builder:

1. Go to Templates > 10Web Templates and select the Archive tab.
2. Click Add a new template.
3. Select Archive as the type of template you want to work on and enter a template name.
   
4. Click Create Template.
5. Use the WooCommerce widgets to create a shop page layout that suits your needs. You can also add headings, text, and other widgets to customize the page.
   
6. Try the Products widget to get started with a customizable product grid. The Content, Style, and Advanced tabs allow you to fine-tune the appearance and control which products will display.
   
7. Click Save & Publish when you’re finished editing the new shop page.
8. Navigate to Templates > 10Web Templates in the WordPress dashboard.
9. Click the Archive tab.
10. Locate the new template you just published, and click Add Condition.
    
11. To change the default shop page to the new template, select the following options from the dropdown menus as shown: Include, Archive, Product Archive, All Products.
    
12. Click Publish.

Now when someone visits your store, they see the new custom shop page.

Plugins that can help change the shop page

Several plugins offer custom shop page solutions:

• WooCommerce Product Table provides options for displaying products in a table format.
• Beaver Builder or Elementor plugins allow you to drag-and-drop design your Shop page.
• WooCommerce Customizer offers simple adjustments through a user-friendly interface.

Modifying template files manually

To manually customize your shop template:

1. Create a child theme to preserve your changes when updating your theme.
2. Copy the archive-product.php file into your child theme.
3. Make your code edits to reflect the new layout. This requires familiarity with PHP and WooCommerce hooks and filters.

Further enhancing shop functionality

To enhance your WooCommerce shop’s functionality, you’ll need to use the wide array of available plugins and tweak various settings to optimize the shopping experience.

Your store’s success hinges on these improvements delivering a seamless and user-friendly interface for your customers.

Optimizing the shopping experience

Your focus should be on making the shopping experience as intuitive and pleasant as possible. This can be achieved through several optimizations.

1. Ensure your shop page is running smoothly by checking load times and eliminating any unnecessary bloat. You can use performance plugins to help you with this task.
2. Customize your shop page layout to make it easy for customers to find what they’re looking for through the use of categories, filters, and search bars. Plugins can help lay out these elements in a user-friendly manner.
3. To avoid confusion, use a redirect plugin to redirect customers from the old default shop page to the new one you have set up.

Advanced customizations

When you’re ready to go beyond basic theme settings, delving into advanced customizations offers far greater control over your WooCommerce shop page’s look and functionality.

Modifying functions.php for custom functionality

To enhance your shop’s features, you might need to modify the functions.php file in your theme:

1. Access your WordPress theme’s directory via FTP or the WordPress theme editor.
2. Locate the functions.php file.
3. Before making changes, create a backup of this file.
4. Add your custom code at the end of the file to introduce new functions or modify existing ones. For example:

   // Add a custom message to the shop page
   add_action('woocommerce_before_shop_loop', 'your_custom_function');
   function your_custom_function() {
     echo '<p style="font-weight: bold;">Welcome to our store!</p>';
   }
   

5. Save the changes.

Customizing functions.php allows you to add or modify shop page features like adding special messages, changing layout behaviors, or even introducing new sorting options.

Marketing and SEO best practices

The success of your WooCommerce shop page depends greatly on your SEO and marketing efforts. Applying strategic best practices in these areas can significantly increase your shop’s visibility and drive more sales.

Enhancing shop page SEO

Step 1: Optimize product titles and descriptions
Your product titles and descriptions should be clear and descriptive and include keywords that potential customers are likely to search for. Use tools like Google’s Keyword Planner to determine the best keywords for your products.

Step 2: Improve your site’s speed
Site speed is a ranking factor on search engines like Google. Optimize your images and consider using a content delivery network (CDN) to fast-track loading times.

Step 3: Use high-quality images
High-resolution images can influence a shopper’s decision and show up in image searches. Name your images descriptively and use alt tags with relevant keywords. Alt tags improve accessibility and help search engines understand your page content.

Step 4: Implement structured data
Structured data helps search engines understand your content. It can also enhance your listings in search results with rich snippets. Use schema markup for your product listings to make them stand out.

Step 5: Optimize your URLs
Ensure that your shop and product URLs are short, readable, and include keywords. Avoid long strings of numbers or irrelevant characters.

Step 6: Build quality backlinks
Encourage reputable, relevant websites to link back to your shop. This can improve your site’s authority and visibility on search engines.

Step 7: Utilize social media
Social signals play a role in SEO. Share your products on social networks, and make it easy for others to do the same directly from your product pages. Encourage customer engagement with personalized responses that show your customer appreciation.

Effective ecommerce marketing strategies

Step 1: Develop a strong brand identity

Your brand sets you apart from competitors and can drive customer loyalty. Make sure your shop page reflects your brand identity through consistent colors, logos, and messaging.

Step 2: Engage in email marketing

Take advantage of plugins and services available for WordPress and WooCommerce to build your email list and keep in touch with customers. Send out newsletters, product updates, and personalized offers to encourage repeat business.

Step 3: Leverage retargeting ads

Use retargeting campaigns to reach users who have visited your site but have not made a purchase. Platforms like Google AdWords can help you display ads to these potential customers as they visit other sites.

Step 4: Utilize user-generated content

User-generated content, such as customer reviews and photos, can enhance credibility and encourage sales. Feature this content on your shop page to build trust with new customers.

Conclusion

By understanding how to change the default shop page in WooCommerce, you gain control over your store’s appearance and functionality.

Whether through simple settings adjustments or advanced custom coding, customizing your shop page can significantly enhance the shopping experience and align with your branding goals.