How To Build A Truly Custom WooCommerce Store

   Agnes Bury

How to

November 2, 2021
3

Have you noticed how most of WooCommerce stores are very similar? Sure, you can adjust some styling and move things around a bit, but it’s hard to extend them with advanced features. With Toolset, you can not only design custom WooCommerce layouts but also add unique custom features – no coding required.

If you look at any major retail store, you will see a lot of features that you don’t see in typical WooCommerce stores. For example, here’s a typical product page on Amazon.

An example of a product on the Amazon store with highlighted custom elements

As you can see, it has a number of customizations that you cannot easily add to a WooCommerce shop:

  • Custom fields based on the article’s category
  • Upsell items
  • Special custom fields displayed conditionally
  • Links to share on social media
  • Related products

And herein lies the power of creating a WooCommerce store with Toolset. Instead of being boxed in by the platform, add any custom features you need.

Inspiration For Custom Store Features

Here are some examples of popular custom features that you can add to your online store using Toolset.

Add Custom Elements to Single-product Pages

Let’s continue straight from the Amazon example and look at an example of a single-product page built using Toolset.

Custom elements on a single Product page created with Toolset

As you can see, you can add virtually any custom element to your Product pages.

How you can do it with Toolset:

Add Custom Search and Filtering to Your Shop Pages

Every good store needs a custom search with filters that allow clients to easily find products they’re looking for. With Toolset, you can create search filters based on your Product custom fields, taxonomies, and even post relationships.

Custom product search with filters based on custom fields and taxonomies

How you can do it with Toolset:

Add Customer Questions and Answers Per Product

Another popular feature you’ve probably seen on big online stores is the “Customer Questions and Answers” section when viewing a product.

Custom per-product “Questions & Answers” section

How you could do it with Toolset:

Display Upsells, and Cross-sells

Displaying Upsells and Cross-sells helps visitors find other products that might interest them and also help the store owner sell more products.

Upsells and Cross-sells items displayed using Toolset

How you can do it with Toolset:

  • Edit the Content Template for displaying single Products
  • Insert a View block, select it to display Products, and then select the cross-sell or upsell option.

Display Content Using Conditional Blocks

Displaying custom content conditionally looks simple but can be an extremely powerful tool for an online store. For example, you could conditionally display different special offers only for Products that have a certain value for a certain field.

Conditionally displaying a special offer only if the current product has value for the specific custom field

How you can do it with Toolset:

Connect Any Post Type to Products Using Post Relationships

You can connect Products to any other post type using Toolset post relationships. This is great because you can promote products through different types of content, like posts and news articles.

In our example, we have custom Outfit posts that show a nice combination of different products as fashion inspiration. When visitors read these posts, they can see the products and go get them in the store immediately. And also, when they are browsing a certain product, they also see links to “outfit” posts that feature that item.

Product pages list related Outfit posts

Custom Outfit posts list related Products

How you can do it with Toolset:

  • Create the custom post type you need (i.e. Outfits).
  • Use Toolset post relationships to connect Outfits with WooCommerce Products.
  • Create a Content Template for displaying Outfits and insert a View that displays all products related to the current Outfit post.

Use Different Templates for Specific Products

You can create additional templates and assign them only to specific Products. For example, you might use a different template for displaying Products that are out of stock.

Template for displaying in-stock items

Template for displaying out-of-stock items

How you can do it with Toolset:

Use Different Archives for Specific Product Categories

Similar to templates, you can create different archives for displaying WooCommerce Products belonging to different product categories. For example, you might want to display the list of heels shoes differently than the list of bags.

Shop page for heels

Shop page for bags

How you can do it with Toolset:

Show Your Store Locations On a Map

If the store also has physical locations, customers will appreciate finding them easily on a map.

Displaying a list of store’s physical locations on a map

How you can do it with Toolset:

  • Create a custom post type for Stores
  • On the page where you want to display store locations, insert a Toolset View block and make it display all Stores posts.
  • Insert a Toolset Map block and make it display locations coming from the View you created

Wrapping Up

And there you have it! Building WooCommerce stores with custom features but without the need for custom coding is possible with Toolset. We hope this post got you inspired for building your own custom WooCommerce stores.

To get started with building custom stores, take our course about creating custom WooCommerce sites. It features detailed instructions and includes videos.

And in case you were wondering, in this article, we used our Toolset Blocks and WooCommerce demo site. You can install and play with it on our Discover WP site (it’s free), or install it on your own server.

There’s More!

This article is a part of an ongoing series where we present interesting and powerful ideas of what you can build with Toolset. We’re publishing these every few weeks, so stay tuned!

Other articles in this series:

Feedback? Suggestions?

Have you already built a WooCommerce store using Toolset? What are the biggest challenges you face when building WooCommerce sites?

Let us know in the comments and we’ll reply!

 

Comments 3 Responses

  1. I’ve used Toolset to do these kinds of customizations on many WooCommerce + WordPress sites. The Toolset WoOCommerce features are a great way to customize product templates, archives and more.

    Everytime I help a customer make a better shop with these kinds of customizations, their next questions are usually about customizing the cart and checkout pages. Is Toolset thinking about adding no code cart and checkout customization capabilities?

    • Hi, Scott, that’s great to hear! 🙂 About your question… Pages like “Cart” and “Checkout” display very specific kinds of data, like the items in your basket, prices, shipping, and so on. So, to edit them, one would need to develop some new and very specific kinds of blocks. There is no such plan at this moment, but I will forward the idea to the developers.

      By the way, you can already use Toolset to customize the “My Account” page in WooCommerce. We have a lesson that explains how to do it.

  2. Hi Dario, page builders like Elementor have added cart and checkout page customization to help customize the experience without needing to edit PHP templates. After customizing products with Toolset, customers sometimes ask how to make something we added like a taxonomy or custom field to the data that is displayed in the cart and/or checkout. It’d be nice to be able to do content templates for these pages or even for individual items in the pages but I realize it wouldn’t be content templates it would need to be something that uses the WooCommerce API to insert/replace data in specific parts of the page and loop data.

    The higher priority for me, really, is being able to do the things Toolset can already do for products for product variations. I know that isn’t easy because of the WooCommerce approach to variations and their admin UI but it is much needed.