WooCommerce 给了每个网站经营者打造电商平台的自由，想要设计出符合品牌调性的界面和功能，使用子主题是非常实用的方式。子主题可以让你自由定制样式，还能在主题更新时保留所有修改内容。这篇文章将带你走进 WooCommerce 子主题的实战操作，从创建到应用一步步讲清楚。
什么是子主题？
子主题是一种基于主（父）主题的扩展，它能继承主主题的全部功能，并允许你添加或修改其中的代码、样式、模板文件。这样一来，父主题更新时不会影响你做过的自定义。
用个比喻来说：父主题就像一套现成的房子，而子主题就是你在这套房子的基础上重新装修，让它更符合你的风格。
创建 WooCommerce 子主题的步骤
第一步：建立子主题文件夹
在 WordPress 的 /wp-content/themes/ 目录下，新建一个文件夹，比如叫 my-woocommerce-child。这个文件夹就是你的子主题位置。
第二步：添加样式表文件 style.css
在子主题文件夹中，新建一个 style.css 文件
并添加以下内容：
/*
Theme Name: My WooCommerce Child
Template: storefront
Version: 1.0
*/
其中 Template 的值要与你当前使用的父主题文件夹名称一致（例如使用 Storefront 主题就写 storefront）。
第三步：添加 functions.php 文件
为了正确加载父主题的样式，需要创建一个 functions.php 文件，并添加以下代码：
<?php
add_action( ‘wp_enqueue_scripts’, ‘my_child_theme_enqueue_styles’ );
function my_child_theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}
这样就完成了子主题的基本结构。
激活子主题
创建好之后，登录 WordPress 后台，进入“外观 > 主题”，你会看到“ My WooCommerce Child”这个主题，点击“启用”就完成了子主题的启用操作。
如果子主题设置正确，网站不会发生任何变化，但从现在开始，你就可以自由地修改代码了，不用担心父主题更新覆盖。
实战一：自定义产品页面样式
WooCommerce 产品页面的默认排版可能不符合你的品牌风格。你可以复制父主题的 content-single-product.php 文件到子主题中对应位置，比如：
/my-woocommerce-child/woocommerce/single-product/content-single-product.php
然后自由修改 HTML 结构、添加新模块、移动价格和按钮的位置等等。WooCommerce 会优先加载你子主题中的这个文件，而不是原始的父主题版本。
实战二：修改颜色和字体样式
在子主题的 style.css 文件中添加自定义 CSS，可以快速调整颜色、间距、字体等视觉效果。
.woocommerce .product .price {
color: #e60023;
font-size: 18px;
}
这类修改既安全又方便，能让整个商店界面更符合品牌气质。
实战三：增加功能模块
除了样式调整，你还可以在子主题的 functions.php 文件中添加一些小功能。比如在每个产品标题后面显示“热销”标签：
add_filter( ‘the_title’, ‘add_hot_label_to_product_title’, 10, 2 );
function add_hot_label_to_product_title( $title, $id ) {
if ( get_post_type( $id ) === ‘product’ ) {
$title .= ‘ 🔥热销’;
}
return $title;
}
这样一段代码，就能让产品标题更具吸引力。
子主题开发注意事项
修改模板时，一定要保持 WooCommerce 文件结构一致，否则可能不生效。
不建议在子主题中复制太多 WooCommerce 模板文件，尽量按需修改，方便未来维护。
每次修改前记得备份，避免操作失误。
使用版本控制工具（如 Git）管理子主题内容，是提高开发效率的好方法。
总结
子主题是定制 WooCommerce 商店外观最可靠的方式。它为你提供了修改页面结构、控制样式、扩展功能的空间，同时还能保留更新父主题的自由。只要掌握基本结构，配合 CSS 和 PHP，哪怕是简单的设计需求，也能让你的 WooCommerce 商店展现出与众不同的专业感。