How to Customize the WooCommerce Shop Page Easily

eCommerce businesses have gained popularity during the past decade. This popularity increased even more after the COVID-19 breakout. A WooCommerce shop makes buying simpler for customers and is easy to manage for owners.

Today, running an online store is straightforward, cost-effective, and safe. Even brick-and-mortar businesses can sell goods and services online. Thus, they can enjoy the best of both worlds and reach a broader client base.

The WooCommerce plugin is one of the most popular for creating and managing an online store. Based on WordPress, it provides many eCommerce features. It also allows for lots of integrations, enhancing its possibilities even further.

Every WooCommerce shop needs a main shop page. This page acts as a presentation letter for customers. Here, they should be able to find what they are looking for hassle-free. They can find and buy what they want with comparison charts, descriptions, good pictures, displayed availability, etc.

A well-designed product page doesn’t just generate more conversions. It also improves the WooCommerce store’s reputation. The way a store presents its products can make a big difference.

But, with a WordPress website and WooCommerce, it’s not always easy to customize the main product page. The platform may include a pre-built page template, yet store owners usually need designs tailored for their business.

Then, how does one customize the WooCommerce shop page? Admins can use a page builder with a variety of tools. They can also use shortcodes. Thus, it is possible to fully customize a WooCommerce shop page. Most importantly, this can be done quite easily.

What is a WooCommerce shop page?

The WooCommerce shop page is like a category page in WordPress. When the WooCommerce plugin is installed, there will be four new pages on the WordPress dashboard. These pages are “My Account,” “Cart,” “Checkout,” and “Shop.”

The shop page works like a blog section. When users create a new blog entry, it will be displayed on the blog page. In the same way, when they offer a new product, it is displayed on the WooCommerce shop page.

Yet, there is no built-in tool to customize the shop page. This page’s design will depend on the chosen theme, and it’s set by very specific locations in the site’s code, i.e., WooCommerce hooks. Other features, like price and product title, are also stored in these hooks.

But why do we need to customize this page? Simply because it’s where potential customers can see the available products. If products are not properly arranged on store racks in a brick-and-mortar business, it will take too long for people to find stuff, and they will leave. The same applies to a WooCommerce store.

Usually, online customers want to save time. They need to find what they are looking for quickly. They also need as much product information as possible. This includes price, availability, images, payment method, shipment time frame, etc.

This is why admins must customize the WooCommerce shop page layout. The design should be user-friendly and interactive, making the buying process easier.

Why customize your WooCommerce shop page: benefits

As with brick-and-mortar stores, customizing a WooCommerce shop page is vital. After all, if someone walks down a street in the shopping district, they will see various stores.

Each of them will have its own style. Signs, window dressings, product arrangements, and the store’s disposition will vary greatly. Online stores should work under the same principle.

Also, shop owners can benefit much from this approach. Next, we present some of the benefits of customizing a WooCommerce shop page.

Seven reasons to customize a WooCommerce shop page:

1. Improve the site’s SEO:

Customizing a shop page is not only about arranging pictures and products. It’s also about page optimization. Admins can add valuable information like keywords, meta descriptions, and meta titles. That helps the page rank better on search engines.

2. Encourage visitors to browse around:

With a nice-looking page and well-arranged products, it will be pleasant for visitors to browse the store’s items. This increases the chance of closing an order.

3. Increase conversion rates and revenue:

In line with the previous points, customizing a shop page can increase sales, making the business sustainable. Customization must be made considering the targeted audience.

4. Ease of use:

It will be simpler for customers to find what they are looking for. It doesn’t matter whether they have a clear idea in mind or not.

5. Stand out from competitors:

A uniquely designed shop page helps a business stand out. The market is highly competitive, but a one-of-a-kind layout can help make the difference. The design must also provide a superb user experience.

6. Easy checkout:

Purchasing from a site must be easy. The platform should be intuitive and user-friendly. Make sure that visitors can easily browse products and find the “Add to Cart” button.

7. Express the store’s identity:

The shop page layout should reflect one’s brand. All colors, images, fonts, etc., must be selected according to the store’s style. This applies especially to brick-and-mortar businesses that decide to go online by creating a WooCommerce shop.

To sum up, the greatest benefit of a customized shop page is to keep the client happy. They must find the platform simple, useful, and attractive.

How to customize the WooCommerce shop page step by step

A shop page can be customized in different ways. Admins can add tools like product filters, offer displays, custom fields, and more. The purpose of this section is to be a guide to customizing a WooCommerce shop page. The process can be done either manually or by using a page builder.

How to customize the WooCommerce shop page manually

It is possible to customize a WooCommerce shop page without a page builder or plugin. Adding third-party software can generate compatibility issues on the site.

So this is an excellent option for those who want to avoid bugs and keep their site error-free. Yet, this alternative is not for everyone. Admins don’t have to be programming experts, but they do need a basic knowledge of coding.

Creating a child theme

This approach is a good solution for many problems. Creating a child theme is relatively easy and can be used for several aspects of the page.

This is a necessary step to customize the shop page, your theme, or other plugins. It is also the safest way to add functions or change styles to a WordPress site.

Creating a folder structure in a child theme

cPanels or FTPs can be used to alter the site’s files. Once you create a child theme, go to /wp-content/themes/your-theme-name using cPanel File Manager or FTP like FileZilla.

Now you can name your child theme. If it is based on “Twenty Twenty One,” it can be called, for example, “twenty-twenty-one-child.”

Now, go to the folder /wp-content/themes/twenty-twenty-one-child and create another folder called WooCommerce. Then, in this new folder, create a subfolder. This will be called “archive-product.php” and will be the shop page template file.

By following these steps, you can create your own WooCommerce shop page. When you go to the site, you will see a blank page. The child theme must be activated.

Creating content

The next step is to create content. Anything the admin types in the “archive-product.php” will be displayed on the shop page. At this point, you can choose to use code.

Creating a shop page template

Go to the parent theme and find the file named “single.php.” If this is not available, find the file “index.php” instead. Copy this file.*

Now, paste it into the folder you created on step 2. Delete the file “archive-product.php” (because the new file will have this name). Change the name of the new file to “archive-product.php.”

Thus, you will be using a post template as a custom WooCommerce shop page. But this isn’t the best solution. A shop page must look like a shop and not a product page. For further customization, admins will need to use code.

*Note: if both files are available, copy “single.php” only.

Using shortcodes to customize the WooCommerce shop page

First, you need to separate products into rows or columns. If you want to arrange the products in two columns with a maximum of six products on each, you need to enter this code:

[products limit=”6″ columns=”2″]

Instead of entering the code, you can achieve the same results differently. Follow the next steps:

Step 1 – Open the “archive-product.php” by clicking on it.

Step 2 – Remove the text between main id=“main” class=“site-main” role=“main”> and </main><!– #main–>.

Important: Do not remove the lines of code but only what’s written in between.

Step 3 – In the place where you removed the previous code, add this new line of code:

<?php echo do_shortcode (‘[products limit="6" columns="2"]’) ?>

Step 4 – Save changes, and your WooCommerce shop page should be ready. You can further edit the page by adding different shortcodes until you are happy with the results.

Displaying the most popular products

There are plenty of other things that can be done to make the shop page more appealing. It’s important to remember that every decision needs to be client-focused.

The main goal is to create a user-friendly buying platform. It helps to display the most popular products. Thus, visitors will know what products have worked best for previous customers. In many cases, this will help them make a decision.

To display the most popular products, admins should paste the following code:

[products orderby="popularity"]

Go back to the “archive-product.php” file and paste this:

do_action('woocommerce_before_shop_loop');
echo '<h1>MOST POPULAR !!</h1>';
do_shortcode('[products orderby="popularity" class="m-popular"columns="2" limit="2"]'); 
do_action('woocommerce_after_shop_loop');

With this example, the system will display two products in a single two-column row (columns=”2″ limit=”2″), but readers can set up the numbers they wish.

With shortcodes, the user can create pages with the ability to display different features. This includes best-selling products, top-rated products, new releases, etc. Shop owners can play around with different codes until they create the perfect page. Each shop page must be optimized according to the targeted niche.

How to customize the WooCommerce shop page using a page builder

Page builders are an excellent solution for those who lack coding skills. The following method works with any page builder (Elementor, Divi, Visual Composer, etc.)

With a page builder, users can edit their shop page without needing to insert code. They won’t need to open any theme files either.

This option allows infinite possibilities. Some of these are types of products, number of items displayed, page design, and more.

Please note that, even though coding is unnecessary, it is always helpful to know the basics. Some page builders can insert code for further customization. Next, we describe how to customize the WooCommerce shop page with a page builder. The user will have to take two initial steps.

Creating a listing page

We assume the reader is familiar with using page builders. In general, these are intuitive platforms. With some practice, even beginners can set up a WordPress website.

We will explain how to proceed when working with Elementor. This is one of the most popular and user-friendly page builders.

First, create a new page. In this case, we want the page to display featured products and best-selling items.

Then, you can add features. We will use WooCommerce shortcodes. These will depend on the categories you want to display. Here are some examples:

[featured_products]

[best_selling_products]

[top_rated_products]

[sale_products]

[product_table]

[recent_products]

[products]

To add featured products, go to the short page using the corresponding shortcode:

• Go to the WordPress admin dashboard > Products page
• Mark your chosen products by checking the star icon. These will be your featured products.

• Go back to the editing page and drag the text editor below the featured products.
• Here, paste the [featured_products] shortcode.

• Click “Update”
• Check your page to see the changes.

In the same way, admins can display any chosen category. For this, they must use the corresponding shortcode, e.g., [best_selling_products], [recent_products], etc.

They can also choose other attributions like the number of columns, number of items displayed on each column, etc. You can even set the column to display all products except for those with the tag “X.”

If someone wanted to display two product columns with a maximum number of six items in each column, they would insert the following:

[products limit="6"columns="2"]

Set the new page as a WooCommerce shop page

The next step is to set this page as the shop page. For this, a child theme should be created, as explained above. Once this is done, do the following steps:

Step 1: Get your new page’s URL.

Step 2: Go to the WordPress dashboard.

Step 3: Go to Appearance> Theme Editor. If a pop-up comes out, click “I understand.”

Step 4: You will be taken to a page where the theme function files are displayed on the right side. Click on the “functions.php” file and paste the following code at the end:

add_action('template_redirect', 'quadlayers_redirect_woo_pages');function quadlayers_redirect_woo_pages(){ if (function_exists('is_shop') && is_shop()) {
        exit;    }}

Copy and paste the code exactly as shown above. Also, replace your URL within the wp_redirect(‘[yourURL]’).

Step 5: Click “Update”

After this process, you will have a custom WooCommerce shop page.

We strongly recommend cloning the site. Every major change should be made in a test environment before it is published. This also enables the user to try different customization and design options.

What to consider when customizing a WooCommerce shop page

Each customization process depends on the nature of the business. Store owners must consider their audience, type of product, geolocation, industry, etc. Yet, there are general tips that work for most businesses. With the following features, it is possible to create a high-class shop page.

Improve product images: the better the pictures are, the higher the conversion chances. When shopping online, people usually want to be sure that they are buying the right product. Showing different angles of the product will help close the sale. It’s also advisable to add the store’s logo to boost the brand.

Make sure that product descriptions are impressive: there are two types of descriptions, short and long. Visitors will see the short description while scanning the page. The long version provides detailed information about the product. While the former is meant to capture the customer’s attention, the latter convinces the buyer to purchase the product of interest.

Improve the pricing style: pricing is usually displayed in different fonts. Use larger bold fonts with impressive colors.

Set up an appropriate “related products” section: ensure that products are arranged in the correct categories and have the right tags.

Add an availability countdown: display the available stock and set a sales countdown. This can encourage visitors to take action.

Add a flipbook: a nice-looking flipbook is a great way to highlight one’s products. Make sure that your product pictures look stunning.

Add customer reviews and testimonials: customer reviews help convert sales and keep the client satisfied. By checking the reviews before buying, clients will be able to make better shopping decisions. Thus, there is a higher chance that the client will be satisfied with the purchase. Reviews and testimonials are a great way to inspire trust and build a reputation.

Zoom in on your product images: add a zoom-in feature to your WooCommerce shop page. Thus, visitors will be able to check the product’s smaller details.

Add a product table: a product table is a great tool for improving sales rates. This features different products on one page and allows clients to buy many products from one single screen.

Ending thoughts on how to customize a WooCommerce shop page

When creating an eCommerce site, many users choose WooCommerce. There are many reasons for this choice. This plugin is based on WordPress, one of the most popular platforms for building a website. This integration provides various free and paid themes to use in one’s online store.

Also, WooCommerce allows for multiple integrations, which significantly enhances its possibilities. And the best part is that it doesn’t take a tech genius to use these tools.

Most of the time, it’s possible to create an eCommerce platform with an intuitive interface and a little bit of practice. While coding skills are helpful, they are not mandatory. Page builders, for example, are a great solution for those who lack these skills.

Page builders like Elementor or Divi usually have an intuitive interface, drag-and-drop options, and accessible customization features.

In this context, WooCommerce offers a comprehensive solution for creating and managing an online store. Yet, there are important things to consider. This plugin presents an excellent default WooCommerce shop page, but it doesn’t have a built-in customizing option.

While the default page is outstanding, it may not be suitable for every business or niche. Fortunately, there are other options.

Since a shop page is key for an online store’s success, owners can use different tools to design a tailored solution.

How to customize the WooCommerce shop page? For tech-savvy users, a manual customization is a good option. On the other hand, it is possible to create a superb shop page with the help of a page builder. This option doesn’t require coding knowledge.

Either way, every one of the processes described in this article can be helpful. They all offer the necessary tools to create a user-friendly, intuitive, useful, and attractive shop page.

If you enjoyed reading this article on how to customize the WooCommerce shop page, you should check out this one about the best Furniture WordPress theme examples to choose from.

We also wrote about a few related subjects like minimal WooCommerce theme options, WooCommerce vs Magento, and WooCommerce dropshipping plugin examples.