How to Edit WooCommerce Shop Page? 3 Easy Methods

The shop page in WooCommerce serves as a centralized hub where all your products are displayed to help customers browse, explore, and choose what they need. Editing the WooCommerce shop page is essential to creating a personalized shopping experience that aligns with your brand. 

To edit the WooCommerce shop page the easiest way, go to Appearance > Customize > WooCommerce > Product Catalog in your WordPress dashboard. From there, you can adjust the shop page layout, choose what products to display, and set sorting options—all without needing additional coding. For advanced designs, consider using a page builder plugin like Elementor or Woocommerce shortcodes.

In this guide, we’ll explore 3 methods to edit the WooCommerce shop page, 

• Edit WooCommerce shop page Using the WordPress Customizer (Basic)
• Edit Shop Page Using WooCommerce Shortcodes (Advanced)
• Edit Woocommerce Shop Page Using Plugins (Advanced)

Let’s dive in!

Why Edit the WooCommerce Shop Page?

The WooCommerce shop page serves as the storefront for your online business. Customizing your shop page enhances:

• User Experience: A well-designed layout improves navigation.
• Brand Identity: Tailor the design to reflect your brand’s personality.
• Conversion Rates: Strategic product arrangement boosts sales.
• SEO Optimization: A clean and user-friendly design ranks better on Google.

Method 1: Edit WooCommerce shop page Using the WordPress Customizer

The WordPress Customizer provides the easiest way to edit the WooCommerce shop page without coding.

Steps to edit a shop page in Woocommerce with default settings:

Step 1: Go to Appearance > Customize

• Log in to your WordPress dashboard.
• Navigate to Appearance > Customize.

Step 2: Access WooCommerce Settings

• Click on WooCommerce in the Customizer menu.
• Select Product Catalog to adjust the shop page settings.

Step 3: Edit the Shop page Layout and Display Options

In the product catalog, scroll down to Shop Layout section to edit the layout of your shop page.

Edit the Shop Layout:

• Shop Card Design: set the shop card layout from the default options.
• Shop Columns: Set how many products will be displayed in one column of the shop page.
• Products Per Page: Set how many products will be shown per shop page
• Shop Archive Content Width: Edit the content width of your shop page or keep it as default.

Edit the Shop Display Options:

• Shop page display: Set what you want to show on your shop page; only products, only categories, or both. You’ll get 3 options:

1. Show products
2. Show Categories
3. Show categories & Products

• Category display: Set what will display under the category section of the shop page.

1. Show products
2. Show subcategories
3. Show subcategories & products

• Default product sorting: Show you products in priority-based serial such as popularity, rating, arrival date, and price.

1. Default sorting
2. Popularity
3. Average rating
4. Most recent
5. Sort by price (asc)
6. Sort by price (dec)

Edit the Shop Card Structure

• Category: Show category or hide of shop page
• Title: Show product title or hide
• Ratings: show just rating or rating with count & text
• Price: Show product’s price or hide it on the shop page
• Add To Cart: Show cart button in the shop page
• Short Description: Write short product descriptions visible on the shop page.

Step 4: Preview and Publish

• Preview the changes in real-time.
• Click Publish to apply the changes.

Bonus Tip: 

For simple modifications, this WordPress default setting is perfect to edit your shop page. However, if you want to do advance edits, then you should use custom codes or plugins.

Method 2: Edit Shop Page Using WooCommerce Shortcodes

WooCommerce shortcodes allow you to add dynamic elements to the shop page. These are especially useful for creating custom layouts.

Step 1: Understand the Shortcodes to edit your WooCommerce shop page

WooCommerce comes with pre-built shortcodes that help you display products and product categories in various ways. Here are a few popular ones:

• products: Displays products with customizable parameters.
• featured products: Showcases featured products.
• product categories: Lists product categories.
• sale products: Highlights products on sale.
• best selling products: Highlights your top-selling items.

For a full list of shortcodes, refer to the WooCommerce shortcode documentation.

Step 2: Edit the Shop Page 

1. Go to Pages > Shop in your WordPress dashboard.
2. Click Edit to open the shop page editor.
3. Add or replace the existing content with WooCommerce shortcodes:

Step 3: Enter shortcode for different edits in shop page

Once you’re in the shop page edit section, enter the custom shortcodes here.

• For a custom product layout in the shop page, enter:
  

[products limit="12" columns="4" orderby="popularity"]

This code displays 12 products in a 4-column grid sorted by popularity.

• To display categories in the shop page, enter:
  

[product_categories number="4" columns="4"]

This showcases four product categories in a grid format (4*4).

You can tweak parameters like limit, columns, orderby, and order to fit your needs. For example:

• Show products on sale sorted by price (ascending):

[sale_products limit="8" columns="4" orderby="price" order="asc"]

Step 4: Save the shortcodes to apply

1. Adjust the shortcodes as necessary.
2. Once satisfied, click Save to save your changes.

Expert Tip: 

If you’ve sound coding skills, then try this method. But if you don’t know basec coding shortcodes, then I will suggest you go with plugins for editing WooCommerce shop pages.

Method 3: Edit Woocommerce Shop Page Using Plugins 

If you want more advanced edits on your shop page, plugins provide you with maximum customization options without requiring technical expertise or any coding.

Recommended Plugins to edit the WooCommerce shop page:

1. Elementor Pro

• WooCommerce widgets for product grids, categories, and filters.
• Full design control over the layout, typography, and colors.
• Dynamic product display based on custom conditions.
• Responsive design for mobile-friendly pages.

2. WooCommerce Shop Page Builder by Divi (Divi Builder)

• Pre-made WooCommerce shop page templates.
• Customizable product grids, sliders, and featured sections.
• Seamless integration with Divi’s theme and WooCommerce.

3. Shop Page Customizer for WooCommerce

• Modify the shop page background, typography, and layout.
• Drag-and-drop block placement for easy customization.

Among the three plugins, the best Woocommerce shop page editing plugin is Elementor Pro. So, I’m using this plugin to customize the shop page in a more advanced lavel.

Steps to edit a WooCommerce shop page with Elementor Pro:

Step 1: Install and Activate Elementor Pro

1. Go to your WordPress dashboard.
2. Navigate to Plugins > Add New.
3. Search for Elementor and install it.
4. Get Elementor Pro from the Elementor website.
5. Activate the license to unlock Pro features.

Step 2: Create a Custom Shop Page Template

1. Go to Templates > Theme Builder in your WordPress dashboard.
2. Click Add New and select Product Archive as the template type.
3. Give your template a name (e.g., “Custom Shop Page”) and click Create Template.

Step 3: Customize the Shop Page Layout with Elementor Pro

1. The Elementor editor will open with pre-designed templates for WooCommerce shop pages. Choose one, or start with a blank canvas.
2. Add WooCommerce-specific widgets to your page, such as:

• Product Archive: Displays your product grid.
• Product Categories: Showcases product categories.
• Product Filters: Adds filtering options for customers.
• Search Bar: Lets customers search for products.

3. Use the drag-and-drop interface to arrange the widgets and sections.
4. Customize the design:

• Adjust the grid layout, columns, and spacing.
• Change typography, colors, and button styles to match your brand.

​​

Step 4: Add Dynamic Content to shop page

1. Use Elementor’s Dynamic Tags to add dynamic content like the shop title or breadcrumbs.
2. For conditional display (e.g., show different layouts for specific categories), use the Display Conditions feature.

Step 5: Preview and Publish

1. Click the Eye Icon to preview how your shop page will look on desktop, tablet, and mobile.
2. Once satisfied, click the Publish button.

Step 6: Save and Test

1. Visit your shop page to ensure the new design is applied correctly.
2. Test responsiveness and functionality on different devices.

Best Practices for WooCommerce Shop Page Design

When it comes to editing or customizing your shop page design in Woocommerce, it’s always recommended to keep the following things in mind:

• Keep It Simple: Avoid clutter and focus on a clean layout.
• Highlight Key Products: Use featured products or sale badges.
• Ensure mobile responsiveness: Test the shop page on various devices.
• Use High-Quality Images: Visual appeal matters for conversions.
• Optimize for SEO: Use relevant keywords in product titles and descriptions.

FAQs

Conclusion

When you edit the WooCommerce shop page, it allows you to create a tailored shopping experience that resonates with your customers. Whether you choose the WordPress Customizer, plugins, shortcodes, or page builders, the options are endless. Follow the steps outlined in this guide to make your shop page stand out and improve your store’s performance.

Start experimenting today and give your WooCommerce shop page the makeover it deserves.