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:
- Decide what you want to display and promote
- Define your products with custom post types, fields, and taxonomies
- Create custom Product pages
- 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Great to see Toolset and Ocean working together so well. Both excellent products individually, but better together!
Thanks for the comment, Mark!
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.
Thanks for the feedback, Mhairi!
Amazing! will definitely give this a shot in my next project (I might actually even revisit my existing ones :D)
Thank you 🙂
Cool! Let us know how it goes, Rami!
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.
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).
Can I do that?
Sure! You just need Toolset, OceanWP, and WooCommerce, and you’re good to go!
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.
So glad you found it to be helpful! I hope you’re able to try some of it out!
Your blog was absolutely fantastic! Large amount of great information which is often attractive some and the other way.Thanks.
Thank you for sharing such a nice and informative Blog.
Hi. I have followed the steps above, many thanks!