Woocommerce

Plugin

Detailed explanations of Clerk.io WooCommerce Plugin Settings

Plugin Settings #

Once the plugin is successfully installed in WooCommerce, it will appear in the side menu of your backend:

Simply clicking will redirect you to the plugin configuration page.

General #

Here is a explanation of every option in the General section:

  • Plugin Version: The version of the Clerk plugin currently installed. Here you can find the latest release.
  • Public Key: Insert here your Public key which can be found in my.clerk.io Settings > API keys.
  • Private Key: Insert here your Private key, which can be created and found in my.clerk.io Settings > API keys.
  • Language: Choose the correct language of the domain.
  • Import URL: The url used by Clerk to sync the data. Add this in your my.clerk.io account under System Status > Data Sync in the Store URL section.

Data Sync: Products #

In this section, you can customize how Product data is synced with Clerk.io. Below is an explanation of each option:

  • Use Real-Time Updates: to sync your data to Clerk.io in real-time once changes are made in WooCommerce.

  • Include Out Of Stock Products: When enabling this option, Clerk will import products which are “Out Of Stock”.

  • Image Size: Choose the size of the image imported in Clerk. If in doubt, choose “large”, then manage the size directly inside Clerk Design.

  • Additional Fields: Here, you can add a comma-separated list of any additional Product Data fields you’d like to sync to Clerk.io from your WooCommerce store.

  • Strip/Trim Split Attributes: When Strip is unchecked, all spaces within strings are removed (e.g. ’ Option 1’ > ‘Option1’). When Trim is checked, only leading and trailing spaces are removed, preserving internal spaces (e.g. ‘Option 1’ > ‘Option 1’).

  • Additional Fields Raw: Enter the attribute “slug” from Additional Fields to import it without sanitation. This preserves values as-is, preventing commas from splitting them into lists.

Data Sync: Pages #

In this section, you can customize how Pages data is synced with Clerk.io. Below is an explanation of each option:

  • Use Real-Time Updates (Pages): to sync your pages to Clerk.io in real-time once changes are made in WooCommerce.

  • Include Pages: When enabled Clerk will import all pages included in WooCommerce > Pages > All Pages.

  • Page Additional Fields: Additional fields to Sync for pages.

  • Page Additional Types: Sync additional page types, including custom ones. Enter a comma-separated list to add multiple types.

Data Sync: Customers #

In this section, you can customize how Customers data is synced with Clerk.io. Below is an explanation of each option:

  • Include Customers: When enabled Clerk will import Customers data from WooCommerce.

  • Collect Basket: Enabling this will allow Clerk to collect information on products added into the basket. E.g. Activate this option when you are using the Abandoned Basket trigger.

  • Collect Emails: Enabling this will allow Clerk to collect and import Customers Email addresses from WooCommerce.

  • Collect Emails Signup Message: Writing text here will allow you to have a checkbox at checkout where we subscribe the email within my.clerk.io. Collect Emails must be enabled to use this feature. If left blank, the checkbox will not be active.

  • Extra Customers Fields: A comma separated list of the additional fields for Customers Data to include during sync.

Data Sync: Orders #

In this section, you can customize how Orders data is synced with Clerk.io. Below is an explanation of the option:

  • Disable Order Synchronization: Disable orders from being sent to Clerk during the daily sync. Clerk will still collect them in real-time from visitors.

Live Search Settings #

In this section, you can customize and activate the Live Search. Below is an explanation of each option:

  • Enabled: Enables your Clerk.io Live Search.

  • Include Suggestions/ Categories / Pages: This let’s you control whether Clerk should find matching Suggestions, Categories or Pages to show on the Live Search.

  • Number of Suggestions / Categories / Pages: This let’s you decide how many possible matches to return for each type.

  • Pages type: Select which type of pages results in the dropdown, e.g. Blog Posts, CMS Pages or All.

  • Dropdown Positioning: Choose the position of the Live Search dropdown results.

  • Live Search Input Selector: Insert here the CSS Input selector.

  • Live Search Form Selector: Insert here the CSS Form selector.

  • Content: Enter here the name of your Live Search Content. It is listed within the Content embed code as your data template name, “data-template= YOUR-CONTENT-NAME”. Usually “live-search”, e.g.:

<span class="clerk" 
  data-template="@live-search"  
  data-instant-search="INSERT_SEARCH_INPUT_CSS_SELECTOR_HERE" 
  data-instant-search-suggestions="6" 
  data-instant-search-categories="6" 
  data-instant-search-pages="6" 
  data-instant-search-positioning="right">
 </span>

Search Settings #

In this section, you can customize and activate the Search Page. Below is an explanation of each option:

  • Enabled: Enables your Clerk.io Live Search.

  • Search Page: Select the CMS page to use as a target for rendering the Clerk.io Search.

  • Include Categories / Pages: This let’s you control whether Clerk should find matching Categories or Pages to show on the Search Page.

  • Number of Categories / Pages: This let’s you decide how many possible matches to return for each type.

  • Pages type: Select which type of pages results in the dropdown, e.g. Blog Posts, CMS Pages or All.

  • Content: Enter here the name of your Search Page Content from the Content embed code in my.clerk.io. Usually “search-page”.

  • No results text: Enter the text you’d like to display on the Search Page if a search returns no results here.

  • Load more button text: Insert the text for the “Load More” button, if present in the design.

Faceted Navigation #

  • Enabled: Enables your Clerk.io Facets in Search Page.

  • Add Custom Attribute: Type in here the name of an attribute you’d like to include in your facets, then click “Add”.

  • Facet Attributes: Once added, the attribute appears in this section. Here, you can set its display title, define its position in the facet list, and check the “Show” box to include it in your facets.

  • Design: Insert here the ID of the facet design. It can be found in my.clerk.io > Search > Design.

Powerstep Settings #

In this section, you can customize and activate the Powerstep after a customer has added a product to cart. Below is an explanation of each option:

  • Enabled Enable the Clerk.io Powerstep.

  • Powerstep Type: Choose the type of powerstep you’d like to enable from the dropdown menu, like “page” or “popup”.

  • Powerstep Page: Select the CMS page to use as a target for rendering the Clerk.io Powerstep.

  • Contents: Enter here the name of your Power Step Content from the Content embed code in my.clerk.io.

  • Filter Duplicates: Activating this will ensure that each banner shows completely unique products.

  • Enable Custom Texts: When enabled it allows you to add Custom texts to your Powerstep.

  • Back Button: Insert here a text for your Back Button.

  • Cart Button: Insert here a text for the button that redirects to the cart page..

  • Product Title: Insert here a text message on the Powerstep Title.

  • Keep Add To Cart Params: Enabling this option ensures that the parameters related to adding items to the cart are retained when redirecting to the Powerstep page. This helps maintain the selected product details during the redirection process.

Exit Intent Settings #

In this section, you can customize and activate the Exit Intent. An exit intent is a type of popup that appears when a user is about to leave a website. Below is an explanation of each option:

  • Enabled: Enable your Clerk.io exit intent content by checking this box.

  • Content: Enter the name of the exit intent Content you’ve created for your store. Usually “exit_content”.

Category, Product, Cart #

In this section, you can customize and activate the Recommendations for Category, Product and Cart pages. Below is an explanation of each option:

  • Enabled: Enables your Clerk.io Category, Product and Cart Recommendations sliders.

  • Content: Enter the name of the Content you’ve created in my.clerk.io for your store. It’s usually already filled.

  • Filter Duplicates: Activating this will ensure that each banner shows completely unique products.

  • Defer Injection: Only for Product Settings, enabling this will inject the Recommendations on product page only after the page content is already rendered.

  • Category / Product / Cart ID Shortcode: These shortcodes allow you to easily insert Clerk embedcodes if you want to customise their placements with editors like WPBakery and Elementor. E.g:

<span class="clerk"
   data-template="product-page-alternatives"
   data-products="[[clerk_product_id]]">
</span>

Additional Script #

In this section, you can add and activate any additional JS Scripts. Below is an explanation of each option:

  • Enabled: Enables the additional script inserted in the following box.
  • JS Code: If enabled, it will run the script added in this box together with Clerk.js.

Logging #

In this section, you can enable and customise the Logs regarding errors and or warnings from Clerk. Below is an explanation of each option:

  • Enabled: Enables the Logging feature.

  • Log level: Here you can select the chosen type of logging.

    Only Errors: Will log any errors that stops the module from working correctly.

    Error + Warn: Also logs warnings that are not causing the module to stop working, but might be necessary to fix as well.

    Error + Warn + Debug: Logs everything that the module interacts with. This should not be enabled on a live webshop as it will slow down the site.

  • Log to: This will log everyting to My.Clerk.io in System Status > Logs.

Upgrading #

Best Practice: Always create backups of modified files before upgrading to ensure you can restore previous versions if needed.

If you are using a version before 2.0.0, upgrading will break your Designs, since Clerk.js 2 will be used. If using an older version, follow this guide instead.

Upgrading the Plugin can be done directly from the WooCommerce admin, following these steps:

  1. Start by going to Plugin > Installed Plugins and search for Clerk.io.
  2. Click on Update Now:

If you already have the latest version, this button will simply say Active.