You don’t need custom coding to build an eye-catching online store with advanced features. With Toolset and OceanWP, you can build completely custom Product and Shop pages from scratch with your own unique functionality and styling – all with no coding required.

If you’re building an online store, you may have noticed that WooCommerce’s default templates and your site’s theme primarily decide how your store will look. You may have a few options you can turn on or off, otherwise, adding advanced features just isn’t possible without custom programming.

Or, you can create a completely custom WooCommerce store with Toolset and OceanWP and no coding.

With Toolset, you can build features you only see on major retail sites. Or, you can even dream up your own features, then create them using custom post types and fields, post relationships, custom layouts, and more.

OceanWP makes your site look great thanks to its expansive styling options. Plus, it has an intuitive admin editing experience that shows you exactly what your site will look like on the front-end.

Here are four steps to customize your online store using Toolset and OceanWP:

  1. Decide what you want to display and promote
  2. Define your products with custom post types, fields, and taxonomies
  3. Create custom Product pages
  4. Create dynamic Shop pages and search functionality

Decide What You Want to Display and Promote

Toolset’s flexible features do more than just rearrange and style your product pages. You can create completely custom features that apply specifically to your business, or use advanced features from major retail sites.

q-and-a-section-toolset
Create product Q+As using forms and custom repeating fields
upsells-cross-sells-toolset
Display upsells, and popular cross-sells using post relationships
brand-custom-taxonomy-toolset
Display products by brand or designer using custom taxonomies
special-offers-toolset
Share special offers using conditional blocks with information from custom fields
front-end-forms-toolset
Allow vendors to submit their products directly to your site using forms
Store-locations-toolset
Show your store locations on a map using custom views
create-account-toolset
Create customer or vendor logins with permissions according to user type

products-per-outfit-toolset
Create shoppable outfit inspiration using post relationships

These are features you could never get from WooCommerce alone, and they only scratch the surface of what’s possible with Toolset. Best of all, it can all be done without any coding!

Define Your Products with Custom Post Types, Fields, and Taxonomies

Once you have your ideas in mind, you can create an unlimited number of custom post types, fields, taxonomies, and post relationships to make your ideas a reality.

WooCommerce gives you some basic fields to define your products such as product attributes, descriptions, prices, and shipping information like weight and dimensions.

With Toolset, you can add other information like specific product features, brands, or say which department a product belongs to.

custom-fields-products
Custom fields on a product

Not all themes work well with custom post types, but OceanWP is “custom-types ready”. With OceanWP, you can apply different theme settings to each content template. This gives you greater control over how this custom content appears on your site.

Create Custom Product Pages

With your products defined, you can create completely custom templates to display your products and the information from your custom fields. By using product templates, you only need to build your page once, and any changes you make are immediately reflected on all your products that use that template.

Toolset allows you to build your product templates completely from scratch using Toolset’s WooCommerce Blocks.

woocommerce-default-template
Default WooCommerce product template
custom-product-template-toolset
Fully custom Toolset product template

Simply assign the template or archive to your products, and add the blocks you want, such as product ratings, product tabs, product attributes, an add-to-cart button, and more.

The blocks can pull in the information from your custom fields dynamically. This means when you add a heading block to display, for example, the product name, it will automatically display the correct product name according to the product your customer is viewing.

dynamic-content-toolset
Creating a product template that pulls in the information dynamically for each product

You can also assign templates conditionally to use different templates according to certain product criteria. For instance, you can use a conditional template to display items that are out of stock using a different layout.

in-stock-item-toolset
In-stock item
out-of-stock-item-toolset
Out-of-stock item

OceanWP gives you a variety of options for styling these templates. Because it’s post-type ready, you can choose different theme options for different templates. For example, you can choose to display a sidebar for some products and choose a full-width layout for featured products.

theme-options-owp-toolset
Choosing your OceanWP theme options per template

OceanWP also includes global styling options to help keep your shop’s visual identity consistent across your whole site. Plus, there’s no switching between your site’s admin and front-end to see how your changes look because what you see in the backend is how it will appear on the front-end.

global-styling-toolset-oceanwp
Adding global styles to your site

Create Dynamic Shop Pages, Product Lists, and Add Search Functionality

You’ve defined your products and designed your product templates. Now, help your customers find what they’re looking for.

Building custom Shop pages and other archive pages

In WordPress, pages like the Shop page and category listing pages are called archives. In essence, archives list all posts (or products) that belong to a certain category or type of content.

Toolset allows you to create different archives according to criteria you choose. For example, if your site sells heels and bags, you may want different Shop pages with filters that are relevant to each type of product.

archive-page-toolset
Shop page for heels
shop-page-bags-toolset
Shop page for bags

Creating dynamic lists of content

You can add a dynamic list of products to your Shop page, or any other page on your site using the Toolset View block. This allows you to define which products to list and design how the list will look.

view-block-toolset
Choosing which content to display on a shop page

Adding custom search and filter options

Toolset makes it easy for your potential customers to find products quickly and easily thanks to custom search and filtering options. You can filter by any custom field or post relationship you created.

custom-search-toolset
Custom search that allows you to filter by custom fields

Other custom Shop page features from OceanWP

OceanWP offers more features for your Shop and archive pages, including a quick view option, infinite scroll, and the ability to hide your filters off screen when not in use. Please note that these features only work with OceanWP’s archives, not any custom ones you create with Toolset.

quick-view-option-oceanwp
Quick view option
ceanwp-off-screen-filters
Hide filters off screen

OceanWP also gives you options for how to display your shopping cart:

  • Native cart pop up
  • Floating add-to-cart bar
  • Cart display
  • Distraction-free checkout

..and more!

Try OceanWP and Toolset today and tell us about your experience in the comments!

Learn to build custom WooCommerce stores step-by-step with Toolset’s free WooCommerce course.


You can also try Toolset and OceanWP together for free with this WooCommerce store demo.

This Post Has 15 Comments

  1. Mark H

    Great to see Toolset and Ocean working together so well. Both excellent products individually, but better together!

  2. Mhairi

    Great to see a bit more about Toolset and OceanWP, would be good if we had more of this, and possibility Elementor/OceanWP/Toolset combos.

    1. Allison Rivers

      Thanks for the feedback, Mhairi!

  3. Rami

    Amazing! will definitely give this a shot in my next project (I might actually even revisit my existing ones :D)
    Thank you 🙂

    1. Allison Rivers

      Cool! Let us know how it goes, Rami!

  4. cris

    Hey. Can I create a custom woocommerce site with a combination of Ocean WP ( free version) plus ACF plugin (Pro)?
    This is amazing indeed.

    Many thanks.

    1. Allison Rivers

      Hi Cris – You can certainly use ACF Pro to create custom fields for your products. However, you would still need another plugin like Toolset to display those fields on the front-end or create any of the custom features included in this article (unless you want to do it with custom programming).

    1. Allison Rivers

      Sure! You just need Toolset, OceanWP, and WooCommerce, and you’re good to go!

  5. ConvrtX

    This is an outstanding post that’s filled with so many useful nuggets. Thank you for being so detailed on Decide What You Want to Display and Promote.

    1. Allison Rivers

      So glad you found it to be helpful! I hope you’re able to try some of it out!

  6. Your blog was absolutely fantastic! Large amount of great information which is often attractive some and the other way.Thanks.

  7. V8web

    Hi. I have followed the steps above, many thanks!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.