Last updated – March 4, 2022
Looking for ways to customize your Shop page? You’ve arrived at the correct location. The Shop page is one of the most significant pages in your store since it is where you present your items. As a result, it should have a visually appealing and user-friendly design.
The Shop page is a component of your WooCommerce store that is created by default upon installing and activating WooCommerce. In this tutorial, you’ll discover ways to personalize the WooCommerce Shop page.
Why Should You Customize Your WooCommerce Shop Page?
According to WooCommerce, a store page is “a placeholder for a post type archive for items.” Simply said, it’s the page on which you present your items, and it’s critical to your company’s success. Let’s take a look at why you should personalize the WooCommerce Shop page before we get into how you can do it.
Consider going into a store to make a purchase. What factors influence your buying experience and satisfaction? The way the items are organized and how easy it is to find what you’re looking for are two of the most crucial factors.
The Internet has made the globe a more connected place. Physical storefronts have given way to internet retailers. By the year 2040, it is predicted that 95 percent of all purchases would be made online.
People prefer to purchase online since it is more convenient and faster (or at least it should be). As a result, how you organize your items on your WooCommerce store page and how you present them to your clients might make a significant impact. Not only in terms of conversions and money, but also in terms of your store’s reputation.
Content Table
- Creating a WooCommerce Shop Page
- Designing a WooCommerce Shop Page with Gutenberg Blocks
- Designing a WooCommerce Shop Page using Shortcode
- Changing the ‘Shop’ page into your Homepage
- Customizing the Shop page with Storefront
- Customizing the Shop Page of Your WooCommerce Store
- Storefront Powerpack
- Storefront Child themes
- Setting up the website homepage with featured products using a Storefront Template
- Customizing the WooCommerce shop page using Elementor
Creating a WooCommerce Shop Page
When you install WooCommerce, it provides important eCommerce pages for you, such as Shop, Cart, Checkout, My Account, and Privacy Policy. Each of these pages has a certain purpose on your website.
The checkout page, for instance, offers payment choices, the cart page displays things added to the basket, and the store page displays all of your products. As a result, when you add products to your website, they are instantly moved to the ‘Shop’ page.
While this is useful, you may also make a custom page as your store page. Follow these steps to accomplish it:
- Hover over WooCommerce in your dashboard and select ‘Settings.’
- Stay on the ‘General’ sub-tab after switching to the ‘Products’ tab.
- The first option gives you the ability to designate your Shop page.
- The drop-down menu allows you to select a page.
You may also change the functionality of your cart and add a placeholder picture. The ‘Add to cart behavior’ area contains two options just below the ‘Shop’ page settings. If you want your customers to be routed to the cart page when they add an item to the cart, enable the ‘Redirect to the cart page after successful addition’ option. If you wish to offer the ‘Add to Cart’ option to shop archive pages, keep the ‘Enable AJAX add to cart buttons on archives’ option enabled.
Designing a WooCommerce Shop Page with Gutenberg Blocks
Instead of the conventional WordPress editor, the WordPress 5.0 version introduces the Gutenberg Editor. This is a page customizer that allows you to use a variety of blocks to customize your pages. You can rapidly set together your Shop page using WooCommerce and the Block Editor. Now let’s go through how to create a Shop page in the Block Editor with those goods step by step. The WooCommerce plugin adds additional blocks to the WordPress Gutenberg Editor.
Step 1: Create the Shop Page
As discussed above, when you install WooCommerce, it creates a Shop page for you. Pages > Shop is where you’ll find it. You’ll be directed to the WordPress Gutenberg Block Editor if you click the edit link beneath the Shop page name.
Step 2: Create a Layout with the Block Editor
Now that the page is up and running on your WordPress site, it’s time to fill it with content! This is the point at which your page begins to take shape.
When looking for Blocks in the Block Editor, keep in mind that WooCommerce blocks have their own area! These can be used to display various shop-related content categories. Simply pick one and place it on your design. These Blocks are essential for creating a professional Shop page using WooCommerce and Gutenberg. You can keep adding the sedated blocks below each other depending on the amount of content you want to add to your Shop page. For example, you can take the ‘featured products’ block and drag it to the top of the page as seen below.
Once you place the block, it asks you to select the featured product from your created products. Let’s select ‘Cap’ for this example.
Here is how the Shop page looks after we added the ‘featured image’ block.
Step 3: Personalize Your Design
It’s time to modify each Block now that you’ve put up the structure of your Shop page with Gutenberg Blocks. Certain settings may need to be changed depending on how you want your Shop page to function. This segment may be rushed through, or you can take your time and really explore everything each Block has to offer!
Explore the Block settings that display on the right-hand section by clicking on each Block you created. Use the “Preview” button in the upper right-hand corner of the page if you’re not sure how the final outcome of a configuration will look.
Here is a preview of my test ‘shop’ page
Step 4: Check Your Work and Add the Finishing Touches
Now it’s time to save and test the shop to ensure it’s up and running. Select the “Publish” button in the top right-hand corner of the screen to save your work. Don’t worry, your site visitors won’t be able to see the page till later. Add “/shop” after the URL in the front-end of your website. Your store should now be visible in your browser.
Examine the Website and test the filter and sort tools along with product links to see if they function properly. This is to ensure that the items are shown accurately.
Now that we have understood how to use the Gutenberg Blocks customizer, let’s move on to shortcodes.
Designing a WooCommerce Shop Page using Shortcodes
A shortcode is a tiny piece of code that performs a specific purpose on your website and is represented by brackets like [ ]. It may be placed almost anywhere on your website, article, or other material, and it will add a certain function to it. You may utilize shortcodes to display galleries, products, and other content.
The shortcode for adding products to your Shop page is one of the most important ones. The shortcode is in the format of the word encased in brackets, for example
. You can add variations to the shortcode in WordPress versions above 3.2 such as , . To get an in-depth understanding of shortcodes, check out the ‘A complete guide to WooCommerce shortcodes’ article.
If you use the WordPress 5.0 and above version with the Gutenberg Block Editor, then you can just drag and drop a shortcode block anywhere you need and enter a shortcode in it.
Below, you can see how the
shortcode appears on the Website’s frontend.
Changing the ‘Shop’ page into your Homepage
You’ve created a WooCommerce store page, which is a location on your website where customers can explore and purchase things. However, your homepage has not yet been switched to the store page. This implies that when someone searches for your website’s name, they’ll end up on your homepage. They’ll have to utilize the navigation menu to get to the products page from there.
A psychological characteristic known as “decision avoidance,” which is the inclination of individuals to avoid making a decision that takes too long, adds to the pressure.
Decision avoidance on a homepage entails “bouncing” by quitting the page or pressing the back button. To avoid this, the first objective of your homepage should be to persuade potential consumers to stay by making navigation simple and showcasing items on the home page, or in other words, making the homepage appealing to potential customers.
Shopping on the internet should never be inconvenient. Set your store page as your homepage to make your shopper’s life simpler. Here’s how to do it:
- Hover over ‘Settings’ in your WordPress dashboard and choose ‘Reading.’
- Switch to ‘A static page’ instead of ‘Your newest posts’ in the homepage display settings.
- Select your ‘Shop’ page that you wish to be featured as your homepage from the drop-down menu next to ‘Homepage.’
The URL slug (for example, www.wooshop.com/shop) for your store page will vanish after this step, causing the ‘.com’ or’.in’ version of your website link will lead you straight to the Shop page.
You can also achieve the same by going to Appearance > Customize > Homepage Settings. Below, you can see a visual example of the same.
Customizing the shop page with Storefront
Choosing a theme, whether you’re new to WooCommerce or just want a change, may be tough. After all, there are hundreds of thousands to pick from. WooCommerce Storefront is by far the most popular of all the themes available today, owing to the fact that it was built by the WooCommerce developers themselves. You’ll learn more about Storefront and why it’s still one of the finest solutions available.
The WordPress dashboard is the quickest way to install Storefront.
- To add a new theme, go to Appearance > Themes > Add New.
- In the search box, type ‘storefront’ and press enter.
- Hover your mouse over the screenshot of the Storefront.
- Select the ‘Install’ option.
- Activate the theme in the same way you would any other WordPress theme.
You can start setting up your store with Storefront by going to the WordPress Dashboard > Appearance > Storefront. Once you click ‘Let’s go’, a guided tour starts on how to use Storefront in detail. If you wish to skip the tour, we can help you out by giving a gist of how it can be done.
After installing and activating the WooCommerce Storefront theme, you’ll be prompted to install and activate WooCommerce. Once you have completed the installation and activation of both, we can continue to customize your Shop page.
The Storefront theme by itself does not add much of a customization capability to your Shop page. It does the basic work of changing the layout of the Shop page (or any specific page) along with adding the ability to customize certain aspects such as the product catalog as shown in the next section.
Customizing the Shop Page of Your WooCommerce Store
Apart from these useful blocks, WooCommerce also adds an extra layer of adjustments to the store page via the ‘Appearance’ option in WordPress. You may control the number of goods on the store page, the size of picture thumbnails, and more with these adjustments.
Take the following steps:
- In your dashboard, hover over ‘Appearance’ and select ‘Customize.’
- From the list of customizable website elements, choose ‘WooCommerce.’ Then select ‘Product Catalog’ from the drop-down menu.
- Select whether you want your store page to display items, categories, or both from the first drop-down menu.
- Select how you want your goods on the store page to be sorted using the third drop-down menu: by name, popularity, rating, or price.
- The ‘products per row’ and ‘rows per page’ options allow you to specify the number of goods per row and rows per page for your store page. These two choices combine to allow you to increase or decrease the amount of goods shown in your catalog.
- Return to the previous page and choose ‘Product Images.’
- You may change the size and aspect ratio of your product thumbnails in this section.
To gain the most out of Storefront and get into further customization of the Shop page, you can utilize the Storefront Powerpack extension or one of the many available child themes. Let’s have a brief look at each of the add-on bundles.
Storefront Powerpack
The Storefront Powerpack plugin provides you creative control over your Storefront theme’s aesthetic and layout settings. To install the Powerpack extension, follow these steps:
- From your WooCommerce account, download the Storefront Powerpack.zip file.
- Go to WordPress Admin > Plugins > Add New and upload the plugin file you downloaded using Choose File.
- Install and activate the extension.
Storefront Powerpack combines with the WordPress Customizer. This creates a new menu called Powerpack right above the default menus.
- Select Appearance > Customize from the drop-down menu.
- When you choose Powerpack, a new menu will appear.
We will give you a brief of what each of the above drop-downs accomplish:
- Designer – It allows you to click on any section in the page and customize the design of the element including font type, color, size, style, etc.
- Layout – You may adjust the page width and employ a content frame in the layout settings.
- Checkout – Allows you to customize the positioning and layout of the checkout menu.
- Header – You may use the Header Customizer to toggle and rearrange the page header menu components.
- Footer – On devices with smaller displays, you can activate or hide the footer bar.
- Homepage – These options only apply to pages that use the homepage template.
- Product details – You may modify the layout and adjust any part of the product page using the settings.
- Messages – The background/text colors used in WooCommerce informational messages may be customized using settings.
- Shop – Settings allow you to personalize and manage features on your Shop page.
The Storefront Powerpack extension, as you can see above, adds an extra level of features to the regular Storefront theme and helps personalize each of the default pages created by WooCommerce to match your brand identity. The Storefront Powerpack extension costs $59 and is worth every penny as it is an integral component to design the perfect Shop page.
Storefront Child themes
A child theme is a layer that sits on top of the parent theme and allows you to make changes without having to start from scratch. There are two main reasons why children’s themes are used. Storefront offers 14 child themes to customize your store above and beyond the default layout. Checkout 14 Best WooCommerce Storefront Child Themes (with Video) for a thorough explanation on what each of the child themes brings to the table.
You can also create child themes from scratch to suit specific needs. Go through this in-depth guide on How to Create WooCommerce Storefront Child Theme.
You can download a child theme by going to your WooCommerce account > Theme Store and downloading the theme you desire. Once you have downloaded the folder, you can install it by uploading the zip file of your child theme folder to your site by accessing the WordPress Dashboard > Appearance > Themes > Add New section.
Once you have completed customizing up your Shop page, click Publish. If you want to add ‘featured’, or the ‘latest products’ to your homepage via Storefront, check the next section.
Setting up the website homepage with featured products using a Storefront Template
Storefront adds two more page designs – Homepage and Full width – in addition to the normal WooCommerce pages. The Homepage design is an excellent approach to showcase your items, since it provides customers with an overview of your products and product categories as soon as they enter your store.
As soon as customers arrive at your website, it provides them with an overview of your new and featured items and product categories. Follow these steps to create a Homepage and apply the homepage template to that page.
- Step 1: Go to WordPress Dashboard > Pages and make a new page called ‘Home’.
- Step 2: Add some material that you’d like your visitors to see on a homepage, like background images and text.
- Step 3: Once you publish the page, go to ‘Quick Edit’ under the page you just created.
- Step 4: Click on ‘Parent’ and select ‘Main page’ from the drop-down.
- Step 5: Select “Homepage” from the “Template” drop-down menu.
When you set the ‘Homepage’ template to a specific page, it will automatically display the most recent and highlighted products.
Customizing the WooCommerce shop page using Elementor
Elementor is one of the best block builders, in regard to features and ease of use. It lets you create, tweak, and furnish any page on your website. If that isn’t enough, you can also design custom menus and take use of a large range of useful add-ons and themes. With WooCommerce with Elementor, you can create professional-looking Shop and Business pages for a fraction of the cost and time.
To gain the most out of it we recommend you to get the pro version of Elementor as it provides important tools needed to build a professional looking Shop page. To use Elementor to make modifications to the WooCommerce Shop page, you must first build a product archive. You may do so by going to Templates > Add New and selecting Product Archive as the type. You can start with an empty page or pick a block from the supplied templates.
Furthermore, you have a few WooCommerce and archive-specific widgets that may help with Shop page customization in addition to the standard Elementor page elements:
- Archive Title
- Archive Products
- Archive Description
- Products
- WooCommerce Breadcrumbs
- Custom Add to Cart
- WooCommerce Pages
- Product Categories
- Menu Cart
Make any adjustments you want, but the most crucial step is when you click Publish. You’ll need to choose where this product archive will appear on your site from the display choices that appear.
Keep in mind that you’ll need Elementor Pro to develop a product archive and Shop page for your WooCommerce store, as it provides the necessary blocks for a Shop page, that you will not have access to with the free version.
Elementor Kits
You also have the option to create and customize your ecommerce store to reflect your brand with a template kit. Create a conversion-focused website with complete control over everything from the color scheme to the content.
Navigate to the WordPress Panel > Templates > Kit library to access the Kit library. You may then select the one that best meets your requirements. Kits can be entirely customized once they’ve been imported.
To use the kit, click the Apply Kit button on the top right-hand side of the page.
Choose the material that you want to import. You may keep everything toggled or merely import portions of the package. Once you’ve finished, go to the bottom of your screen and click the green Next button.
Your request will now be processed by the importer. This page should not be closed or refreshed until it is finished. If your website already includes Theme Builder templates, you’ll be prompted to select which ones you’d like to override. Unselected templates will still be imported, but they will not be displayed.
You’ll receive a comprehensive list of all imported material after the import is finished. You may now go back to your dashboard and look at your content and customize it as you normally would, using the Elementor block builder. Below is an example of a shop page made using an Elementor Kit.
Elementor Pro comes with a plethora of useful functions, including:
- There are more than 60 premium widgets and 300 pro page designs to choose from.
- WooCommerce integration is complete, including a WooCommerce builder and WooCommerce widgets.
- Custom pop-up generators to improve your website’s lead generation
- There are over ten full website demos/templates to pick from.
If you’re thinking about purchasing Elementor Pro, we strongly advise you to do so. Pricing for Elementor pro is $49 annually for a single site.
Checkout Complete Elementor Page Builder Tutorial (with Video) for an in-detail understanding of how to use Elementor to design your WooCommerce Store page.
Conclusion
Overall, the store page’s design and how you present your items may have a significant influence on your conversions. The shop page in WooCommerce is pre-built, and while there are some choices to change its look, they’re restricted.
Using one or all of the above approaches mentioned in this post to customize it will help you stand out from the crowd. Furthermore, it will better represent your company and demonstrate professionalism to your consumers.