How to create a product catalog in WordPress in a table

How to create a product catalog in WordPress in a table

Not sure about the best way to create a product catalog in WordPress? Publishing your catalog and not sure how to do it better without any coding?

A lot of beginner developers get confused when they need publish a product table catalog, or price list: the HTML markup is confusing; some of them can do the markup, but aren’t satisfied with the look, or would like to have some solution which would be sortable, which could divide the data in pages, wouldn’t be too hard to update. Indeed: updating HTML table every time the product price changes, or when you add a new product, or when the quantity changes is frustrating.

This article will guide you through the process of creating a product catalog in WordPress with wpDataTables plugin, which is probably the easiest way.

First – prepare the data for your future product catalog in WordPress

How to create a product catalog in WordPress in a table

Of course, no catalog would make sense without having some products in it. I presume you have already prepared the data, now you would need to compile it in a form that our WordPress plugin would “understand”. It can be one of the following:

  • Excel or CSV file: if you are no developer, and you keep track of your products in Excel – this way would probably be the easiest for you. Just prepare an Excel file with one sheet which would have all info about your products organized in the table. CSV file would be prefered since it works a little bit faster.
  • MySQL table (prefered): this is probably the best data source for your catalog. It provides quick work, real-time updates without any re-uploads, and if you have 10 000 of products it is the best solution. You can convert your data from CSV to MySQL.
  • PHP array: If you collect data from several data sources, or if they depend on some external inputs, and if you have some PHP development skills you might prefer to prepare the data in a PHP array, and then prepare a PHP file which would print it out in a serialized string (with serialize function) like this.
  • JSON or XML data source – if you have an XML or JSON web service you can prepare the data in these formats. You can read about how to use them here and here

After the data is ready we can move on to the next step

Install the wpDataTables WordPress plugin, which will render your product catalog

Before we move on we need to make sure that wpDataTables plugin is installed. You can obtain it here.

Installation is quite simple:

  • Upload the plugin to your plugins directory.
  • Activate the plugin.

You can see a detailed video tutorial here

Create a new wpDataTable for your WordPress catalog

Open your WordPress Admin panel and find wpDataTables admin panel. Then press “Add new” button to create a new wpDatatable.

Add a table title. You can call it “Product catalog in WordPress example” or something like this.

Then select a table type. It depends on what you chose on step 1: Excel file, CSV file, MySQL query, serialized PHP array, JSON or XML input source.

If you decided to create the catalog based on MySQL data, provide a correct SELECT query. It can be something like:

SELECT * FROM my_product_catalog

Then you can set one of the following checkboxes and parameters, if you want them for your catalog:

  • Server-side processing – If you check this checkbox all the filtering, sorting and other processing will be sent in an AJAX request from client’s browser and processed by server. Use this if you have a large MySQL dataset
  • Responsive – If your site is responsive check this checkbox, your WordPress catalog will also become responsive.
  • Advanced filtering – Enabling this checkbox will add a filter below each column in your new WordPress catalog. So it will allow your users to e.g. filter by price, by release date, or whatever.
  • Table tools – Enabling table tools will add a possibility to export data in CSV, PDF or Excel, or copy catalog data to clipboard.
  • Enable sorting – This checkbox will enable sorting in your catalog. So e.g. your user will be able to sort all your products by alphabet, by price, or whatever he prefers.
  • Limit table layout – This checkbox would limit the catalog’s width to parent container width.
  • Word wrap – You can check this checkbox if you have long descriptions of your products in catalog, or long product names. It will make the table cells stretch.
  • Display length – This will define how many products will be shown in one page of your catalog.

Press “Save table” and your catalog will be ready to publish.

You can read in more detail about table/catalog settings in tutorial section. E.g. here

Publish your new product catalog in your WordPress blog

You will get a shortcode generated in the plugin. Paste it in your page or blog post – and your new catalog is ready.

Here is the result: