安装好 Woocommerce 插件以后，默认情况下，Woocommerce 就会基于主题的文章和页面模板生成商店的相关页面。但是这样通常不能满足我们的需要，这时候就需要修改我们的主题适配 Woocommerce 了。

首先在 functions.php 声明对 Woocommerce 的支持：

add_action( 'after_setup_theme', 'woocommerce_support' );
function woocommerce_support() {
    add_theme_support( 'woocommerce' );
    add_theme_support( 'wc-product-gallery-zoom' ); // 支持产品详情页的JS
    add_theme_support( 'wc-product-gallery-lightbox' );
    add_theme_support( 'wc-product-gallery-slider' );
}

然后在主题根目录创建一个文件夹 woocommerce，按照自己的需要吧 /plugins/woocommerce/templates 的文件复制到 /wp-content/themes/当前主题/woocommerce 下，即可在功能上覆盖 woocommerce 的页面。

商品详情页举例，如果要覆盖 /wp-content/plugins/woocommerce/templates/single-product.php，需要创建 /wp-content/themes/当前主题/woocommerce/single-product.php

如果遇到 CSS 样式未能生效，官方建议是在外层 div 添加类 woocommerce。

参考：https://github.com/woocommerce/woocommerce/issues/2739