当主题需要与 WooCommerce 电商插件深度集成时，不仅要兼容 WooCommerce 的默认样式，还要为产品展示、购物车、结账等页面提供定制化的模板。合理的集成可以让电商网站既有统一的设计风格，又有完整的电商功能。

WooCommerce 模板覆盖机制

WooCommerce 的所有模板文件位于插件目录的 templates 文件夹中。要覆盖某个模板，将对应的文件复制到主题目录下的 woocommerce 文件夹中，保持相同的目录结构。WordPress 会自动使用主题中的模板文件而不是插件的默认模板。

常见的需要覆盖的模板包括产品列表页 archive-product.php、产品详情页 single-product.php、购物车页面 cart/cart.php、结账页面 checkout/form-checkout.php。

产品展示的定制

在产品列表页中，可以定制产品的展示方式。控制每行显示的产品数量，控制产品信息的显示内容，添加自定义的产品标签或徽章。在产品详情页中，可以调整图片展示区域的大小，改变价格和购买按钮的位置，添加自定义的产品信息区域。

WooCommerce 钩子的使用

WooCommerce 提供了大量动作钩子和过滤器，可以在不覆盖模板的情况下修改电商功能。woocommerce_before_main_content 钩子在所有产品列表页顶部插入内容。woocommerce_single_product_summary 钩子控制产品详情页摘要区域的各个部分。woocommerce_cart_totals 钩子控制购物车总计区域的内容。

购物车和结账的定制

购物车页面可以定制商品列表的显示方式、优惠券区域的位置、更新购物车按钮的样式。结账页面可以定制表单字段的顺序、添加额外的说明文字、修改提交按钮的样式。

产品图片的优化

电商主题中，产品图片是用户体验和性能的关键。使用 WooCommerce 的图片尺寸设置，控制缩略图、目录图和大图的尺寸。确保所有产品图片都经过优化，使用 WebP 格式和懒加载。