WordPress Product Catalog with Filter Functionality

We developed a custom WordPress plugin that shows a catalogue of our client's ice-cream products to visitors and allows them to filter those products using multiple preferences offered to them and also help them find these products near their location.

View Project
WordPress Product Catalog with Filter Functionality - SaffireTech

Project Highlights

Plugin Development

Filter Functionality

Search Functionality

Theme Customization

UI/UX Development

Responsive Design

Client Background & Requirements

  • Alden’s Ice Cream is a subsidiary of Oregon Ice Cream company based in Oregon, USA.
  • In the initial website that the client had built, they had only a simple page per product category.
  • With this arrangement, a visitor had to visit all the product category pages to get a grasp of all products which was tiresome and time-consuming.
  • So, to solve this problem we came up with a solution to create the main catalogue page with product filters that allows a visitor to skim through the products quickly.

How did we provide solution?

We worked on the project as follows:

Products Filters Functionality

  • To create a custom catalog of products, we first created a Custom Post Type (CPT) called ‘Products’ and created two custom taxonomies – The first one was ‘Product Type’ and the other one was ‘Product Tags’ that will be used to denote tags to a product.
  • ‘Product Type’ will be used to assign categories to products which could be – Sqrounds, Pints, Bars & Sandwiches.
  • ‘Product Tags’ will be used to create tags that can be assigned to a product. Product tags can be flavors, dietary considerations, new/bestseller & base.
  • For example a Sqround product ‘Vanilla & Chocolate Swirl’ will have ‘Sqround’ as the product category and have tags like ‘Vanilla’ & ‘Chocolate’ tags for flavors, ‘Kosher’ tag for dietary considerations, ‘Dairy’ for Base.
  • After product entries were made, we developed a custom plugin that would create a shortcode to render the UI for product filters & product display.
  • Whenever a visitor makes a selection on UI filters, an AJAX request is sent which is followed by a database query to show the products as per the filters set by the visitor.
  • If no selections are made by the visitor (which is usually the case on page load) or when a visitor deselects all the filters, by default 16 featured products are shown. Each of these 16 featured products is assigned a ‘Rank’ in order of importance suggested by our client and products are sorted by their ‘rank’ when displayed.

 Screenshot : Filter in Action

Load More Functionality

  • As a total number of products were above 50. It could easily become quite overwhelming for a visitor to see all of the products at once.
  • So the client asked to show only 16 products at a given time based on the product count.
  • If the product count for a given selection is less than or equal to 16, all products are shown.
  • If the product count for a given selection is greater than 16, only 16 products are shown with a ‘Load More’ button.
  • If the visitor is interested to look at more products, the visitor can click on the ‘Load More’ button the next 16 products would be shown via AJAX request and so on until there are no more products to show.

Screenshot : Load More Functionality

Product detail template with Advanced Custom Fields (ACF)

  • We created a custom template for Product CPT as per the layout provided by the client’s designer.
  • We had created several ACF fields for CPT ‘Products’ to capture every product detail.
  • The ACF Fields were – Product Heading, Sub Heading, Ingredients Summary, Ingredients List, Good Stuff List, Allergens, Nutrition Label & Badges as applicable.
  • When a product is being viewed, the template pulls Product Name, Taxonomy, and featured image from CPT database and the ACF fields values for that particular product from ACF.

Screenshot : Product Details

Destini API Integration / Product Based Store Locator

  • The client wanted us to have something like Store Locator for their products.
  • Since the client has over 50+ products and it’s very much a possibility that their distributors are not going to have all the products at a time, we decided to go for a product-based store locator as a generalized store locator was not going to solve the problem.
  • So, we opted for Destini API which allows you to create product-based store locations. To make it work, we have to enter all product(s) information & their locations for each product in their dashboard.
  • Once product info is entered, a product code is generated which we can use on our site to generate store locator results based on product being viewed and Visitor Pincode using their API kit.

Screenshot : Destini API Integration

What our clients have to say about us

SaffireTech is a genuine and highly professional company. They provided us quality work and On-Time Delivery even on short notice. The team is friendly and flexible which is what you want in developing your website. I highly recommended it for people looking for top-notch professional work!

Ankit JoshiCo-Founder, BloomDesk

SaffireTech has a very energetic and passionate team to work with. They stayed on schedule and delivered the promised finished product. I had a wonderful experience working with them and would gladly recommend them to others who need expert custom coding solutions done right and on time.

Resha ShroffCEO, Lynx

SaffireTech has a highly professional team, the best thing is that they are always ready to help & find the solution for any challenges. It has been a great experience to work with them for our project. I wish all good luck and best of the future to them.

Zia KhanBusiness Manager, Nahar Group

Woah I took almost a year to find out the right company to design my website, it was very complicated to develop as it had to be totally customized. I came across many agencies but the confidence and commitment Ankit & his team showed up was amazing and they did give their 100 percent and completed the project on deadline and giving us a great service as well. Totally recommended!

Daskhina SawantFounder, ITZ-Showtime

Need WordPress Development Services for Your Next Project?

Tell us your requirements