CM Contextual Product Recommendations (CMCPR) - Use Case - Contextual Product Recommendation for WooCommerce
Use Case – Contextual product recommendation for WooCommerce.
CM Contextual Product Recommendations is a WordPress plugin that lets you add a related products widget to any post on your WordPress site. This related products WordPress plugin makes it easy to recommend products and refer blog readers to them from your store.
The product recommendations can act as a cross-sell products widget and create a database of related products for users to see.
You can create your own product database in WooCommerce and put them to product recommendations in articles on your site.
Use Case Front-End
Use Case Assumptions
In this example we will consider how to create a database with related products from your WooCommerce shop and how to put them to your posts or pages on the example of the article with building home record studio.
We assume that you have already bought the plugin, but not installed it yet.
- Installing the plugin
- Setting up
- Placing the widget to the posts or pages
- Creating categories
- Creating products in WooCommerce
- Adding new products to recommendations
- End Result
- Learn more
Installing The plugin
The process is the same for all CM plugins and add-ons.
- 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
To configure the plugin navigate to Admin Dashboard → CM Product Recommendations → Settings.
There you will find two tabs General Settings and Widget Display, and two buttons above them:
- Support Shortcodes: Show/Hide - Show or hide the list of plugin's available shortcodes. We will tell how to use them further in this guide.
- Cleanup database - Click on it if you want to delete all created products from your database.
The first tab in the settings is General Settings.
There you can find two sections with the following options:
- Display items on given post types - Choose which post types can display the recommended products widget.
The list includes both core post types, such as post and page, as well as custom post types managed by other plugins.
- Only display items on single posts/pages - Disables the widget on the home page, author page and other taxonomy-related pages.
- First occurrence only - Only takes into consideration the first time an item is found on each page.
- Avoid parsing protected tags - Enable it to avoid parsing the following tags: script, a, h1, h2, h3, pre, object.
Learn more about HTML tags: HTML Reference
- Terms are case-sensitive - Enable to differentiate cases.
For example, "Tooltip Plugin" will be different than "tooltip plugin".
- Add links to found items - Enable it to add links to the content when the product names appear.
- Collect statistics - Enable it to collect the statistics of recommendation's Name, Impressions, Clicks, Click Ratio and Date. Learn more: CM Contextual Product Recommendations (CMCPR) - How To - Collect and View Statistics
- Disable the content search - Check this option to disable the content search for keywords, if you want to manually put product recommendations widgets with defined by you products or categories where you want to.
Performance & Debug
- Only highlight on "main" WP query - Enable this option if you want to highlight only items on main query. Unchecking this box may fix problems with highlighting items on some themes which manipulate the WP_Query. Warning: Don't change this setting unless you know what you're doing.
- Enable the caching mechanisms - Enable this option if you want to use the internal caching mechanisms.
The second tab in Settings is Widget Display.
There you will find a few sections with the following options:
- Widget Label - Here you can change the widget's label that will appear on the front-end above the product recommendations.
- Number of items displayed in line - Set the maximum number of the items which can be displayed in a widget.
- Number of lines - Set the maximum number of lines which can be displayed in a widget.
- Background color - Set the color of the background of a widget.
- Show HTML "title" attribute for the links - Select this option if you want to use item title as HTML "title" for link
- Open links in new tab - Select this option if you want to open the item links in a new tab.
Title & Description
- Show Title - Select this option if you want to show the title of each item.
- Title style - Set the size and color of the item's title.
- Show Description - Select this option if you want to show the description of each item.
- Limit Description length - Use this option if you want to limit the length of the description. Set it to 0 to make it unlimited.
- Description style - Set the size and color of the item's description.
- Template - Select the template for products list. You can choose between Default and Slider types. When you choose the Slider type, then new section with options appear.
Slider template settings
- Items limit - Set the limit, how many items can be in slider in total.
- Slide width, px - Set the slide width in pixels. Set it to 0 to remove limits.
- Slides quantity - Set the quantity of items that can be seen in the slider. This quantity is used for display width more than 768 px.
When you finished configuring the settings, don't forget to click the button Save Changes.
Placing the Widget to the Posts or Pages
There are two main ways how you can place a product recommendations widget to posts or pages. And it's possible to use both these ways at the same time.
- Place a widget automatically at the end of certain post types. Recommendations come from words in the content.
- Place a widget at any place you choose inside post types. Recommendations come from categories or you can define some definite products that must be displayed.
Both options can work at the same time - just don't check the Disable the content search option in General Settings and use shortcodes.
Let's start preparing our product database with creating categories. Categories can be used to target only specific product group on a post. It is possible to do it using a shortcode.
To create a category navigate to Admin Dashboard → CM Product Recommendations → Categories.
On the left part of the screen you can see a form for adding categories.
- Name - Write here the name of the category.
- Slug - You can leave this field empty and the slug will be generated automatically from the name of the category, or you can write here your own slug.
- Parent Category - You can choose any other created category as a parent category to create a hierarchy.
- Description - Write here a description of the category.
Then click the button Add New Category.
The category that you've just created will appear in the list on the right part of the screen:
Here are the actions you can do with any item by hovering on it:
- Quick Edit
- Delete (you can also delete more than one item at once using Bulk actions option)
Except the Name column, you can also see the columns with Description, Slug and Count. The Count column shows how many products belong to this category. Now it shows "0" as we haven't added any products yet.
You can also search for definite items using relevant field called Search Product Recommendation Categories.
Creating Products In WooCommerce
Now it's time to start creating product in WooCommerce. Let's create a product for USB Audio Interface.
Navigate to Admin Dashboard → Products → Add New.
There you need to write a title and description of the product.
Lower there is a section Product data. Let's add there a price in the field Regular price.
TIP: Set Up Products
In the section Product data you can also add some more about weight, shipping, variable product and much more.
Learn more about configuring product data in WooCommerce documentation.
On the right side of the screen you can find a few useful metaboxes.
Product categories - Add the product to existing category or create a new one right there using the button +Add new category. Adding products to different categories will make your work with a WooCommerce shop much more comfortable.
Product image and Product gallery - two metaboxes for adding product images. The first one is a main picture, and the second metabox is for additional product images.
Then click the button Publish to create the product.
After this action under the title you can find a permalink to this product. You can copy it or edit.
In the same way we can add any number of products.
Adding New Products To Recommendations
Next step is adding new products to recommendations.
To add a product, navigate to Admin Dashboard → CM Product Recommendations → Add New.
You can also add new product by navigating to Admin Dashboard → CM Product Recommendations → Products and click Add New.
There you will see a simple form for adding new product, where you need to fill the following information:
- Title - The title is a keyword that is used in the post to signal a product to be recommended.
- Description - The description appears under the title when the product is recommended. This is usually the name of the product.
- URL - A link to the product.
- Weight - This value determines how often the product is recommended. If you'd like to have certain products recommended more often than others, increase the weight of the product you'd like recommended more.
- Weight should be a numeric, positive value
- Product with weight 100 will be 100 times more likely displayed than the product with weight 1.
Let's fill the information about the product:
On the right side you find some useful metaboxes that will help you categorize your products.
Product Recommendation Categories - Choose a category that the product will belong to. It also can be useful when you want to place a widget on the page with the product of some definite category. It can be done with a shortcode.
Synonyms - You can add synonyms for the product. For example, if your title is "Ads," you might want to add "Advertisements" and "Advertising" to your synonyms. This way using any of these three words within the post will show the product recommendation that corresponds with "Ads."
Featured image - Set here an image that will be displayed on the Front-end.
Product variants - There is also one more useful metabox, where you can add product variants.
Learn more about product variants: CM Contextual Product Recommendations (CMCPR) - How To - Add Product Variants
Don't forget to save the product by clicking the button Publish (or Update if you edited the product) at the top right.
Let's add a couple of more products in the same way and look at the result on the Front-end:
TIP: Manage Your Products
You can manage all your products by navigating to Admin Dashboard → CM Product Recommendations → Products. There you can view all your products, edit or delete them.
That was the first method, where the keywords are found on the page automatically and as a result relevant products are displayed. Let's consider what we can do using shortcodes.
There are a few shortcodes to change the widget behavior.
Change the Location of the Widget
Custom widget position -
By default the widget is displayed at the bottom of the page, but using this shortcode you can place it in any other place of the article.
Example - let's put the widget at the beginning of the article:
Result on the Front-end:
Exclude from Parsing
You can exclude some parts of the content from from parsing by wrapping needed part of the text with this shortcode:
Display Products List
The last shortcode
[cm_recommend] is used when you want to display some definite products or category with products. You can also customize the title of the widget, amount of the products and type of the widget. And, of course, you can choose where to place it.
- title - title for product list section, default value is in the plugin option "Widget Label"
- products - id or list of comma separated ids of product
- cat - name of products category, all by default
- limit - quantity of items, 3 by default
- template - "slider" or "default" is available, "default" by default
- slides - quantity of slides in slider for desktops (w > 768px), 3 by default
- slide-width - slides width in px for desktops (w > 768px), default value is in the plugin option "Slide width, px"
- text-length - limit for description, default value is in the plugin option "Limit Description length?"
For example. Let's place a widget in the middle of the article with the title "We recommend!", choose the slider type of the widget with 3 displayed items, maximum amount is 10 -
[cm_recommend title="We recommend!" cat="Record Studio" limit="10" template="slider" slides="3" slide-width="230" text-length="40"]
Following instructions found in the plugin and guides, you should be able to enrich your site with a nice-looking tool that you can use to sell your products or someone else's products using referral links.
Use Case Front-End
Using this plugin you can also collect and view the statistics for each product via useful tables and graphs. Learn more about it: CM Contextual Product Recommendations (CMCPR) - How To - Collect and View Statistics
And one more useful feature - Import and Export Product Data, that can be useful and save a lot of time for you, if you have a few sites. Learn more about it in our guide: CM Contextual Product Recommendations (CMCPR) - How To - Import/Export Product Data