--- title: "How to build a product catalog on WordPress with GravityView" date: 2026-03-05 author: "Casey Burridge" link: "https://www.gravitykit.com/how-to-build-a-product-catalog-on-wordpress-with-gravityview/" --- Need to display a browsable product catalog or equipment directory on your WordPress site? Maybe you're running an equipment rental company, managing an internal asset library, or showcasing products without needing a full shopping cart. Whatever the case, WooCommerce is overkill when all you need is a clean, searchable display! The good news? You can build a fully functional product catalog using just two plugins: Gravity Forms for data entry and GravityView for the front-end display. In this post, I'll walk you through the entire setup—from creating your product form to building a searchable catalog with detail pages and even an enquiry form. ## Sneak peek Here's a sneak peek at what we'll be building: ![A product catalog displayed as a card grid with search filters for product name, category, rental rate, and status](https://www.gravitykit.com/wp-content/uploads/2026/03/Product_catalog_card_grid_with_search_filters.png) *And when a visitor clicks on a product, they'll see a detail page with full specifications and an enquiry form:*![A single product detail page showing the DeWalt SDS Hammer Drill with image, specifications, pricing, and a rental enquiry form](https://www.gravitykit.com/wp-content/uploads/2026/03/Single_product_detail_page_with_specifications_and_rental_enquiry_form-scaled.png) *Let's get started!* ## What you'll need Before we dive in, here are the plugins you'll need: - [Gravity Forms](https://www.gravityforms.com) – for powering your product database. Each form submission becomes a product entry in your catalog. - [GravityView](https://www.gravitykit.com/products/gravityview/) – for displaying your Gravity Forms entries on the front end as a searchable, filterable catalog. ## Step 1: Create the product form First, we'll create a Gravity Forms form to capture all the product information. Think of this form as your product database, as each submission will become one item in your catalog. To create a new form, hover over **Forms** in the WordPress sidebar and click **New Form**. Name it something like "Product catalog". Now we'll add the following fields: - **Product name** (Single Line Text) - the title of each product - **Category** (Drop Down) - for grouping products (e.g., Power Tools, Garden, Office, Home) - **Short description** (Paragraph Text) - a brief summary shown in the catalog grid - **Specifications** (Paragraph Text) - detailed specs shown on the product detail page - **Rental rate** (Number) - the price per day/week - **Image** (File Upload) - a product photo - **Status** (Drop Down) - availability status (e.g., Available, Rented, Maintenance) ![The Gravity Forms form editor showing the Product catalog form with fields for Product name, Category, Short description, Specifications, and Rental rate](https://www.gravitykit.com/wp-content/uploads/2026/03/Gravity_Forms_form_editor_showing_the_Product_catalog_form.png) *The Gravity Forms form editor showing the Product catalog form with fields for Product name, Category, Short description, Specifications, and Rental rate!*[](https://www.gravitykit.com/wp-content/uploads/2025/11/pro-tip.svg)**Pro Tip** If your team needs to enter a lot of products at once, enable Gravity Forms' [Save and Continue](https://docs.gravityforms.com/save-continue-gravity-forms/) feature so they can save progress and come back later. Once you've added all the fields, click **Save Form** and add a few test entries so we have something to display in the next step. ## Step 2: Create the catalog View Next, we'll create a GravityView View that pulls in our form entries and displays them as a browsable catalog. To create a new View, hover over **GravityKit** in the WordPress sidebar and click **New View**. Select the **Layout Builder** view type and choose your "Product catalog" form as the data source. ![Screenshot of the 'Add New View' interface in WordPress, showing the product catalog setup options including data source selection and layout type options.](https://www.gravitykit.com/wp-content/uploads/2026/03/CleanShot-2026-03-05-at-13.45.02@2x-1024x708.png) Next, we'll configure the layout. In the **Entries Fields** section, add the fields you want to display for each product card:![The GravityView Layout Builder showing the Entries Fields configuration with Image, Product name, Category, Short description, Rental rate, and Status fields](https://www.gravitykit.com/wp-content/uploads/2026/03/GravityView_Layout_Builder_Entries_Fields_configuration.png) ### Add a search bar One of the best parts of using GravityView for a catalog is the built-in search functionality. We'll add a **Search Bar** widget so visitors can quickly find what they're looking for. Scroll down to the Search Bar section and add the following search fields. You can customize these to suit your catalog. - **Product name** - a text search so visitors can type in a product name - **Category** - a dropdown filter so they can browse by category - **Rental rate** - a filter for price range - **Status** - a dropdown filter for availability ![The GravityView Search Bar configuration showing search fields for Product name, Category, Rental rate, and Status, along with Search Mode and Submit Button options](https://www.gravitykit.com/wp-content/uploads/2026/03/GravityView_Search_Bar_configuration_with_search_fields.png) *Save your View and embed it on a page using the GravityView block or shortcode. Here's what the catalog looks like on the front end:*![The finished product catalog on the front end showing a grid of product cards with images, categories, descriptions, prices, and availability badges, plus search filters at the top](https://www.gravitykit.com/wp-content/uploads/2026/03/Finished_product_catalog_on_the_front_end_with_card_grid.png) ## Step 3: Build the product detail page When a visitor clicks on a product in the catalog, they'll be taken to a **Single Entry** page that shows all the product details. Let's configure that now. Back in the View editor, click on the **Single Entry Layout** tab. Here, we'll add all the fields we want to show on the detail page: ![The GravityView Single Entry Layout tab showing fields for Image, Product name, Category, Status, Short description, Rental rate, Specifications, and Rental enquiry](https://www.gravitykit.com/wp-content/uploads/2026/03/GravityView_Single_Entry_Layout_tab_with_product_detail_fields.png)Notice the **Rental enquiry** field at the bottom? That's a **Gravity Forms** field type in GravityView that embeds a separate form directly on the Single Entry page. This lets visitors submit an enquiry about a specific product without leaving the page. To set this up, first create a simple enquiry form in Gravity Forms with fields like **Name**, **Email**, and **Enquiry**, and add a **Hidden** field to capture the product name or entry ID. Then, back in the GravityView Single Entry layout, add a **Gravity Forms** field, select your enquiry form, and configure the **Field value parameters** to dynamically populate the hidden field with the product ID: ![The Gravity Forms field settings in GravityView showing the Rental enquiry form selected with field value parameters set to dynamically populate the product ID](https://www.gravitykit.com/wp-content/uploads/2026/03/Gravity_Forms_field_settings_with_dynamic_field_value_parameters.png) *Here's what the finished product detail page looks like on the front end, complete with the rental enquiry form:*![The front-end product detail page for the DeWalt SDS Hammer Drill showing the product image, category, availability status, description, price, specifications list, and an embedded rental enquiry form](https://www.gravitykit.com/wp-content/uploads/2026/03/Front-end_product_detail_page_with_rental_enquiry_form-scaled.png) ## Step 4: Filter by availability (optional) If your catalog is public-facing, you may only want to show products that are currently available. To do this, add an **Advanced Filter** to your View that only displays entries where the Status field equals "Available". Alternatively, leave all statuses visible and use GravityView's [gvlogic shortcode](https://www.gravitykit.com/gvlogic/) to style the status badges differently. For example, you could show a green badge for "Available" and a gray badge for "Rented Out" to make it easy for visitors to see what's in stock at a glance. ## Step 5: Create category landing pages with URL parameters Want to create dedicated landing pages for specific product categories? You can link directly to your catalog View with a pre-filtered URL. For example, if your catalog page is at `yoursite.com/catalog/`, you can link to a filtered view like this: ``` `yoursite.com/catalog/?filter_category=Power+Tools` ``` This is a great way to build targeted landing pages or add category links to your site's navigation menu. ## Step 6: Optional enhancements Once you have the basics in place, there are a few more GravityKit plugins that can take your catalog to the next level: - [GravityView Maps Layout](/products/maps/) - if your products or equipment have a location field, you can display them on an interactive map - [GravityEdit](/products/gravityedit/) - let staff update availability status directly from the front-end catalog without having to open the Edit Entry screen - [GravityExport](/products/gravityexport/) - export inventory reports filtered by category, status, or any other field ## A note on inventory management It's worth being upfront about what this setup can and can't do. GravityView is excellent at *displaying* and *filtering* your product data, but it doesn't handle complex business logic like availability conflict detection, booking calendars, or automated inventory tracking. If you need those features, you'll want to look into dedicated booking or inventory management plugins. That said, for the vast majority of product catalogs and equipment directories where you just need a clean, searchable way to display your items, this setup works extremely well. ## Create your product catalog today That's it! You've now got a fully functional product catalog powered by Gravity Forms and GravityView. To recap what we built: - A **Gravity Forms form** that serves as your product database - A **GravityView View** that displays your products in a searchable card grid - A **Single Entry page** that shows full product details with an embedded enquiry form - **Search and filter functionality** so visitors can find exactly what they need Ready to build your own catalog? [Give GravityView a try!](/products/gravityview/)