WooCommerce启用WP Rocket时Flatsome主题图片对齐异常问题

问题表现 #

• 基于Flatsome主题搭建的WooCommerce站点前台出现图片对齐错乱问题
• 初步排查确认：停用WP Rocket插件后图片对齐效果自动恢复，暂未定位到具体冲突触发逻辑
• 异常效果参考：
  

修复方案 #

不需要直接停用WP Rocket，按以下优先级排查配置即可解决：

1. 排查JS延迟加载冲突
   Flatsome的图片布局、响应式对齐强依赖主题前端渲染脚本，WP Rocket默认开启的「延迟JavaScript执行」会打断脚本加载时序，导致布局渲染异常：

• 进入WP Rocket后台「文件优化」设置页，找到「延迟JavaScript执行」的排除输入框
• 加入以下核心脚本路径到排除列表：

/wp-content/themes/flatsome/assets/js/flatsome.js
/wp-content/themes/flatsome/assets/js/ux-frontend.js
/wp-content/plugins/woocommerce/assets/js/frontend/*.js

2. 排查图片懒加载冲突
   如果JS调整后仍有问题，进入WP Rocket「媒体」设置页：

• 临时关闭「启用图片懒加载」测试，若关闭后恢复正常，在懒加载排除规则中加入图片容器类名：.product-image img、.col-inner img即可，不需要全站关闭懒加载

3. 排查CSS优化冲突
   若前两步无效，进入「文件优化」页临时关闭「合并CSS文件」「移除未使用CSS」两项测试：
   Flatsome自带的响应式样式依赖固定加载顺序，被WP Rocket合并、裁剪后容易丢失图片对齐相关的flex、float属性规则，确认是该项问题后，在CSS排除列表中加入Flatsome主题样式文件路径即可。

每次调整配置后，记得清空WP Rocket全站缓存、CDN缓存（如果启用了WP Rocket CDN），再硬刷新页面验证效果。

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