Elementor/WordPress如何添加CSS类/ID实现跨页面展示区块

• 打开存放尺寸指南的独立页面Elementor编辑器
• 右键点击「尺寸指南」对应区块，选择 保存为全局部件，自定义命名为「商品尺寸指南」后保存
• 进入Elementor的 主题构建器（Theme Builder） 界面，选择「单产品（Single Product）」模板
  • 如果你还没有自定义过商品详情页模板，点击「添加新模板」，类型选择「单产品」，导入符合需求的基础模板或者基于现有页面创建即可
  • 如果你已经有正在使用的单产品模板，直接点击编辑进入
• 在单产品模板编辑界面，找到你想要放置尺寸指南的位置（通常可放在商品参数下方、评论区上方），点击添加部件，在「全局部件」分类下找到刚才保存的「商品尺寸指南」，插入后保存模板并应用到所有商品即可

• 先按方法1的步骤将尺寸指南区块保存为全局部件，保存后进入WordPress后台的「Elementor - 已保存的模板」页面
• 找到刚才保存的「商品尺寸指南」部件，复制它对应的短代码（格式通常为[elementor-template id="xxxx"]）
• 如果你用的是WooCommerce，把下面的代码添加到当前主题的functions.php文件中，或者通过Code Snippets插件插入代码即可：

// 在WooCommerce商品详情页插入尺寸指南
add_action( 'woocommerce_after_single_product_summary', 'display_size_guide_on_product_page', 25 );
function display_size_guide_on_product_page() {
    // 替换为你自己的尺寸指南全局部件短代码
    echo do_shortcode( '[elementor-template id="xxxx"]' );
}

代码里的数字25是插入优先级，数值越小展示位置越靠前，你可以根据想要的摆放位置调整这个数值。

如果你使用的是Elementor Pro，也可以直接在单产品模板中添加尺寸指南区块后，设置区块的显示条件为「应用到所有产品」即可，无需额外配置。

内容的提问来源于stack exchange，提问作者Amrit Samtani