How to Build a Gorgeous WooCommerce Shop Web page (In 5 Steps)

How to Build a Gorgeous WooCommerce Shop Web page (In 5 Steps)
Comments Off on How to Build a Gorgeous WooCommerce Shop Web page (In 5 Steps), 15/09/2022, by , in Wordpress

Searching for the easiest way to personalize the WooCommerce shop website page? 🤔

WordPress gives a wide wide range of blocks to aid you develop qualified internet websites. If you use WooCommerce, you also get access to dedicated WooCommerce blocks that you can use for your on the internet retailer.

Thus, you may be questioning how to use these components to construct a WooCommerce store web page that drives conversions.

Thankfully, the system is really simple. Working with these blocks, WooCommerce allows you display your solutions in various ways. Also, you can increase filters and search features to make it a lot easier for consumers to look through your store.

👉 In this posting, we’ll show you how to create a gorgeous WooCommerce store web page using blocks. You can adhere to our pointers and decide on which blocks you want to use, relying on your wants. Let’s get begun!

📚 Desk of contents:

Location the All Items blockAdd Highlighted Item and/or Handpicked Products blocksEnable product lookup on the store pageUse the Showcased Group blocksAdd an choice to filter merchandise by price tag

How to personalize the WooCommerce shop webpage with blocks

To get started, you will want to open the editor for your store’s Shop web site. Then, stick to these guidelines to customize its written content.

1. Area the All Solutions block

Shop webpages arrive in all styles and dimensions. In an on the net store, this web page typically shows all the solutions you have for sale. Buyers can click on on particular person merchandise to open up their respective product or service webpages or add them to their carts right (if the store lets for it):

A WooCommerce shop page

With WordPress and WooCommerce, you have complete regulate about what aspects to involve in your store website page. The appear and sense of this web page will rely on the concept you are applying and how you configure it.

WooCommerce instantly sets up a shop webpage when you start off utilizing the plugin, so you can go ahead and test out what yours appears to be like like. When you’re completely ready to edit it, go to Web pages and find the Store possibility.

Open up this site in the Block Editor, and you must see some thing like this:

The WooCommerce All Products block

By default, the Shop web site features the All Solutions block and a header. If you really do not see this block, you can add it to the site by clicking on the as well as (+) sign and picking it from the list of alternatives:

Adding the All Products block

The All Solutions block shows a grid that includes all of your shop’s products, requested from new to old. To adjust the display screen order for your items, click on the block and go to the settings panel on the proper. Then, navigate to the Information Options segment and pick your choice from the Buy Merchandise By menu:

Configuring the All Products block

In the meantime, below Format Configurations, you can pick out the range of columns and rows that you want to exhibit in the product or service grid. Come to feel cost-free to examine the other possibilities out there with this block.

2. Incorporate Featured Item and/or Handpicked Merchandise blocks

A lot of store web pages emphasize specific solutions. These are usually merchandise that store house owners want to draw focus to, this kind of as new or discounted inventory or recently added merchandise. WooCommerce arrives with a Featured Solution block that permits you to showcase any product in your retail outlet.

After you location this block on your page, you are going to need to have to decide on the merchandise that you want to attribute and simply click on Accomplished:

Selecting a featured product in WooCommerce

Then, WooCommerce will exhibit the product’s graphic, identify, rate, description, and a contact-to-motion (CTA). The block ought to appear a thing like this:

Selecting a featured product in WooCommerce

You can then customise this block to your liking. For occasion, you may transform the picture and modify the CTA button.

The downside of incorporating the Showcased Product block to your WooCommerce store webpage is that it can distract customers from the rest of your products and solutions. To counter this, we advise working with columns to screen various featured products facet by side:

Displaying multiple featured products using columns

An different to the Highlighted Products block is the Hand-Picked Merchandise selection. This block enables you to choose numerous items and display screen them side by side. It makes use of the exact model as the All Merchandise block:

The Hand-Picked products block

Both of those the Highlighted Goods and Hand-Picked Items blocks fulfill comparable uses. Preferably, you’ll choose a single of the two possibilities so as not to overwhelm site visitors with too several featured objects. We also endorse putting these blocks at the best of the website page, so users can’t pass up them.

3. Permit products look for on the store website page

If you have a shop with a huge product catalog, you are going to want to present a search characteristic. This way, buyers can seem for any particular items they had in brain, without having acquiring to look through by means of the total store.

When adding a look for block to your shop page, you are going to want to glimpse for the Merchandise Search possibility, not the default WordPress look for block. Merchandise Search will restrict the results to WooCommerce goods, although the other research block will incorporate all other webpages on your web page.

Here’s what the WooCommerce look for perform seems like:

Adding a search function in WooCommerce shop page.

Maintain in thoughts that the Product or service Search block does not work in the editor, so you will want to examination it on the entrance finish. On top of that, the block doesn’t give autocomplete features, so users will want to variety a total question and load a new webpage to see the results.

4. Use the Highlighted Category blocks

Apart from pointing customers to hand-picked products, you could also want to highlight distinct merchandise categories. This can be specifically practical if you provide various sorts of solutions, as it will permit users to appear for objects in a unique section.

Get started by incorporating the Highlighted Class block to your WooCommerce store webpage. Then, decide on the merchandise group you want to spotlight and click on on Finished:

The Featured Category block in WooCommerce

Heres’s what the Featured Group block will search like:

A featured category block in WooCommerce shop page.

The block allows you alter the color of the track record and textual content, but it doesn’t provide a good deal of additional customization possibilities. Additionally, considering that the block normally takes up a whole lot of space, we advise putting several showcased categories facet by aspect using columns:

Displaying multiple featured product categories in WooCommerce shop page.

Due to the fact the Showcased Product or service Class block is incredibly basic, we recommend you seem into plugins these as Otter Blocks for more customization.

With Otter Blocks, you get to modify WooCommerce blocks by introducing animations and other visibility settings:

Configuring Otter Blocks animations in WooCommerce.

In addition, Otter Blocks provides a selection of new blocks that you can use on your on the internet store. These consist of selections these kinds of as pop-ups (which are best for gathering email signups) and product opinions.

5. Add an alternative to filter merchandise by rate

So far, your retail store has a search bar, hand-picked merchandise, showcased groups, and your full product catalog. All that you are lacking is a way for people to filter goods.

The Filter Products and solutions by Value block permits customers to do just that. The block displays a slider that lets consumers set the minimum amount and highest charges for the merchandise they want to see:

The Filter by Price block in WooCommerce shop page.

The price tag values aren’t editable – they count on the rates of your goods. Guests can possibly style in the values they want or use the slider to modify them.

When you make changes to the selling price slider, the All Merchandise block will update to exhibit the solutions that satisfy the standards. This comes about without having customers needing to reload the page.

As far as placement goes, we advocate that you add the Filter Products and solutions by Price tag block above your solution catalog. That way, end users will see it as they scroll down the web page.

You can also enable end users to filter items by measurement, shade, and other capabilities. The Filter Items by Attribute block lets you browse via merchandise that meet up with a picked attribute, centered on the selections readily available on your retail store.

And that is quite a lot it! 🤩 When you are finished, make positive to help save your alterations and your new shop page will start off doing work correct away.

Set up your WooCommerce store web site nowadays 🚀

An helpful WooCommerce shop web site must involve a large amount of beneficial things. The catalog is at the main of the web page, but you can also involve a research bar, solution filters, featured products, and more.

Your final goal is to build a site that maximizes conversions by providing end users all the selections they are wanting for in a layout and an buy that tends to make sense.

To recap, here’s how to make a wonderful WooCommerce shop webpage with blocks:

Place the All Products block.Increase Highlighted Item and/or Hand-picked Products blocks.Allow products search on the shop web page.Use the Featured Group block.Help customers to filter products and solutions by price.

At the time you set up 🔧 your WooCommerce shop web page, you can turn your attention to your one solution internet pages. To that close, make guaranteed to examine out our guide 👉 on how to improve the WooCommerce product web site.

Do you have any thoughts about how to make a WooCommerce store web site working with blocks? Enable us know in the reviews portion beneath!

No cost guidebook
5 Important Strategies to Pace Up Your WordPress Web-site
Cut down your loading time by even 50-80% just by pursuing uncomplicated ideas.

About Vikram Rout

Vikram Rout has been a blogger, digital marketer and an SEO expert at Pixxelznet.com, one of the fastest growing custom design crowdsourcing platforms. Over the years, he has been helping small businesses and startups improve website design and SEO strategy, content marketing and user experience. You can engage with him on here.