Wordpress +WooCommerce 自定义商店前端

以下是我整理的WooCommerce商店前端自定义指南，结合最佳实践与技术方案，涵盖主题开发、布局定制、品牌一致性实现及核心功能配置：

​a. 为 WooCommerce 选择和安装主题​

​主题声明支持WooCommerce​

在主题的functions.php中添加代码声明支持：



function woocommerce_support() { add_theme_support('woocommerce'); } add_action('after_setup_theme', 'woocommerce_support'); 


主题模板代码简介：


模版文件分离头尾以及创建产品归档页模版文件


wc_get_template_part();


这里主要展示了根据WCC模板层级拆分的过程


获取产品列表、以及完成分页


    
 
  • 产品列表
    • 





if (have_posts()) { while(have_posts()) { the_post(); global $post; } } 


    
 
  • 产品分页
    • 





woocommerce_pagination(); 


    
 
  • 产品排序
    • 





woocommerce_catalog_ordering(); 




paginate_links(apply_filters('woocommerce_pagination_args', [ 'base' => '', ])); 




wc_price( wc_get_price_to_display($product, [ 'qty' => 1, 'price' => $product->get_price() ]) ); wc_get_weight( $product->get_weight(), 'g') 


产品列表页排序的实现


    
 
  • woocommerce_catalog_ordering()
    • 





add_filter('woocommerce_catalog_orderby', 'tt_modify_catalog_ordering'); function tt_modify_catalog_ordering($options) { $options = [ 'menu_order' => '默认', 'popularity' => '人气', 'price' => '价格', ]; return $options; } 


    
 
  • 获取分类图片
    • 
 
  • woocommerce_subcategory_thumbnail($category)
    • 





$tag_id = 19; $term = get_term($tag_id, 'product_cat'); woocommerce_subcategory_thumbnail($term); 


    
 
  • 获取分类链接
    • 
 
  • get_term_link(term,term,taxonomy = ”)
    • 





$tag_id = 19; $term = get_term($tag_id, 'product_cat'); // wp_terms 表 // wp_termmeta 表里面的 thumbail_id 字段 $termUrl = get_term_link($term, 'thumbail_id'); 




$config = [ 'mod1' => 19, 'mod2' => 15, 'mod3' => 18, ]; foreach($config as $mod => $tag_id) { $term = get_term($tag_id, 'product_cat'); $term_url = get_term_link($term); $children = get_term([ 'taxonomy' => 'product_cat', 'hide_empty' => false, 'parent' => $tag_id, ]); $id = get_term_meta($tag_id, 'thumbnail_id', true); if (empty($id)) { $thumb = TT_THEME_URL . 'images/banner01.jpg'; } else { $thumbb = wp_get_attachment_image_url($id, 'shop_single'); } } 




​b. 自定义商店外观和布局​


​三种定制界面的方式​


    
 
  1. ​钩子（Hooks）​​
    
   移除默认元素（如产品标题、评分）：
    2. 





remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5); 




//更多构子例子： // remove title remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 ); // remove rating stars remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 ); // remove product meta remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 ); // remove description remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 ); // remove images remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 ); // remove related products remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 ); // remove additional information tabs remove_action('woocommerce_after_single_product_summary ','woocommerce_output_product_data_tabs',10); 


2. ​模板覆盖​

  例如覆盖：


woocommerce/templates/single-product/meta.php 覆盖为 Child_theme/woocommerce/single-product/meta.php


独立的新模板：




$terms = wp_get_post_terms( $post->ID, 'product_cat' ); $categories = wp_list_pluck( $terms, 'slug' ); if ( in_array( 'posters', $categories ) ) { wc_get_template_part( 'content', 'single-product-posters' ); //新定制模板 } else { wc_get_template_part( 'content', 'single-product' ); } 


3. 自定义Css Customizing the product page with CSS scripts




add_filter( 'woocommerce_blocks_product_grid_item_html', 'ssu_custom_render_product_block', 10, 3); function ssu_custom_render_product_block( $html, $data, $post ) { $productID = url_to_postid( $data->permalink );$product = wc_get_product( $productID ); return '<li class="wc-block-grid__product"> <div> <a href="'.$product->get_permalink().'">'.$product->get_image( 'shop-feature').'</a> <span>'.$product->get_title().'</span> </div> </li>'; } 


主题模板层级规则：


优先级从高到低：


    
 
  • woocommerce.php → 自定义模板（如taxonomy-product_cat-$slug.php） → 默认WooCommerce模板（plugins/woocommerce/templates/）
    • 
 
  • ​覆盖模板​：复制插件模板到主题的woocommerce/目录并修改（如覆盖产品页标题：theme/woocommerce/single-product/title.php）
    • 
 
  • 创建独立模板（如海报类产品专用）：
    • 





if (in_array('posters', $categories)) { wc_get_template_part('content', 'single-product-posters'); } 


4. ​CSS样式​

  通过CSS选择器调整布局（如产品网格间距）


​关键模板函数​


    
 
  • wc_get_template_part('content', 'product')：加载产品列表项模板
    • 
 
  • woocommerce_pagination()：分页控件
    • 
 
  • woocommerce_catalog_ordering()：排序下拉菜单（可自定义选项）：
    • 





add_filter('woocommerce_catalog_orderby', function($options) { return ['menu_order' => '默认', 'price' => '价格']; }); 


WooCommerce模版层级规则详解：


    
 
  1. 产品详情页模板层级
    2. 



0 → woocommerce.php


1 → $custom.php // 自定义模板文件，如果设置的话


2 → single-product.php


3 → woocommerce/single-product.php


4 → plugins/woocommerce/templates/single-product.php // wcc 插件中的模板文件


数字越小，优先级越高。查看产品详情时，可验证上述层级。


    
 
  1. 产品分类归档页模板层级
    2. 



0 → woocommerce.php


1 → taxonomy-product_cat-slug.php2→woocommerce/taxonomy−productcat−slug.php2→woocommerce/taxonomy−productc​at−slug.php


3 → taxonomy-product_cat.php


4 → woocommerce/taxonomy-product_cat.php


5 → plugins/woocommerce/templates/taxonomy-product_cat.php


其中 $slug 代表的是产品分类的别名。 查看产品分类时，可验证上述层级。


    
 
  1. 产品标签归档页模板层级
    2. 



0 → woocommerce.php


1 → taxonomy-product_tag-slug.php2→woocommerce/taxonomy−producttag−slug.php2→woocommerce/taxonomy−productt​ag−slug.php


3 → taxonomy-product_tag.php


4 → woocommerce/taxonomy-product_tag.php


5 → plugins/woocommerce/templates/taxonomy-product_tag.php


查看产品标签时，可验证上述层级。


    
 
  1. 全局属性归档页模板层级
    2. 



0 → woocommerce.php


1 → taxonomy-pa_attrslug−attrs​lug−iterm_slug.php


2 → woocommerce/taxonomy-pa_attrslug−attrs​lug−iterm_slug.php


3 → taxonomy-pa_attr_slug.php 4 → woocommerce/taxonomy-pa_attr_slug.php


5 → archive-product.php


6 → woocommerce/archive-product.php


7 → plugins/woocommerce/templates/archive-product.php


查看产品属性时，可验证上述层级。


    
 
  1. 店铺页面
    2. 



0 → woocommerce.php


1 → archive-product.php


2 → woocommerce/archive-product.php


3 → plugins/woocommerce/templates/archive-product.php


模板覆盖式主题开发要点：


自定义模板，本质上就是把woocommerce的默认模板覆盖，模板都是由一块一块的小模板组成，进行覆盖和替代。




299×601 7.83 KB


wc_get_template函数是调用模板文件块：


    
 
  • 
  
    wc_get_template(templatename,templaten​ame,args = , templatepath=”,templatep​ath=”,default_path = ”)
    
  
      
   
    • $template_name 要引入的模板文件名称
      • 
   
    • $args 数组
      • 
   
    • $template_path 模板所在的路径，一般默认
      • 
   
    • $default_path 默认的模板路径，一般默认
      • 
  
    • 





wc_get_template('cart/cart-item-data.php', ['item_data' => $item_data]); 


到主题的 woocommerce 下去寻找 cart/cart-item-data.php 文件并引入，


如果没有找到此文件，则引入 plugins/woocommerce/templates/cart/cart-item-data.php 文件。


    
 
  • 
  
    wc_get_template_part(slug,slug,name)
    
  
      
   
    • $slug 要引入的模板文件名字的前缀
      • 
   
    • $name 引入的模板文件名字
      • 
   
    • 例如: 模板文件 shop-header.php ，那么 shop 就是前缀，也就是 $slug
      • 
  
    • 
 
  • 
  
    wc_get_template_part() 寻找模板的流程
    
  
      
   
    • 步骤1: 到主题所在的目录下寻找 $slug-$name.php 文件，如 “content-sigle-product.php”，找到则引入，否则下一步
      • 
   
    • 步骤2: 到主题的 woocommerce 目录下寻找 $slug-$name.php 文件，找到则引入，否则下一步
      • 
   
    • 步骤3: 到 plugins/woocommerce/templates 目录下寻找$slug-$name.php 文件，找到则引入，否则下一步
      • 
   
    • 步骤4: 到主题的 woocommerce 目录下寻找 $slug.php 文件，如 “content.php”，找到则引入，否则下一步
      • 
   
    • 步骤5: 到 plugins/woocommerce/templates 目录下寻找 $slug.php 文件，找到则引入，否则不引入。
      • 
  
    • 





​c. 实现品牌和视觉一致性​


​品牌元素整合​


    
 
  • ​分类图片​：woocommerce_subcategory_thumbnail($category) 显示分类缩略图
    • 
 
  • ​动态获取分类数据​：
    • 





$term = get_term($tag_id, 'product_cat'); $thumb = wp_get_attachment_image_url(get_term_meta($tag_id, 'thumbnail_id', true), 'shop_single'); 


    
 
  • ​统一色彩方案​：通过CSS变量定义主色、辅助色，应用于按钮、价格等元素
    • 





​d. Footer 页脚配置全解​


​结构与内容​




<footer class="bg-light"> <div class="container"> <nav><!-- 导航链接 --></nav> <p>© 2025 公司名称</p> <div><!-- 社交媒体图标 --></div> </div> </footer> 


​关键技术方案​


    
 
  1. ​固定底部​（CSS）：
    2. 





footer { position: absolute; bottom: 0; width: 100%; } 


2. ​响应式适配​（媒体查询）：




@media (max-width: 600px) { footer { padding: 20px; } } 


3. ​动态地址换行​：




<p>地址：<br>北京市朝阳区</p> 


可以放置在页脚中的各种元素，如表单、链接、最新文章列表、社交媒体图标等




1400×852 196 KB


参考： How To Edit the Footer in WordPress Using Every Method Possible




​e. Header 头部配置详解​


​定制化实践​


    
 
  • ​调整高度​（Storefront主题示例）：
    • 





#masthead.site-header { height: 155px !important; } @media (max-width: 320px) { height: 80px !important; /* 移动端适配 */ } 


    
 
  • ​隐藏后台Header​：
    • 





add_action('admin_head', function() { echo '<style>.woocommerce-layout__header { display: none; }</style>'; }); 


参考：top bar: How to Add a Top Bar in Storefront Theme - QuadLayers




​f. Ajax 应用指南​


​实现“立即购买”按钮​


    
 
  1. ​PHP端​（添加按钮与处理逻辑）：
    2. 





add_action('woocommerce_after_add_to_cart_button', function() { echo '<button class="buy-now" data-id="'.get_the_id().'">立即购买</button>'; }); 


2. ​Ajax请求​（jQuery）：




$('.buy-now').click(function() { $.ajax({ url: wc_add_to_cart_params.wc_ajax_url, data: { product_id: $(this).data('id') }, success: () => window.location.href = checkout_url // 跳转结账页 }); }); 


参考： github.dev/tutsplus/wp…




<?php define('WP_USE_THEMES', false); require_once(__DIR__ . '/../../../../wp-load.php'); $http_origin = $_SERVER['HTTP_ORIGIN']; $site_url = get_site_url(); if ($http_origin !== $site_url) { wp_die('Access denied. You are not authorized to access this page.'); } if (isset($_POST['act']) && $_POST['act'] && function_exists($_POST['act'])) { if ($data = call_user_func($_POST['act'])) { header('Content-Type: application/json; charset=UTF-8'); echo json_encode($data); } } 


ajax返回模板html内容：




$data = $wpdb->get_results($sql); if (isset($_POST['return']) && $_POST['return'] === 'html' && $data) { $html = null; foreach ($data as $item) { $html .= wc_get_template_html('woocommerce/single-product/a.php', ['a' => $item]); } return $html; } return $data; 


ajax接口：




add_action('wp_ajax_recenlty_viewed_product_paginate', 'recenlty_viewed_product_paginate', -1); add_action('wp_ajax_nopriv_recenlty_viewed_product_paginate', 'recenlty_viewed_product_paginate', -1); // 最近浏览产品接口 function recenlty_viewed_product_paginate() { $products = do_shortcode('[yith_my_recenlty_viewed_page]'); wp_send_json_success(compact('products')); } 


​接口安全规范​




if ($_SERVER['HTTP_ORIGIN'] !== get_site_url()) { wp_die('Access denied'); // 来源验证 } 




​扩展工具推荐​


    
 
  • ​可视化编辑​：Elementor Pro（拖拽设计产品页）
    • 
 
  • ​高级筛选​：PWF插件（Ajax产品过滤、SEO友好URL）
    • 
 
  • ​云部署​：腾讯云服务器（CVM） + 对象存储（COS）加速媒体文件加载
    • 




 
本模板前端文章覆盖了从主题开发到交互优化的全流程，建议结合官方文档测试修改效果。关键操作前备份数据，避免兼容性问题。记得! 做好备份！


 
  

        # 前端
      
        # 状态模式
      
  
 
 Logo 
技术共进，成长同行——讯飞AI开发者社区
 
技术共进，成长同行——讯飞AI开发者社区
 
 
  
更多推荐
  
 
机器学习与人工智能
 
python# 创建基类# 定义一对多关系# 定义多对一关系# 定义多对多关系（通过关联表）# 关联表（用于多对多关系）SQLAlchemy ORM提供了强大而灵活的数据库操作方式，通过本文的介绍，您应该能够：安装和配置SQLAlchemy定义数据模型和关系执行基本的CRUD操作构建复杂查询管理数据库事务遵循最佳实践SQLAlchemy还有更多高级特性，如混合属性、事件监听、自定义查询等，值得进一
 
avatar 讯飞AI开发者社区
 
cover
 
【数据结构】图的遍历
 
 
avatar 讯飞AI开发者社区
 
cover
 
【论文】AI技术对幼儿园课程建构的影响研究（一）
 
 
avatar 讯飞AI开发者社区