woocommerce模板制作简易教程

woocommerce是wordpress里比较好用的电商解决方案，但是制作woocommerce模板相对比较复杂，如果想用woocommerce来建一个展示型的网站，不带下单功能，我们可以很快就能把模板设计出来，下面就跟着ytkah一起来学习吧

展示型网站主要用到的woocommerce函数就产品列表页和产品详情页，其余按默认模板

1、后台安装启用woocommerce插件，复制/wp-content/plugins/woocommerce/templates/下所有文件到/wp-content/themes/ytkah/woocommerce/（如果没有woocommerce文件夹，新建一个）

2、在/wp-content/themes/ytkah/function.php中添加add_theme_support函数，代码如下

add_theme_support( 'woocommerce' );

3、产品详情页模板路径是/wp-content/themes/ytkah/woocommerce/content-single-product.php，产品多图调用请参考这篇文章：woocommerce调用产品相册gallery图片如何操作?

4、产品列表页模板路径是/wp-content/themes/ytkah/woocommerce/archive-product.php，可能会用到的代码

　　　　　　　　<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<div class=”item col–xs-6 col–sm-4 col–md-3″>
<a href=”<?php the_permalink(); ?>”>
<img src=”<?php the_post_thumbnail_url( ‘small‘ ); ?>” alt=”<?php the_title(); ?>”>
<p><?php the_title(); ?></p>
</a>
</div>
<?php endwhile; ?>
<?php else : ?>
This is no product here!
<?php endif; ?>

5、有些功能需要引用woocommerce插件自带的css和js文件

6、文件加载顺序

①/wp-content/themes/hqt/woocommerce/global/wrapper-start.php里面的外层div/main

②面包屑导航/wp-content/themes/hqt/woocommerce/global/breadcrumb.php

③产品信息/wp-content/themes/hqt/woocommerce/content-single-product.php
包含
图片展示
@hooked woocommerce_show_product_sale_flash是否促销标志
@hooked woocommerce_show_product_images
产品简要信息
@hooked woocommerce_template_single_title – 5
@hooked woocommerce_template_single_rating – 10
@hooked woocommerce_template_single_price – 10
@hooked woocommerce_template_single_excerpt – 20
@hooked woocommerce_template_single_add_to_cart – 30
@hooked woocommerce_template_single_meta – 40
@hooked woocommerce_template_single_sharing – 50
@hooked WC_Structured_Data::generate_product_data() – 60
产品详细信息
@hooked woocommerce_output_product_data_tabs – 10
@hooked woocommerce_upsell_display – 15
@hooked woocommerce_output_related_products – 20

等等

如果不知道页面用到哪些模板文件，可以用第三方插件来实时查看，比如WooCommerce Template Hints

好了，就介绍这么多，ytkah祝您早日入手woocommerce模板制作

作者：跨境电商通浏览： 382 人次更新：2025年06月01日

首页>WooCommerce>woocommerce模板制作简易教程

电商独立站搭建方案

营销优化（MO）

2025年06月01日最新面向大型网站所有者的抓取预算管理指南

2025年06月01日最新如何编写和提交 robots.txt 文件

2025年06月01日最新市场营销优化（MARQ）方案

2025年06月01日最新如何结合使用站点地图扩展

2025年06月01日最新域名和关键词在搜索的特性统计

定制主题优势 vs 模板主题

对比维度定制主题通用模板主题
独特性 100%原创设计，避免同质化可能被数百家网站使用
性能优化 按需编码，无冗余代码包含大量无用功能代码
功能契合度 完全匹配业务需求需要妥协或复杂改造
SEO基础 从架构层面优化SEO 通用SEO结构，效果有限
维护成本 代码清晰，易于维护复杂嵌套，维护困难
扩展性 预留接口，便于扩展扩展受模板限制
加载速度 精简代码，速度更快冗余功能拖慢速度
品牌形象 强化品牌识别度难以建立独特形象

woocommerce模板制作简易教程

独立站搭建方案申请

营销优化（MO）方案申请

在线咨询