WordPress (WooCommerce) – Size Recommendation Integration

This guide explains how to integrate the AI-powered body measurement and size recommendation tool into WooCommerce product pages. The integration opens an AI modal, collects body measurements, and automatically selects the recommended product size.

How the Integration Works

• User clicks Find My Size on product page
• AI modal opens inside the website
• User enters body measurements
• AI returns recommended size
• Matching WooCommerce variation is auto-selected

Add the Button (Product Page)

Add this button inside your WooCommerce single product template (single-product.php) or using a hook.

<button id="ai-recommendation-btn" class="button alt">
  Find My Size
</button>

Add Modal HTML

Place this code in your footer (footer.php) or via a custom plugin.

<div id="ai-overlay"></div>

<div id="ai-modal" aria-hidden="true">
  <button id="ai-close">✕</button>
  <iframe id="ai-iframe" allow="camera"></iframe>
</div>

Modal CSS

#ai-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(6px);
  z-index: 9998;
  display: none;
}

#ai-modal {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 420px;
  height: 620px;
  background: #fff;
  border-radius: 18px;
  z-index: 9999;
  display: none;
}

#ai-modal iframe {
  width: 100%;
  height: 100%;
  border: none;
}

#ai-close {
  position: absolute;
  top: 8px;
  right: 12px;
  border: none;
  background: none;
  font-size: 18px;
  cursor: pointer;
}

JavaScript Logic

<script>
document.getElementById("ai-recommendation-btn").onclick = function () {
  document.getElementById("ai-overlay").style.display = "block";
  document.getElementById("ai-modal").style.display = "block";
  document.getElementById("ai-iframe").src =
    "https://measure.sadiq.ai/size-ui-v2";
};

document.getElementById("ai-overlay").onclick = closeAI;
document.getElementById("ai-close").onclick = closeAI;

function closeAI() {
  document.getElementById("ai-overlay").style.display = "none";
  document.getElementById("ai-modal").style.display = "none";
  document.getElementById("ai-iframe").src = "";
}

window.addEventListener("message", function (event) {
  if (!event.origin.includes("measure.sadiq.ai")) return;

  if (event.data.action !== "closeModalAndHighlight") return;

  closeAI();

  const size = event.data.recommendedSize;

  document.querySelectorAll(".variations select option").forEach(option => {
    if (option.value === size) {
      option.selected = true;
      option.dispatchEvent(new Event("change", { bubbles: true }));
    }
  });
});
</script>

Result

Once integrated, WooCommerce automatically selects the recommended size variation and updates price, stock, and images accordingly.