CM Product Directory (CMPD) - Use Case - Creating a Product Directory From Scratch

Use Case - Creating a Product Directory From Scratch

Back to User Guides

Introduction

CM Product Directory allows you to create a site with a comprehensive directory of products. Each product has a profile page with detailed information.

Use Case Assumptions

In this example use case guide, we'll cover how to create a product directory with WordPress plugins and Magento extensions. You can apply the same idea to the topic of your site.

We consider that you have already bought the plugin, but not installed it. 

It follows:

• Installing the plugin
• Adding first product
• Configuring the directory
  • Product index header
  • Filters settings
• Editing the product page
• Translating the interface
• End result

Installing The Plugin

The process is the same for all CM plugins.

• Download the plugin from your customer dashboard
• Log in to WordPress and navigate to the WordPress Admin  → Plugins settings
• Click on Add New
• Activate it and add the license

Learn more: Getting Started - Plugin Overview

Adding First Product

With the plugin ready to go, it's time to add the first product. 

Navigate to  Admin Dashboard → CM Product Directory Pro → Add Product. 

Here you are able to fill detailed information for your new product.

Enter the title and product overview. You can use either Visual or Text editor for adding an overview:

Next section is Product Details. Here you can optionally fill the following:

• Product cost
• Purchase link
• Demo link
• Product page link
• Product video link

Next section is Product Pitch and Logo. Here you can do the following:

• Product pitch - Enter a product pitch in the provided box.
• Is this product promoted - If checked, the product will be always displayed at the top of every search result including on the Related Products list. Check this if you want to highlight a certain product.
• Add Logo - The logo size must be a square. The maximum size should be 500 by 500 px. You can restrict in the setting to only accept the defined logo size and reject bigger images.
• Set logo as featured image - Check this option to set the logo as a featured image of the product.

In the next section Product Picture Gallery you can add images for the product. They will be displayed on the product page in a separate section. You can add any amount of images.

And the same with the section Product Video Gallery - add videos for a product. You can add any amount of links either from YouTube or Vimeo.

Next section is Business Address and Map. Here you can fill the set of fields for company's address related to the product. A few options here are:

• Virtual address - Check this option if you want to hide address fields (it will happen after publishing the product).
• Show address - Check this option if you want to display the address on the product page.
• Add Google map - The plugin allows to display a map with the provided address. It demands adding Google API to plugin settings. Learn more about it: CM Product Directory (CMPD) - Product Google Map

One more section is Business Additional Information. Here you can provide detailed information about the company related to the product: year found, contacts and links to social media.

Next box is Product gallery. This is one more alternative block for adding product images - they will be displayed on the product page right under the product overview.

You can also add Tags for the product in the corresponding metabox. These tags can help your site visitors to search and filter products.

Last metabox that we need is Product Categories. Here you can assign the product to a category. It will help your site visitors to search and filter products.

When everything is filled, we can create a product by clicking the button Publish.

The same way you can add some more products.

Now let's see how the product page looks like on the front-end:

Configuring The Directory

The Product Page is automatically created upon plugin installation in the address www.yoursite.com/cm-product-directory-pro. As you add products, they will be automatically updated to present all products.

It's a regular page with the shortcode  [cmpd_product] , which outputs your products.

Let's see the example of how the product directory can look like on the front-end:

You can configure how it looks by default by navigating to Admin Dashboard → CM Product Directory Pro → Settings → Directory Appearance tab.

In this tab you can choose the Default view for the Product Directory page between the following views:

• Tiles View (Learn more about additional settings for this view: Views - Tiles View)

  

• List View (Learn more about additional settings for this view: Views - List View)

  

• Product Directory View (Learn more about additional settings for this view: Views - Directory View)

  

• New View

  

Other settings for configuring Product Directory can be found under the corresponding tab.

It has two sections.

Product Index Header

• Product Index Page ID - Enter ID of the Product Directory Index page. It's needed for setting up the backlink on product pages.

  

• Product order by - Choose the way how products will be ordered in the Product Directory.
  • Order in ascending or descending order - Choose the order direction: ascending or descending.
• Number of products on page - Set the maximum amount of products that can be displayed per page. If there are more products than can fit one page, then the pagination will be enabled. Set the value "-1" to disable the limit.
• Show pagination on top - Enable/disable the pagination at the top of the product page.
• Show pagination on bottom - Enable/disable the pagination at the bottom of the product page.
• Show the number of products found - Enable/disable displaying the number of products found in the directory page.
• Show items per page selection - Allow users to choose in the dropdown, how many products to display per page.
• Open each product page in a new tab - Enable/disable opening a product page in a new tab.
• Product Pitch as image title - Enable/disable displaying the product pitch as the title of the image. This is used once the user hovers over the product image.

Filters Settings

Another section allows you to configure a search behavior and filters.

• Display categories as - Select how the categories should be presented: as Tags or Dropdown.
• Show search field - Choose if to display a search field.
• Only show items on search - Enable this option if you want to display the products only after the user enters a search term.
• Search In Tags - Choose if to search in tags.
• Display Category filter - Display filter for Category terms.
• Display Pricing Model filter - Display filter for Pricing Model terms.
• Display Language Support filter - Display filter for Language Support terms.
• Display Target Audience filter - Display filter for Target Audience terms.
• Display Tag filter - Display filter for tag terms.

Editing The Product Page

You can also customize how the product page should look like. The options can be found under the Product Page tab.

This tab has lots of options. We will consider here only the first section Product Page Defaults. The options are:

• Default country - Choose the default product company country.
• Default year founded - Choose the default year, when the product company was established.
• Show a Google map - Enable it, if you want a Google map to be shown by default on each product page for the company address. Note: It demands providing a Google API key, learn more: CM Product Directory (CMPD) - Product Google Map
• Show an Business Address - Enable it, if you want a Business Address to be shown by default on each product page.
• Default template - Choose the default template for the product page appearance. Learn more about Creating Custom Product Page Theme
• Template bind with the_content() hook - If your active theme "header.php" and "footer.php" files are empty and header/footer sections designed with layouts or blocks, then you need to enable this option.
• Display product logo - Enable it, if you want a product logo to be displayed on product pages.
• Display year founded - Enable it, if you want a company year founded to be displayed on product pages.
• Display product page publish/update date - Enable it, if you want to display the respective date.
• Add Meta description - Select yes or no to add a meta description tag on the page. By default this option is set to no; a meta tag containing the description will not be shown unless you have an SEO plugin which does this.  If you enable this option, then a meta description will be injected to the html source of the page containing the pitch if it has been entered. If you have Yoast SEO installed and you have filled up the meta description for the specific product, the Yoast description will be shown instead.
• Show comments - Enable it, if you want to display a default WordPress comments section for each product. This will allow users to leave comments on product pages. 
• Show WordPress sidebar - Enable it, if you want to display the WP sidebar on every product page.
• Show back to directory index link - Enable it, if you want to display the "back to directory index" link at the top of the page. You can control the label associated with this link in the plugin settings.
• Show company e-mail address - Enable it, if you want to display an email address next to the e-mail link on the Product Page.
• Enable Lightbox - Turns on pop-ups for images and videos. 
• Make phone number clickable - The HTML tag will be href="tel:"

There are also lots of settings for configuring custom taxonomies, additional links, additional fields, related products and customizing the colors of the page. You can learn more about them in this guide:

• CM Product Directory (CMPD) - Settings - Product Page Settings

Translating The Interface

If your site is not in English, that's ok.

The CM Product Directory lets you translate the most important front-end labels to your language of choice. To do so, head to the Labels tab.

You can find there lots of labels for customizing. Learn more about the list of available labels: Settings - Labels (Translating The Front-End Text)

After changing the settings, don't forget to click the button Update below the settings to save the changes.

End Result

Following instructions found in the plugin and guides, you should be able to create, complete and configure the directory with multiple products.

	More information about the CM Product Directory WordPress  Plugin Other WordPress products can be found at CreativeMinds WordPress Store
	Let us know how we can Improve this Product Documentation Page To open a Support Ticket visit our support center