General #
Note: If you are using a Shortcode Editor for your pages Woocommerce, then we suggest using this guide.
Clerk.io’s Recommendations can be installed on any page of the webshop, to help customers find the right products.
With the Setup Guide, you can see which pages to install recommendations on, and which types to use, to get our Best Practice running.
From the main menu start by clicking on Getting Started:
1. Create a Standard Design #
The first thing you need to do, is create a Standard Design for your sliders.
You can use the Setup Guide under Recommendations - Create a design for your recommendations sliders - to quickly create a Design that has the same color scheme and style as your webshop.
Click Publish once you are happy with the styling.
You can easily change this later, under Recommendations - Designs in the left menu.
2. Selecting Which Recommendations To Use #
Next, each step of the Setup Guide focuses on a specific page of the webshop.
They contain information about
Why recommendations are important on the page.
Which recommendations types to use.
Where on the page they should be placed.
Click for each type of recommendations you want to use and follow the steps.
Please bare in mind: by only clicking on each block of Recommendations they will turn green as if they were installed - they are not - you still need to click and follow the steps.
3. Inserting Recommendations #
After choosing which recommendations to use for a page, you can add them to your webshop.
3.1 Inserting with Extension OR Embedcodes #
Some pages allow recommendations to be added directly through the Extension or Embedcode:
Here are the pages allowing both kind of integrations:
- Add recommendations to your product page
- Add recommendations to your cart page
- Show most popular products in your category pages
Click on each one and choose the method you want to use for the integration and follow the steps.
Here is an example of how to Add recommendations to your product page:
- Method 1: with the extension (follow the steps)
Click on DONE
- Method 2: with embedcode (follow the steps)
Click on DONE
Some embed codes require need variables like product or category-IDs. In these cases, simply choose WooCommerce from the Choose Platform dropdown, before copying the embedcode.
3.2 Inserting only with Extension #
These pages only allow an integration though the Extension:
- Show add-to-basket recommendations
- Add exit-intent recommendations
Click on each one and follow the steps.
Here is an example of how to Show add-to-basket recommendations:
Click on DONE
3.3 Inserting only with Embedcodes #
These pages only allow an integration with embedcode:
- Add recommendations to your home page
- Add content recommendations to your blog or news
For each type of recommendations, simply copy the embedcode and insert them to the file that generates the relevant page in your webshop.
Here is an example of how to Add recommendations to your home page:
Click on DONE
You can easily change your content later, under Recommendations - Content in the left menu.
Change Content
After enabling the features, you will be able to see Clerk.io’s RECOMMENDATIONS function on your webshop.
Insert using shortcodes #
1. Shortcode integration #
If you are using a Shortcode editor like Elementor, then our regular recommendation code snippet may not be rendering due to the product ID is syntaxed differently in Elementor than a normal HTML block.
If you are using Hooks, then you can go to Appearance -> Custom Layouts -> Insert the shortcode on the Hook that belongs to Clerk (in case, a developer can create these it he wants Clerk to be a Hook).
To insert the code, replace:
<span class="clerk" data-template="@product-page-alternatives" data-products="[<?php echo $product->get_id(); ?>]">
</span>
With:
<span class"clerk" data-template="@product-page-alternatives data-products="[ [clerk_product_id] ]"></span>
Try first with only simple brackets, and then, if that doesn’t work, with double brackets.
<span class="clerk" data-template="@category-page-popular" data-category="[ [clerk_category_id] ]"></span>
If this one does not work you can try these:
<span class="clerk" data-template="@product-page-alternatives" data-products="[<?php the_ID(); ?>]"></span>
<span class="clerk" data-template="@product-page-others-also-bought" data-products="[<?php the_ID(); ?>]"></span>
2. Manual Code Insertion #
If you cannot insert the shortcode or you don’t don’t use any kind of Editor, go to Appearence→ Personalization→ Then click on the product page and then follow these steps:
Widget → Shopsidebar 1 → add widget → Clerk Content
3. WP Baker Builder #
Theme File Integration
Adding product page slider to all pages:
Appearance - Theme File Editor - WooCommerce - Content-single-product.php
(or similar file to where your product page page is found)
Insert span code into the file where you would like it to be shown. Similar to FTP access.
<span class="clerk" data-template="@product-page-alternatives" data-products="[<?php the_ID(); ?>]"></span>
<span class="clerk" data-template="@product-page-others-also-bought" data-products="[<?php the_ID(); ?>]"></span>
Add-to-basket step #
If you haven’t already, create the Content that you want to use in your Add-To-Basket Step (Power Step).
In the WooCommerce backend, go to Pages.
In the top of the page, click Add New.
Name the powerstep page something meaningful, like “Product added to the basket!”, as it will be displayed as the title on your powerstep.
In the big text-field, type in [clerk-powerstep], and press Publish.
6. Go Clerk -> Clerk Settings in the sidemenu and find Powerstep Settings.
7. Insert the ID’s of the Content blocks you created, separated by commas, in
Content.
You can find the ID’S of each Content blocks you have created in your Clerk backend(my,clerk.io), under Recommendations -> Content -> Edit (the number of Content varies between 1 to 4 for the Add-To-Basket step):
Here is an example of how to find the Content ’s ID:
8. Choose the name of the page you just created, under Powerstep Page
and check Enabled.
9. Click Save Settings.
OPTIONAL
If the Powerstep is still not showing up, you might have to deactivate WooCommerce’s Cart Redirect setting.
To do this, go to
WooCommerce -> Settings -> Products and find Add to cart behaviour.
Make sure both boxes are unchecked, and click Save changes in the bottom of the page.
If Your Add-to-Basket Page Renders Twice:
If you run into an issue where the Powerstep displays twice, you’ll need to split the page to fix.
In the WooCommerce backend, go to the Powerstep page you created in Pages at step one .
Choose “Shortcodes” in the top right corner, and then click “Row / Columns”.
- Next, click “OK” on the pop-up that appears.
- Finally, move [clerk-powerstep] within the [row] [col] and [/row] [/col] tags, and click Save.
Exit Intent #
The Exit Intent popup reacts when a visitor tries to leave your webshop. It pops up and displays interesting products, possibly converting a leaving visitor to a buying customer.
Setup with Plugin #
From v1.3.8 of the WooCommerce plugin, Exit-Intent can be activated directly from the plugin.
The setup is 5 steps:
Make a new of Website Content in my.clerk.io and name it “Exit Intent”
Choose a logic for it - We suggest “Visitor Recommendations”.
In the WooCommerce backend, go to Clerk in the side-menu and find Exit-Intent Settings.
Check the Enabled box, and make sure that the Template field contains “exit-intent”.
Click Save Settings to activate it.
Now you will see the exit intent pop-up when anyone tries to leave the page, the first time.
Setup Manually #
If you run an older version of the plugin, or want to manually configure Exit-Intent, follow these steps:
Make a new of Website Content in my.clerk.io
Choose a logic for it - We suggest “Visitor Recommendations”.
From Insert Into Website, copy the provided embedcode to this WooCommerce file, just above the Clerk.io tracking-script:
wp-content->plugins->clerkio->includes->class-clerk-visitor-tracking.php
Add: data-exit-intent=“true” to the embed code you just placed. Like so:
Example embed code
<span class="clerk"
data-template="@exit-intent"
data-exit-intent="true">
</span>
Inserted in class-clerk-visitor-tracking.php
Remember to style your content in Designs at my.clerk.io
All recommendations containing the data-exit-intent=“true” will trigger the exit intent pop up.
Adding Recommendations with Visual Hooks #
Within WooCommerce, certain website pages are created using Visual Hooks instead of being rendered from an HTML file. In order to add content to pages created via Visual Hooks, you will need to insert the Clerk.io content within the webshop’s active functions.php file.
The functions.php file is usually located at the following path:
/wp-content/themes/YOUR-THEME-NAME-child-theme/functions.php
For example, to add a Recommendations slider with the Content @product-page-alternatives to your Product Page, you would include the following code within the main <php? ?> tags in functions.php:
// CLERK ADD PRODUCT PAGE SLIDER
add_action ( 'woocommerce_after_single_product', 'clerk_alternatives',5
);
function clerk_alternatives() {
$clerk_id = wc_get_product()->get_id();
echo "<span class='clerk'
data-template='@product-page-alternatives'
data-products='[$clerk_id]'>
</span>";
}
And, another example to add a Recommendations slider to the Add-to-Cart Page:
// CLERK ADD CART SLIDER
add_action ( 'woocommerce_after_cart_contents', 'clerk_cart_slider',5);
function clerk_cart_slider() {
$clerk_id = get_queried_object()->term_id;
echo "<span class="clerk"
data-template="@cart-others-also-bought"
data-products="[<?php $items = WC()->cart->get_cart(); foreach( $items as $cart_item ){ $product_id = $cart_item['product_id']; echo $product_id; if ($cart_item != end($items)) {echo ",";} } ?>]"></span>";
}
To add your own Recommendation sliders to the above pages, remember to replace the code within tags with the embed code provided in your Recommendations Content in my.clerk.io, like below:
The value set in add_action(), 5 in this example, tells WooCommerce the priority of the Content being added, which in turn influences how early the Content will be displayed in that Visual Hook. Note: When setting priority, WooCommerce only accepts multiples of 5.
More info about WooCommerce website pages that use Visual Hooks:
https://www.businessbloomer.com/category/woocommerce-tips/visual-hook-series/