Skip to main content

WooCommerce Embed Button Implementation

  • Updated

Overview

ARitize 3D’s QuickAR enables online retailers to offer Augmented Reality (AR) and 3D product views to shoppers with minimal technical and operational investment. In order to add the ARitize 3D tag into the WooCommerce installation, we will need to modify the current theme that you are using.  The structure and name of the theme files may vary from theme to theme, so you may need to find the appropriate one that you are using.

 

Tag Details

Access to modify the WooCommerce template is required to add the AR and/or 3D buttons onto the product pages.   

By following these instructions, the following buttons will be added to your product page: 

blobid0.png

 

Two Ways

  1. Install Code Snippets plugin and add HTML, CSS and JavaScript snippets to run them on the website. *RECOMMENDED* 
  2. Using the hook method to add or remove content in the theme’s functions.php file. 

First Way (using plugin)

Step 1: 

Go to your WooCommerce homepage. 

Step 2: 

Download the Code Snippets in Plugins 

  1. Click Plugins -> Add New in the left menu 

blobid1.jpg

2. Search Code Snippets in the upper right corner -> Install and Activate Code Snippets plugin. 

 

blobid2.jpg

3. Click Snippets below the Code Snippets in the Plugins section to start editing the code. 

blobid3.jpg

Step 3:

Add the JavaScript snippet 

  1. Click Add New at the top left corner. 

blobid4.jpg

2. Enter the JavaScript snippet – 3D/AR buttons as a title of the new snippet. 

3. Paste the code below into the Code section. 

 

Insertion Process

The process of inserting the JavaScript tag is easy. 

  1. Find your personalized code and client key by following this guide. 
    • Follow the guide above if you would like to include buttons for ARitize Configurator and ARitize Decorator. If you are interested in learning more, please contact us. 
  2. Paste the code below into your tag management system where you want the buttons to appear on your website.  

 

Code to Paste:

add_action(‘woocommerce_before_main_content’, function () { ?> 

<script> 

/* write your JavaScript code here */ 

      (function(sc, d, t, u, k, s, p) { 

          if (sc.QUICK_AR_INIT) return; sc['QUICK_AR_INIT'] = { key: k, apiBase: "https://quick-ar-test.threedy.ai", qdApiBase: "https://quick-design-test.threedy.ai" }; 

          s = d.createElement(t), p = d.getElementsByTagName('head')[0]; s.src = u; p.appendChild(s); 

      })(window, document, 'script', 'https://cdn-quick-ar-test.threedy.ai/latest/threedy.js', 'REPLACE_WITH_CLIENT_KEY'); 

</script> 

<?php }, 10); 

4. *IMPORTANT* Replace the value REPLACE_WITH_CLIENT_KEY in the code above with the client key provided by ARitize 3D. Please refer to the Retrieving the Embed Code & Client Key Instructions for guidance.  

5. Click the Only run on the site front-end setting. 

6. Write a small description for this snippet (more details in the image below). 

7. Click Save Changes to save all the changes made for this snippet. 

blobid5.jpg

Step 4:

Add the HTML snippet 

  1. Click Add New at the top left corner.

blobid6.jpg

2. Enter the HTML snippet – 3D/AR buttons as a title of the new snippet.

3. Paste the code below into the Code section. 

Code to Paste:

function wp_extracode_for_products() 

{ 

global $product; 

$sku = $product->get_sku(); 

$buttons = "<div data-threedy-web-id='{$sku}' data-threedy-sku='default'> 

<button class='threedy-3d-btn threedy-embed-btn' style='display: none;'>View in 3D</button> 

<button class='threedy-qar-btn threedy-embed-btn' style='display: none;''>View in AR</button></div>"; 

echo $buttons; 

} 

 

add_action( 'woocommerce_before_main_content', 'add_product_content', 10); 

 

function add_product_content() { 

    add_action('woocommerce_before_add_to_cart_button', 'wp_extracode_for_products', 60); 

} 

4. *OPTIONAL* ‘woocommerce_before_add_to_cart_button’ is being used to add the HTML code snippet above/before the add-to-cart button in this example. This value can be changed to have 3D/AR buttons appeared at different places on your website. 

5. Click the Only run on the site front-end setting. 

6. Write a small description for this snippet (more details in the image below). 

7. Click Save Changes to save all the changes made for this snippet. 

 

blobid7.jpg

Note: 

The line data-threedy-sku="default" can be excluded if the Option ID in the client portal is set to default. For example, if the Option ID for all your products in the client portal are all default, then it can be excluded. For the value of data-threedy-sku replace default with the value of the Option ID in the client portal (https://portal.threedy.ai/). 

Each button is independent of the other, so you can choose to insert both or just one of the buttons. 

You can find these values by selecting Products in the top navigation which then shows the listing of the products. The columns for SKU and Option ID are used by the data attributes data-threedy-web-id and data-threedy-sku. 

blobid8.jpg

 

Step 5: *OPTIONAL*

Add the CSS snippet 

  1. Click Add New at the top left corner. 

blobid9.jpg

2. Enter the CSS snippet – 3D/AR buttons as a title of the new snippet. 

3. Paste the code below into the Code section. 

Code to Paste:

add_action('woocommerce_before_main_content', function () { ?> 

<style> 

    /* write your CSS code here */ 

    [data-threedy-web-id] { 

         display: flex; 

         flex-wrap: wrap; 

         gap: 10px; 

        width: 100%; 

         margin-bottom: 10px; 

    } 

    [data-threedy-web-id] button { 

         display: flex; 

justify-items: center; 

     align-items: center; 

    } 

</style> 

<?php } ); 

Note: CSS styles are editable based on your references.

 

4. Click the Only run on the site front-end setting. 

5. Write a small description for this snippet (more details in the image below). 

6. Click Save Changes to save all the changes made for this snippet. 

blobid10.jpg

Note: 

For the CSS class 'threedy-embed-btn' it is only needed if you want to match the default ARitize styling (the blue buttons with the icons), otherwise you can remove it and add your own CSS. The other CSS classes and styles are required. 

Step 6:

Activate the snippets created above 

  1. Click Snippets -> All Snippets in the left menu. 

blobid11.jpg

2. *OPTIONAL* Activate the CSS snippet – 3D/AR buttons by switching to blue (examples below).  

3. Activate the JavaScript snippet – 3D/AR buttons by switching to blue (examples below). 

4. Activate the HTML snippet – 3D/AR buttons by switching to blue (examples below). 

5. Finally click the Apply button to apply changes being made. 

blobid12.jpg

 

Second Way (using hook)

Step 1: 

Go to your WooCommerce homepage. 

Step 2: 

Access functions.php file. 

  1. Click Appearance -> Theme File Editor in the left menu. 

blobid13.jpg

2. Click Theme Functions under Theme Files in the right menu to access functions.php file. 

blobid14.jpg

3. Scroll down to the end of the functions.php file to start editing the content. Content can be added in the last line of the file. 

blobid15.jpg

Step 3:

Add JavaScript codes into functions.php file. 

  1. Paste the JavaScript code below into the functions.php file. 

Code to Paste:

remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10); 

add_action( 'woocommerce_before_main_content', function () { ?> 

<script> 

/* write your JavaScript code here */ 

      (function(sc, d, t, u, k, s, p) { 

          if (sc.QUICK_AR_INIT) return; sc['QUICK_AR_INIT'] = { key: k, apiBase: "https://quick-ar-test.threedy.ai", qdApiBase: "https://quick-design-test.threedy.ai" }; 

          s = d.createElement(t), p = d.getElementsByTagName('head')[0]; s.src = u; p.appendChild(s); 

      })(window, document, 'script', 'https://cdn-quick-ar-test.threedy.ai/latest/threedy.js', 'REPLACE_WITH_CLIENT_KEY'); 

</script> 

<?php }, 10); 

 

2. *IMPORTANT* Replace the value REPLACE_WITH_CLIENT_KEY in the code above with the client key provided by ARitize 3D. Please refer to the Retrieving the Embed Code & Client Key Instructions for guidance. 

3. Click Update File to save all the changes made for this file. 

blobid16.jpg

Step 4:

Add HTML codes into functions.php file. 

  1. Paste the HTML code below into the functions.php file. 

Code to Paste:

function wp_extracode_for_products() 

{ 

global $product; 

$sku = $product->get_sku(); 

$buttons = "<div data-threedy-web-id='{$sku}' data-threedy-sku='default'> 

<button class='threedy-3d-btn threedy-embed-btn' style='display: none;'>View in 3D</button> 

<button class='threedy-qar-btn threedy-embed-btn' style='display: none;''>View in AR</button></div>"; 

echo $buttons; 

} 

 

add_action( 'woocommerce_before_main_content', 'add_product_content', 10); 

 

function add_product_content() { 

    add_action('woocommerce_before_add_to_cart_button', 'wp_extracode_for_products', 60); 

} 

2. Click Update File to save all the changes made for this file. 

blobid17.jpg

Note:

The line data-threedy-sku="default" can be excluded if the Option ID in the client portal is set to default. For example, if the Option ID for all your products in the client portal are all default, then it can be excluded. For the value of data-threedy-sku replace default with the value of the Option ID in the client portal (https://portal.threedy.ai/). 

Each button is independent of the other, so you can choose to insert both or just one of the buttons. 

You can find these values by selecting Products in the top navigation which then shows the listing of the products. The columns for SKU and Option ID are used by the data attributes data-threedy-web-id and data-threedy-sku. 

blobid18.jpg

Step 5: *OPTIONAL*

Add CSS codes into functions.php file. 

  1. Paste the CSS code below into the functions.php file. 

Code to Paste:

add_action( 'woocommerce_before_main_content', function () { ?> 

<style> 

    /* write your CSS code here */ 

    [data-threedy-web-id] { 

         display: flex; 

        flex-wrap: wrap; 

        gap: 10px; 

       width: 100%; 

        margin-bottom: 10px; 

    } 

    [data-threedy-web-id] button { 

         display: flex; 

justify-items: center; 

     align-items: center; 

    } 

</style> 

<?php }, 10); 

blobid19.jpg

Note:

For the CSS class 'threedy-embed-btn' it is only needed if you want to match the default ARitize styling (the blue buttons with the icons), otherwise you can remove it and add your own CSS. The other CSS classes and styles are required. 

 

That’s it! 

As you approve models on the portal, the buttons will automatically populate on your product pages. 

 

Live Experience

Once the tag is live, two user experiences for the ‘View in AR’ button differ depending on if the shopper is on a mobile or desktop device:  

  1. Mobile Web - When the shopper interacts with the ‘View in AR’ button, the experience launches via WebAR on the mobile device. Here they can see the model in their space. 
  2. Desktop Web - When the shopper interacts with the ‘View in AR’ button, a QR code is shown. If scanned with a mobile device camera it will launch the mobile WebAR experience. 

 

 

 

 

 

Back to top