如何在非Elementor构建的自定义WooCommerce产品页中代码渲染Elementor组件

完全可以不依赖Elementor编辑器，通过代码在自定义WooCommerce产品页面中渲染Elementor组件，以下是两种常用实现方式：

方式一：渲染已保存的Elementor模板 #

如果已经在Elementor中创建好完整模板（比如产品详情模块、推荐产品模板），可以直接调用Elementor内置函数渲染：

1. 获取模板ID：在Elementor模板库中编辑目标模板时，从URL中提取post=xxx的数字ID；也可以在数据库wp_posts表中查找post_type为elementor_library的条目ID。
2. 在自定义模板中添加代码：在你的自定义产品页PHP文件（比如single-product-custom.php或主题模板片段）中插入以下代码：

<?php
// 替换为你的Elementor模板ID
$target_template_id = 123;

// 检查Elementor是否激活，避免报错
if ( class_exists( 'Elementor\Plugin' ) ) {
    echo Elementor\Plugin::instance()->frontend->get_builder_content( $target_template_id, true );
}
?>

方式二：单独渲染Elementor组件（Widget） #

如果只需要渲染单个Elementor组件（比如按钮、图片、价格模块），可以直接实例化对应Widget类并配置参数：

以渲染Elementor按钮组件为例：

<?php
// 检查组件类是否存在
if ( class_exists( 'Elementor\Widget_Button' ) ) {
    $button_widget = new Elementor\Widget_Button();
    
    // 配置组件参数，不同组件参数结构不同，可参考Elementor官方代码
    $button_widget->set_settings( [
        'text' => '立即加入购物车',
        'link' => [
            'url' => get_permalink() . '?add-to-cart=' . get_the_ID(),
            'is_external' => false,
        ],
        'button_type' => 'primary',
        'size' => 'md',
    ] );
    
    // 渲染组件
    $button_widget->render();
}
?>

注意事项 #

• 确保Elementor插件处于激活状态，否则上述代码会失效。
• 若使用主题模板，建议基于子主题修改，避免主题更新导致代码丢失。
• 特殊页面环境下，若Elementor样式未自动加载，可手动调用Elementor\Plugin::instance()->frontend->enqueue_styles()触发样式加载。

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