Plugin Development
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
Project Highlights
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