Objective

This document outlines the integration of Terrific with WooCommerce. We will take as a reference the REST API v3, which has been supported since version 3.5, released in 2018, up to the most recent version (9.7.1).

API

To check if the WooCommerce site you want to implement supports REST API v3, simply execute the following endpoint in the browser:

GET https://your-site.com/wp-json/wc/v3/

Get API Key

WooCommerce allows you to generate Consumer Key and Consumer Secret keys for authentication.
Steps to generate the API keys:

Go to the WordPress Dashboard → WooCommerce → Settings.
Select the Advanced tab → REST API.
Click on Add key.
Enter a name, select a user, and choose the permissions (Read, Write, or Both).
WooCommerce will generate a Consumer Key and a Consumer Secret.

More details.

Embedding

Prerequisites

The only prerequisite is having access to the WooCommerce store’s admin panel with permissions to edit the theme.

Embedding Methods in WooCommerce

These are the 3 most recommended ways to embed the Terrific SDK.

Using the functions.php file (recommended)
Editing the PHP file of a specific template or resource
Using a plugin to insert custom code

Using functions.php

To locate the functions.php file in WooCommerce, follow these steps:

Go to Appearance → Theme File Editor
Make sure you are editing the correct active theme
In the Theme Files menu, find and select the functions.php file

Once you're in the functions.php file, insert the following functions:

// Script in the <head>
function add_terrific_sdk_to_head() {
  echo '<script defer src="https://terrific.live/terrific-sdk.js" storeId="{YOUR_STORE_ID}"/>';
}
add_action('wp_head', 'add_terrific_sdk_to_head'); //This inserts the script into the <head> tag of the entire site.
// Script in the <body> (e.g., before closing </body> or at a specific location)
function add_terrific_module() {
  if (is_product()) { // Replace is_product() with the name of the page or conditional tag where you want to insert the tag. Example: only on product pages
    echo '<div data-source="terrific" embedding-id="{ID_EMBED}" id="embedding"></div>';
  }
}
add_action('wp_footer', 'add_terrific_module'); // you can change to another hook depending on desired placement

Advantages

Secure, simple, centralized control.

Disadvantages

Code editing from the admin panel may be limited (FTP access only).
If there are other external code update methods, coordinate with the client’s technical team to avoid overwriting changes.

Editing specific PHP file

The PHP files that can be edited directly are located in the Theme File Editor section.

To insert the Terrific script into the <head> of the entire site, locate the header.php file and insert the script within the <head> tag in that file.

To insert the Terrific Body Tag in a specific section of the site, locate the corresponding PHP file. Sometimes these files may be empty because the content is edited directly from the templating section. Editing the PHP file directly in such cases can cause conflicts. Other times, the templates are built with independent submodules that are reused and configured directly from the templating section.

Use the following PHP line to insert the Terrific tag:

<?php echo '<div data-source="terrific" embedding-id="{ID_EMBED}" id="embedding"></div>'; ?>

Advantages

Precise visual control, as long as all the logic is contained within the file.
If the template involves more complexity, such as management through the templating section or the use of submodules, things can get a bit more complicated.

Disadvantages

Code editing from the admin panel may be limited (FTP access only).
If there are other external code update methods, coordinate with the client’s technical team to avoid overwriting changes.
If the code is centralized in the PHP file of the page, the insertion may be a bit more complex.

Using a plugin

If you can’t modify the theme code directly, here are some popular WordPress plugins that allow you to safely insert custom PHP or JavaScript code as described in the functions.php section:

Code Snippets: Easily add and manage snippets of PHP code without editing theme files.
Insert Headers and Footers: Insert scripts into the <head> or footer without touching theme files.
Header Footer Code Manager (HFCM): Manage code snippets across the site with flexible placement options.
WPCode – Insert Headers and Footers + Custom Code Snippets: A comprehensive plugin for adding and managing code snippets.

To install a new plugin, go to Plugins → Add New and search for the desired plugin.

Once installed, follow the plugin’s instructions to insert the code.

Advantages

No theme code modification is required.

Disadvantages

There is a dependency on a third-party app for a simple insertion.
We need to implement a new plugin that could potentially cause conflicts with the existing theme.
It may affect the loading priority of the scripts.

Clear Cache

Regardless of the method used for embedding, it is recommended to clear the site cache to see the changes.

The easiest way to do this is by accessing the cache clearing option from the admin toolbar that appears at the top of the site when you are logged in as an admin.