WooCommerce 可以很好的集成到大多数 WordPress 主题中。在有些定制开发的主题中，主题的样式可能会和 WooCommerce 的样式有一些冲突或不匹配的情况，这种情况下，WooCommerce 的商店页面、商品分类页面、商品页面的布局可能会出现错乱或显示不正常。我们就需要针对我们的主题做一些改造，使我们的主题很好的支持 WooCommerce。我们可以使用两个方法解决这个问题：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/9000.html
- 使用 hooks (针对高级用户和开发者)
- 在主题中使用 WooCommerce 的内容输出函数 woocommerce_content() 调用 WooCommerce 内容
方法一：使用 woocommerce_content() 函数
此方案可以让我们在主题中创建一个新模板中，这个模板负责所有 WooCommerce 分类法存档和商品显示，此方案使用所有默认的 WooCommerce 模板，并且没有办法修改默认的 WooCommerce 模板，对 WooCommerce 不熟悉的开发者或者不需要对 WooCommerce 进行深度定制的情况下，建议使用这种方法。这种方案实现起来非常简单，按照下面的方法操作就可以了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/9000.html
第一步，复制 page.php 页面模板为 woocommerce.php 模板
复制主题的 page.php，重命名为 woocommerce.php，此文件的位置应该是在：wp-content/themes/你的主题/woocommerce.php.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/9000.html
第二步，编辑 woocommerce.php，替换 WordPress 循环为 WooCommerce 循环
使用你最喜欢的编辑器，打开 woocommerce.php，找到页面的文章循环代码，一般是以下面的代码开始：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/9000.html
<?php if ( have_posts() ) :以下面代码结束：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/9000.html
<?php endif; ?>删除以上两段代码中间的内容，粘贴下面的代码到上面的两段代码之间即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/9000.html
<?php woocommerce_content(); ?>完成以上操作后，我们使用了 WooCommerce 的循环代码，代替了 WordPress 默认的文章循环代码。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/9000.html
[wprs_c-alert type=”warning” content=”注意：使用 woocommerce.php 文件的时候，我们将不能在主题中覆盖 WooCommerce 的默认模板文件。”]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/9000.html
方法二：使用 hooks
Hook 的方法比使用 woocommerce_content 的方法更复杂，同事也更灵活，这个方式和使用 hook 创建主题的方法类似，也是 WooCommerce 兼容 Twenty Ten 和 Eleven 的方法。在主题的 functions.php 文件中插入以下代码。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/9000.html
首先卸载 WooCommerce 默认封装 HTML 标记：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/9000.html
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);然后挂载我们自己主题的 HTML 标记：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/9000.html
add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);
function my_theme_wrapper_start() {
echo '<section id="main">';
}
function my_theme_wrapper_end() {
echo '</section>';
}确保上面的标记和你所用主题的标记相匹配，具体标记可以在 page.php 中响应的位置找到。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/9000.html
声明 WooCommerce 支持
一旦主题做好了 WooCommerce 支持，我们可以在代码中声明我们的主题是支持 WooCommerce 的，这样就可以隐藏后台中 “你的主题没有声明 WooCommerce 支持” 的消息，在主题的 functions.php 文件中加入以下代码来实现这个功能：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/9000.html
add_action( 'after_setup_theme', 'woocommerce_support' );
function woocommerce_support() {
add_theme_support( 'woocommerce' );
}做好了以上一些步骤，你的主题已经做好基本的 WooCommerce 支持了，至于实现更多的布局样式和功能，就需要根据实际情况进行一些二次开发工作了，如果你在 WooCommerce 二次开发中遇到了问题，欢迎在评论中提出讨论。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/9000.html