使用Hello Elementor时如何调整WooCommerce商品网格的信息展示顺序

修改文件不生效的原因 #

你修改的content-widget-product.php是WooCommerce自带的侧边栏商品小工具的专属模板，Elementor的Products组件有独立的渲染逻辑，不会调用该模板文件，因此修改后前端不会有任何变化。

可用调整方法（按操作难度从低到高排序） #

• 方法1：使用Elementor自带排序功能（无需代码）
  打开对应商店页的Elementor编辑器，选中你插入的Products组件，在左侧控制面板切换到「内容」标签，找到「产品卡片」设置分组，即可看到「元素顺序」可拖拽排序列表，直接拖动「标题」项到「图片」项上方，保存后前端立即生效。
• 方法2：自定义商品循环项模板（自由度最高）
  如果自带排序无法满足你的自定义需求，可以通过Elementor主题生成器创建专属的商品项模板：
  1. 进入WordPress后台「Elementor」-「主题生成器」，点击「添加新模板」，类型选择「循环项」，应用对象选择「产品」
  2. 在模板编辑器内按照你想要的展示顺序，拖拽添加商品图片、标题、价格、评分、加购按钮等需要的元素，完成排版后保存模板
  3. 回到商店页的Elementor编辑界面，选中Products组件，在「内容」标签的「皮肤」选项里选择你刚创建的自定义循环模板，保存即可
• 方法3：钩子代码调整（适合有代码基础的用户）
  如果你更习惯用代码控制，可以在子主题的functions.php文件中添加如下代码调整元素优先级，示例为将商品标题移动到图片上方：

  // 调整商店页商品循环项元素优先级
  remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
  add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 20 );
  

注意事项 #

所有自定义代码不要直接写入Hello Elementor或WooCommerce的核心文件，建议放在子主题的functions.php中，或者使用Code Snippets这类代码管理插件添加，避免插件/主题版本更新后自定义内容被覆盖。

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