• Prerequisites
• Installation
• Configuration
• Cart Template Modifications

WooCommerce Customizer Implementation Guide

This guide will help you implement the Customizer library in your WooCommerce store. For an overview of common concepts and workflows, please refer to the Ecommerce Integration Overview.

Prerequisites

• A WooCommerce store with access to the WordPress admin panel and theme files
• Your unique Customizer details (provided separately), including:
  • iframeSrc URL
  • editorId
  • productsCategoryId
  • Other configuration parameters

Installation

To add the Customizer to your WooCommerce store, you'll need to edit your theme files. This can be done through the WordPress admin under Appearance > Theme File Editor, via FTP, or using a child theme for safe modifications.

Add the following script tag to include the Customizer library in your theme, preferably in the header.php or functions.php file:

<script src="https://cdn.idealfactory.com/editors/customiser_xxx.min.js"></script>

You can enqueue the script in functions.php to ensure proper loading:

add_action('wp_enqueue_scripts', function() {
    wp_enqueue_script('customizer', 'https://cdn.idealfactory.com/editors/customiser_xxx.min.js', [], null, true);
});

Configuration

To set up the Customizer, add the necessary HTML and JavaScript to your product page template (e.g., single-product.php) or other relevant templates. Here's a basic configuration:

1. Add a container div for the Customizer on the product page:

   <div id="customizer-container"></div>

2. Initialize the Customizer with your configuration by adding JavaScript to your theme, either directly in a template file or via functions.php:

   <script>
    document.addEventListener('DOMContentLoaded', function() {
      var customizer = new Customizer({
        containerId: 'customizer-container',
        iframeSrc: '{ IFRAME_SRC }', // Provided in your Customizer details
        editorId: '{ EDITOR_ID }', // From your Customizer details
        productsCategoryId: '{ CATEGORY_ID }', // From your Customizer details
        cartItemUid: 'cart-item-uid',
        platform: 'woocommerce'
      });
    });
   </script>

   Replace the placeholders (e.g., { IFRAME_SRC }, { EDITOR_ID }, { CATEGORY_ID }) with the actual values from your Customizer details.

   To add this script via functions.php, use:

   add_action('wp_footer', function() {
      if (is_product()) {
          ?>
          <script>
            document.addEventListener('DOMContentLoaded', function() {
              var customizer = new Customizer({
                containerId: 'customizer-container',
                iframeSrc: '{ IFRAME_SRC }',
                editorId: '{ EDITOR_ID }',
                productsCategoryId: '{ CATEGORY_ID }',
                cartItemUid: 'cart-item-uid',
                platform: 'woocommerce'
              });
            });
          </script>
          <?php
      }
   });

Cart Template Modifications

To properly display and manage customized products in the cart, you'll need to modify your WooCommerce cart template. You can override the cart template by copying cart.php from woocommerce/templates/cart/ to your-theme/woocommerce/cart/cart.php.

Here are the necessary changes:

1. Add PHP code to generate a UUID for each cart item:

   <?php
   $url_uuid = '';
   if (!empty($cart_item['_uuid'])) {
      $url_uuid = '&uuid=' . esc_attr($cart_item['_uuid']);
   }
   ?>

2. Update the product title link to include the UUID:

   <a href="<?php echo esc_url($cart_item['data']->get_permalink() . $url_uuid); ?>">
      <?php echo wp_kses_post($product_name); ?>
   </a>

3. Add an "Edit Design" button for each customized item:

   <div>
      <a href="<?php echo esc_url($cart_item['data]->get_permalink() . $url_uuid); ?>">
          <input type="button" class="button" value="Edit Design">
      </a>
   </div>

4. Update the product image display to show the customized thumbnail if available:

   <?php if (!empty($cart_item['_thumbnails'])) : ?>
      <div class="image">
          <img class="image__img" src="<?php echo esc_url($cart_item['_thumbnails'][0]); ?>">
      </div>
   <?php else : ?>
      <?php echo $thumbnail; ?>
   <?php endif; ?>

These modifications will ensure that customized products are properly displayed in the cart, with the ability to edit the design and view the customized thumbnail.