WooCommerce Wednesdays: The way to customise the WooCommerce store web page


From product pages to your homepage, there are various necessary areas of your WooCommerce retailer. Whereas it might not get the identical consideration as one thing like your checkout, the WooCommerce store web page is essential to expressing your model’s picture and serving to prospects discover the merchandise they’re searching for.

On this put up, we’ll present you many methods to customise the WooCommerce store web page to raised spotlight your small business’ distinctive providing.

What’s the WooCommerce store web page?

The WooCommerce store web page is a default web page that holds an archive of your merchandise. Whenever you set up WooCommerce, the plugin will add a brand new web page with the /store URL.

The web page’s look might be decided by the settings in your WordPress theme.

Most themes characteristic a grid format with all of the merchandise in your catalog. Some will even embody fundamental choices for adjusting the show of the web page. If so, you could find them by going to Theme > Customise. From there, the precise location will rely on the theme that has configured the customizer.

Beneath is an instance of the theme customizer for the OceanWP theme. For the store web page, you could have the choice to indicate merchandise, classes, or each. This content material will seem within the heart of the web page. The remainder of the web page will show the gadgets

WooCommerce has a built-in setting that allows you to outline the store web page. To make use of it, go to WooCommerce > Settings > Merchandise. Within the Normal part, you’ll set the URL on your store web page. By default, the web page is positioned at Store.

Altering this web page is however one of many methods to switch your store web page. We’ll take a look at a number of the different strategies in a while.

Why customise the store web page?

Listed here are a number of the advantages of customizing your Store web page:

Higher website positioning

Enhancing the store web page can assist enhance the general website positioning on your web site. Relying in your theme, the default store web page could have restricted or irrelevant content material. If there may be skinny content material on certainly one of your core pages, the complete web site will seem much less authoritative in Google’s eyes.

By customizing the web page, you’ll be able to be certain that your main archive is filled with high-quality, related content material that greatest displays your retailer’s providing.

Distinctive branding 

With the default store web page, your retailer could seem overly much like different WooCommerce websites. As an alternative of this, you need the web page to align along with your model and the general aesthetic of your retailer.

By customizing the main points for the store web page, you can also make it match the remainder of your web site’s branding and you’ll assist your small business stand out out of your rivals.

Improved buyer expertise

You need the design of the store web page to pique your guests’ curiosity. The store web page may also function a useful gizmo for looking and discovering gadgets. Relying in your theme, the default format could not obtain these goals.

By customizing the store web page, you should use a design that makes it simpler to seek out your merchandise, resulting in a smoother shopping for course of.

Strategies for customizing the store web page

There are a number of methods to method customizing the WooCommerce Store web page. Whenever you design the web page, the quantity and nature of the modifications which you can make will rely on the strategy you employ.

For instance, it’s possible you’ll be solely to vary the association of the merchandise. For others, you’ll be able to modify each facet of the web page, including new options like filters, banners, or fast checkout instruments.

Listed here are a number of the alternative ways you’ll be able to customise the WooCommerce store web page:

Utilizing a WordPress plugin

The primary method to customizing your WooCommerce store web page is to make use of a WordPress plugin. With a plugin, you get extra management over the design of your retailer with out having to dive into the code. Let’s take a look at a few helpful options:


StoreCustomizer enables you to customise the design for varied components of your retailer together with the WooCommerce store web page. You should utilize the plugin to edit or utterly take away present components from the Store web page.

For instance, you’ll be able to change the variety of columns displayed on the web page or you’ll be able to alter the variety of merchandise per row.

StoreCustomizer received’t override your present pages or templates. It really works by including further styling choices to your theme for the particular components that you simply customise with the plugin.

Storefront Blocks

Storefront Blocks is a plugin that offers you management over your most necessary WooCommerce Pages to customise them nevertheless you need. You should utilize the plugin to override the default store web page format decided by your theme through the use of blocks to rearrange present sections or creating new sections with further components

The plugin comes with quite a lot of content material blocks for WooCommerce. A few of these embody:

  • Product Class Block
  • Product Desk Block
  • Product Carousel Block
  • Product Slider Block
  • Sq. Grid Block

Creating a brand new store web page from scratch

For a extra complete method to customizing the store web page, you’ll be able to create a brand new web page from scratch. It will help you add no matter particulars you wish to the web page.

As soon as it’s full, you’ll be able to then assign this web page because the store web page in your WooCommerce settings.

There are a few methods you possibly can go about doing this. To start out, you possibly can create and construct the web page utilizing the native WordPress options. To make use of this easy technique, go to Pages > Add new. You may then give the web page a title and use the Gutenberg Block Editor or HTML editor to design the web page.

Utilizing a web page builder

If you wish to create a brand new store web page from scratch, you may also use a web page builder. This provides you with drag-and-drop performance for setting the format and figuring out what kinds of merchandise to show.

Beneath, we are going to take a look at how you can design the web page utilizing Elementor. It is among the greatest web page builders for creating content material for ecommerce websites. It can enable you create a pretty store web page rapidly.

There are two methods to make use of the app to create a store web page. The primary is to create an archive web page template after which set a situation in Elementor to have it show because the store web page. The opposite choice is to easily create a brand new web page in Elementor after which set it because the store web page within the WooCommerce basic settings.

To create an archive web page template with Elementor, you’ll want the Professional model. Beneath we are going to take a look at how this course of works.

To create a product archive in WooCommerce, go to Templates > Add New. It will open a window to decide on your template kind. Choose Product Archive and provides the template a reputation.

After that, you’ll be taken to the Elementor editor to construct the web page. You can begin utterly from scratch or you’ll be able to mechanically insert pre-made archive blocks. I like to recommend selecting the latter as it’ll enable you design your web page sooner.

As soon as, you’ve added the blocks to the web page, you’ll be able to customise the design by enhancing and including widgets from the left-hand menu. Elementor has a number of WooCommerce widgets which you can add to your pages. These embody:

  • Archive title and outline
  • WooCommerce Breadcrumbs
  • Customized add to cart
  • Archive product
  • Merchandise
  • WooCommerce pages
  • Menu cart
  • Product classes

Whenever you’re completed with the customizations, click on Publish. Elementor will then immediate you to set the situations that decide when the template is used.

Click on Add Situation and set the worth to Embrace. Then, within the dropdown menu choose Store. Alternatively, you should use the template for different classes or you’ll be able to set it to cowl all your product archives.

When you’re performed, click on Save & Shut to finalize the modifications.

Making a standalone web page

The opposite approach to make use of a web page builder like Elementor to customise the store web page is to create a standalone web page in WordPress utilizing the Elementor editor. After you design the web page, you’ll be able to then return to WooCommerce > Settings > Normal to set the brand new store web page.

Customizing the store web page programmatically

Now, let’s take a look at how you can customise the WooCommerce store web page programmatically. It will prevent from needing to any further software program like a web page constructing plugin.

Nevertheless, for this technique to work, you’ll want a bit extra coding information because it requires you to switch your themes recordsdata.

Earlier than you begin, create a toddler theme. It will be certain that you don’t lose any modifications while you replace your theme. Go to your web site’s recordsdata and discover /wp-content/themes/your-theme.

Copy the folder after which paste a reproduction in your themes folder, You’ll want to vary the title of the folder to one thing like yourtheme-child-theme.

Disable the default web page

Earlier than you create the brand new web page, you’ll additionally wish to disable the default store web page in your WooCommerce theme. The particular file that renders the store web page is known as archive-product.php. It’s positioned in your WooCommerce templates folder at WooCommerce > Templates > archive-product.php.

To overwrite the file, copy it to the WooCommerce folder on your youngster theme.

Subsequent, open the archive.product.php file utilizing an built-in growth surroundings (IDE). Within the file, you’ll see varied do_action() capabilities which are used to create the WooCommerce hooks for the store web page.

To disable the store web page, delete the loop liable for displaying merchandise:

if (wc_get_loop_prop('whole')) {
whereas (have_posts()) {
wc_get_template_part('content material', 'product');

When you delete the loop, you’ll have a clean store web page to customise nevertheless you see match. You’ve the flexibility to make further modifications to the file however bear in mind that in the event you take away sure do_action() capabilities, any corresponding shortcodes will now not work throughout the location.

Program the content material 

After you’ve disabled the default store web page, you’ll be able to start programming the content material on your customized web page. The code you add within the textual content editor for the archive-product.php file is what is going to seem on the store web page.

To start out with a clean canvas, create a brand new file, title it archive-product.php and delete the earlier archive file. In case you don’t wish to create the WooCommerce store web page from an empty file, you should use an present file as a template.

To discover a file to make use of as a base, go to the recordsdata on your dad or mum theme and discover the single.php file. Copy it to the WooCommerce folder on your youngster theme. Subsequent, delete the present archive-product.php file and alter the title of the single.php file you’ve simply added to archive-product.php.

Now, you’ll wish to edit the main points in your archive-product.php file to customise your web page. The easiest way to do that is to make use of shortcodes. A number of the shortcodes that you simply would possibly helpful for including content material embody:

  • [products]
  • [best_selling_products]
  • [top_rated_products]
  • [product_table]
  • [recent_products]

Closing ideas on WooCommerce store web page customization

Customizing the WooCommerce store web page can have a big effect in your retailer. By displaying and organizing your merchandise in response to your wants, you improve the probabilities that prospects are capable of finding what they’re searching for when looking your web site. Ultimately end result, is elevated gross sales and extra happy consumers.

The put up WooCommerce Wednesdays: The way to customise the WooCommerce store web page appeared first on GoDaddy Weblog.


Please enter your comment!
Please enter your name here