Book a Call

21 Tips for WooCommerce Website Design

Enjoying this article?
Share it on social media!

The way you layout your WooCommerce website design will help you convert customers. You should take into consideration that people buy and shop in different ways on your site. You have very little time to convince visitors why they should trust and buy from your brand. In this post, we will give suggestion on how to make the most out of the critical seconds you have to entice your customer with these 21 Tips for WooCommerce Website Design.


Tips for WooCommerce Website Design

1) WooCommerce Custom Search Box

Keep the search bar available at all times. Your visitors want an easy way to find exactly what they are looking for without having to scroll around for a place to search. Make sure there is a search tool prominently displayed at every turn.

  • Don't forget about mobile: Most people do not realize that the majority of the site's search sites now is mobile. Make it mobile friendly
  • Filter the results: Have your search be smart. If users type in wood for example. It will pull up all products tagged wood floors.
  • Tools: We recommend using the Product Finder extension from WooCommerce:
  • Be prominent: Have your search bar stand out. Design so that it may have a different accent color for the layout and or button.

To Enhance your WooCommerce Search, try this plugin:

WooCommerce Organized Navigation

2) Organized Navigation

Online shoppers come to your site looking for speed and convenience of shopping. Make navigation as simple but detailed as possible to get them where they need to be. Always place your navigation bars where visitors expect to see them. The standard positions are vertically down the left of the page and horizontally at the top. It’s even better if you can make the horizontal navigation bar remain at the top of the screen as you scroll down the page. You will also need to ensure that your navigation menus will work with any screen size or device. With users shopping from phones, tablets, desktops and a number of other devices, you want the site to react the same and provide the same easy navigation across all platforms.

Navigation Best Practices

  • Categorization is key: When looking at your navigation make sure the way you categorize is understandable to the products or services you offer. You have specialty names that new users do not know what they mean. This could make things frustrating to them because you only have a few seconds to get them to react and move on through the buying process. Having a clear and hierarchical structure is important.
  • Make things sticky: We like to have the main navigation sticky so when there is scrolling. The main links are always viewable. If you have tons of products, you try doing a mega nav with sticky navigation.
  • It ok to have several types of navigation: Horizontal main navigation works most of the time. However, horizontal sometimes fits depending on the amount of information you have. Keep in mind you can have several types of navigation based on different areas of the site. As an example, a top bar above the logo can be considered more customer service and shopping related links and icons, the main navigation can be the key services and or sections of the site, and the footer can have all of the above.

Navigation Mistakes:

  • Non-standard style navigation: The design may feel cool but to an experienced user that is trained. They like to see the same patterns in the user interface because they're there to buy and learn about your product not be impressed on how well you believe your design is. If in doubt and you want to try something different, test and measure with different styles.
  • Using generic links: If you're selling product on your site and you only have "Products" on the main nav. You're selling yourself short a bit because the user needs to find what you're selling. Try a small top navigation above the logo and then the main navigation with either product categories or the products themselves.
  • Don't miss the breadcrumb: One of the simplest and most effective tools for usability and SEO are left out sites.

WooCommerce Personalize Using Browsing History

3) Related Products, Up-sells, and Cross-sells

Personalizing the experience of your visitors gives them a sense that you are paying attention to their needs and wants. Having related products show on the product page. You may also show them what others have purchased in relation to the items they view.

Up-sells: This could be a large quantity, better version, or the same product bundled with another which is displayed in the buying experience to push a higher sale.

Related Products: You can have products appear in the product info page, but they are products that are meant to be purchased in addition to the one that the customer is viewing.

Cross-sell: You can have items appear on the product page and in the shopping cart to help encourage an impulse to buy.

Check out built in features of WooCommerce:

Here is a great extension for Upselling and Cross Selling:

WooCommerce recently viewed products code

You can also use paid plugins to achieve certain features like YITH

Save & Share Cart for WooCommerce

4) Make Shopping Carts Persistent

Saving the Shopping Cart:

Establishing a long-term cookie when your visitors are shopping so they will have the ability to come back at a later time and pick up where they left off. Life is full of interruptions and you don’t want to lose a sale simply because they forgot what was in their cart at their last visit. They can go straight to checkout to complete the order or with a handy search bar in view, and images of other possible interests in view they may decide to stay and shop a little longer.



WooCommerce Cookies

WooCommerce Cookies

WooCommerce makes three different types of cookies and already has this built in. The first two cookies contain information about the cart as a whole and helps WooCommerce know when the cart data changes. The final cookie (wp_woocommerce_session_) contains a unique code for each customer so that it knows where to find the cart data in the database for each customer.

  • woocommerce_cart_hash
  • woocommerce_items_in_cart
  • wp_woocommerce_session_

WooCommerce Wishlists

Wish Lists:

You may also consider adding Wish Lists to the menu. Wish lists will save an item for the shopper without removing it from inventory on your site. Using the shopping cart as a long term wish list can cause problems with your inventory. Presenting an alternative can alleviate some of this.

WooCommerce Wishlist

Try the WooCommerce Wishlists Plugin:

5) Display Prominently Your Customer Service Links and Phone Number

All online shoppers want to feel safe and secure on your site. Your credentials may be strong but a shopper viewing your site for the first time will be looking for signs that you are indeed credible. The best way to introduce yourself to new customers is to be transparent about your contact information. Displaying your phone number and customer service links in a prominent place on the site will help to put them at ease and reassure them that their credit card information is safe with you.

6) Name Drop Partners and Associates of Prominence

In establishing your credibility nothing is off limits. If you have partners or associates that your guests will recognize, drop those names. If you can show that you are associated with well established and successful companies they are more likely to feel safe shopping on your site. We are certified WooCommerce Experts and proud of it!

WooCommerce - Rotating Carousels Are Out

7) Rotating Carousels Are Out

Carousels have their positive points but they are not SEO friendly. They do help you to show more products and promotions, but they slow your site down and users find them annoying. They move too fast for any real chance to process what is in them. If you must use a carousel, incorporate one that will stop the autorotation when the cursor hovers over it. This gives the customer the opportunity to see the item without actually going to the page with a full description. The best practice is just using static images. Your visitors aren’t interested in bells and whistles. They want great products at the best possible price.

Make Your Sale Section Pop

8) Make Your Sale Section Pop

Make them feel hungry. The majority of online shoppers will not buy a product until it goes on sale. Prominently display a link to your discounted products so these shoppers will have a direct route to the items they seek. Use a different color for the link or use lettering that draws attention. Bargain shoppers are a great audience to target because they like to tell others what they found at an amazing price. That is free advertising after the sale.

Dedicated Area in Main Navigation:

Site Wide Sale:

On Product Lists:

woocommerce product lists example


WooCommerce Free Shipping Example

9) Flaunt Free Shipping

Announcing your free shipping in a prominent place on the homepage will help to cut way down on the number of abandoned shopping carts you encounter.Many shoppers will fill their cart only to leave it when they see the insanely high shipping charges. Some will look for your shipping policy before ordering, so make sure you have it in a good position on your page. You will want to offer other shipping options for those customers wanting faster delivery as well.

woocommerce free shipping stats

Retail study: 9 out of 10 consumers say free shipping No. 1 incentive to shop online.

Woocommerce Sales Page Example

10) Bring Money Saving Options Together on a Sales Page

Provide a link from your homepage to an area devoted to saving money. This includes the free shipping, coupon codes, loyalty points, discounts and any freebies you may offer. You may find that this is the most visited area of your site. The bargain hunters will most likely give you bookmark love for that alone.

Add a dedicated sales page: Popular ideas could be the deal of the month/week/day or just creating a page for a one-time holiday special.


11) Use A Modal Box

Avoid clutter on your WooCommerce homepage by using a modal window. Showcase a message of importance without making it a part of the homepage. This frees up space on your storefront for more products. These boxes are only helpful if used properly. They have a bad reputation for containing advertising that was nothing more than annoying. Ensure that you do not overuse them and make the button to close the box readily available. Make sure you have a cookie in place so that a user will not see more than one box per visit and they will not see a box at every visit.

Live Chat Software

12) Live Chat Support

Live chat is a great way to immediately address questions, concerns or general doubt that a customer may be having on your WooCommerce store. Very few shoppers will actually call a customer support line and many will leave in frustration. Live chat software is a worthwhile investment to stop buyers doubt in its tracks. Customers get the feeling of a personal touch. Live chat can provide efficient customer service and prevent lost sales.

13) Excessive Trust Badges Throw Red Flags

Trust badges are a good thing but excessive use of them can leave them feeling as though they have a false sense of security. Limit the number of badges you use and make sure they are widely recognized. Overuse can undermine the comfort they should be projecting.

14) Test Your WooComerce Product and Category Page

Running A/B tests is a great way to decide the most effective way to display your products. This provides two different displays to your customers and over time gives statistics on which works best for your site. Experimenting with A/B testing can greatly improve the experience for the visitor as well as your bottom line.

A couple tools we use with our clients: Visual Web Optimizer and Hot Jar.

See some case studies here:

15) Hook Visitors With Scarcity

Displaying messages that convey urgency is one way to hook visitors into a sale. If you show them that there are only limited quantities of an item left or make them feel as though their size may disappear soon, they are more likely to go ahead and purchase the item before it’s too late. The trick is to make these messages subtle so they feel like you are doing them a favor when you are ultimately urging them to buy now rather than later or not at all.

Here is a free plugin to try out:

16) It's Ok to Scroll

Clients sometimes mention about wanting items above the fold. We respond by asking "Which fold are you referring too?". With so many different size monitors scrolling has become irrelevant. Mobile has also completely changed this game by dominating the statistics making desktops a very small percentage when trying to target a fold. Tony Haile from Chartbeat has posted numerous amounts of data to back this up. Do not sell yourself short, give your visitors more on the homepage to support SEO, usability, and merchandising of your products

Check out more statistics here at

17) Encourage Them to Share

Give shoppers plenty of opportunities to share your products with friends and family. Make sharing buttons available as well as directly asking them to share. This not only gets your product in front of more people but also your brand and a link to your site. Providing opportunities to share will greatly improve your site traffic and conversions.

18) Install a Heatmap on Your WooCommerce Homepage

Don't take our word for things. Analyze your homepage before making any change to understand where your click saturation, visitor scrolling, and interest is per channel (Bing, Google, Facebook, Etc.). Keep in mind your best-converting channel can be entirely different than your least. You want to make sure you understand first what is going on with your site prior to doing any changes.

19) Frequently Asked Questions

There are die hard FAQs users out there looking for your Frequently Asked Questions. Provide a link and answer questions as if you were explaining things to a 5-year-old. Information on shipping, warranty, and returns should be included. Also, add questions and answers that you receive on a regular basis to keep your FAQs up to date. This also saves you from having to answer the same questions over and over again.

A great example is at Weber:

WooCommerce Site Announce Your Press Coverage

20) Announce Your Press Coverage

If you’ve been mentioned in the news or have press releases available, include them on the site. Display the logos of the media outlets to be readily recognized by visitors. Most will never read the press release but having it there lends credibility that will foster trust in your site. If you do have media attention, link the logos to any articles about your company.

Check out the FLYTE homepage:

WooCommerce Google Reviews

21) Incorporate User Feedback

User feedback can be a useful tool in building credibility with your customers. Product reviews, little quotes, thank-you notes or pictures of customers with your product can increase your sales dramatically. You can place these with your product descriptions or in sidebars throughout the site.

To display reviews about your business:

We like using rich plugins for business listings -

Google Reviews Plugin

To get reviews:

We Recommend trying out: WooCommerce Product Review Pro

Using these WooCommerce Web Design tips for your homepage will go a long way toward improving the user experience of your customers while solidifying your credibility and landing more sales. Placing all the vital information where it belongs and displaying the right products can dramatically increase your conversions. Social media shares and good product reviews will improve SEO and drive traffic. Bright Vessel is a certified WooCommerce Expert which can help you build, promote, and improve your storefront. Contact us today.

Enjoyed this article?
Share it on social media!

Leave a Reply

Check out another blog post!

Back to all Blog posts

Let’s work together!

© 2024 Bright Vessel. All rights reserved.
Malcare WordPress Security