Overview
WooCommerce runs on WordPress, which means adding inline diagrams uses WordPress's template hierarchy and block-editor patterns. The path depends on whether you're editing themes directly, using a page builder, or relying on the block editor.
Three implementation paths
Path one — direct theme editing. Modify your theme's PHP templates (e.g., `single-product.php`, `single.php` for blog posts) to include the SVG markup directly. Most reliable, fully crawlable, requires PHP/theme familiarity.
Path two — block editor (Gutenberg). Use the "Custom HTML" block to paste an SVG into a post or page. Works for one-off diagrams in blog posts. Less reusable since each instance is a separate block.
Path three — page builder (Elementor, Divi, etc.). Most page builders have an "HTML" or "Code" widget where you can paste inline SVG. Works but adds builder-overhead JavaScript to the page. Less ideal than theme-level inline.
WordPress-specific gotchas
WordPress's `wp_kses` content filter (used in many security plugins) can strip SVG elements from post content under default settings. If your inline SVG is disappearing from saved posts, check whether a security plugin is sanitizing it. The fix is either to allow SVG in the kses allowlist (use the `wp_kses_allowed_html` filter) or to inline SVG via the theme template rather than via post content.
WooCommerce's product short-description and long-description fields are subject to the same content filtering. Inline SVG diagrams on product pages are best added via theme template (`single-product.php` or a custom block) rather than typed into the product description editor.
ImageObject schema on WordPress is typically handled by an SEO plugin (Yoast, RankMath). For diagram-specific ImageObject schema beyond what the plugin provides, add it manually via `wp_head` action or a Custom HTML block.