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模板制作

原文地址:https://www.cnblogs.com/ytkah/p/11024603.html

时间: 2024-11-10 07:20:43

woocommerce模板制作简易教程的相关文章

WP主题模板制作修改教程

WP主题模板制作修改教程 实际上,当我们打开某个主题的文件夹时,看到的并不止这两个文件,而是更多.但一般来说,在一个完整的 WP 主题文件夹中都应该包含下列文件(也称为模板文件):页面 模板文件 用途首页 index.php 显示网站首页单页 single.php 显示博文的页面(相当于细节页)静态页 page.php 显示静态页的页面(包含各级静态页面)分类页 category.php 显示分类页的页面(相当于栏目页)存档页 archive.php 显示存档页的页面(相当于按时间归类的栏目页)

【Ecmall】ECMall2.x模板制作入门系列(认识ECMall模板)

ECMall2.x模板制作入门系列之1(认识ECMall模板) 从ECMall2.0全新架构发布以来,随着版本的不断更新,ECMall已经逐渐走向一个稳定时期,是时候整理一些实用教程了.下面给大家带来一个模板制作入门教程. 申明:本人第一次写教程.可能只能说一些比较浅显的基础知识.条理性可能不是很到位,说得不对的地方欢迎拍砖并指正,目的是希望通过这次教程能让新手们对模板有一个比较系统的认识. 一.ECMall的模板文件在网站中怎么分布的.怎么找到一个页面所对应的模板theme/ 主题目录 商城模

phpwind9.0模板制作教程——制作论坛风格

由于论坛模板机制和门户等模板机制不同,所以今天我就先重点讲讲论坛模板制作的大概过程. 一.先来熟悉下phpwind9.0的论坛模板机制. 其实phpwind9.0的模板机制和discuzx2.5差不多,都是程序运行本身自带的默认模板(template内文件),然后如果我们自己设计一套模板放在对应的文件夹中并且后台进行指定的话,那么程序就将运行我们新建的模板风格,官方这样做的目的是:想改哪里就做哪里的模板,很方便很灵动,如果说为了修改一个论坛界面的风格动辄就要去做整站模板的话,那可就得不偿失了.

echarts &nbsp; js 模板制作 地图 案例分享

今天分享一个 echarts   js 模板制作 地图 案例,有类似需求的筒子可以参考 O(∩_∩)O 需求:因为最近管理的全国各地代理服务器越来越多,有时上级需要看下我们的代理分布,比如带宽,比如供应商,如果用纯excel不是很直观,就套用了前端的Js模板,修改了些代码,填充部分值进去,就出来基本效果了. 上效果图: 基本上把全国各地的资源情况很直观的显示出来了,这里只填充了部分值,后期会将值存入mysql,并且用上ajax 来塞值,这里就列个基本的效果图. 5分钟上手echarts,官网教程

移动开发之【微信小程序】的原理与权限问题以及相关的简易教程

这几天圈子里到处都在传播着这样一个东西,微信公众平台提供了一种新的开放能力,开发者可以快速开发一个小程序,取名曰:微信公众平台-小程序 据说取代移动开发安卓和苹果,那这个东东究竟是干吗用的?但很多人觉得是网页版应用. 有的人很鸡冻,但是--最后文章会提及具体的权限开放问题,所以,还是保持一颗冷静的?比较好. 那我们先来看看组件和API开放了哪些服务: 视图容器:视图(View).滚动视图.Swiper 基础内容:图标.文本.进度条 表单组件:按钮.表单等等 操作反馈 导航 媒体组建:音频.图片.

java dom4j 解析XML文件 简易教程

XML 来自: W3School XML 被设计用来传输和存储数据. HTML 被设计用来显示数据. 什么是 XML? eXtensible Markup Language XML 指可扩展标记语言(EXtensible Markup Language) XML 是一种标记语言,很类似 HTML XML 的设计宗旨是传输数据,而非显示数据 XML 标签没有被预定义.您需要自行定义标签. XML 被设计为具有自我描述性. XML 是 W3C 的推荐标准 XML 与 HTML 的主要差异 XML 不

magnetom模板制作

我个人认为Magento模板制作的难点在于不了解Magento的架构,不会调动block.Magento的block调动几乎都是靠xml.在下面的内容会提及如何操作. 制作Magento模板的前提是:你要会Html,div+css.不管你想做什么模板,这个都是基础.如果想要做出个精致的Magento,还必须精通div+css.因为涉及到一个浏览器的兼容问题,当你在Firefox下打开你的Magento商城看着感觉是很完美,但是到了IE6下完全变形,而且中国还有50%左右的人用IE6. 在制作Ma

文件上传利器SWFUpload入门简易教程

凡做过网站开发的都应该知道表单file的确鸡肋. Ajax解决了不刷新页面提交表单,但是却没有解决文件上传不刷新页面,当然也有其它技术让不刷新页面而提交文件,该技术主要是利用隐藏的iFrame, 较Ajax要麻烦许多,而且其提交方式依然在底层是使用的表单file,这里我们不详谈.而且如果是提交较小的文件,我们能接受,如果提交的文件较大,我 们便要忍受很长的等待时间,而浏览器却没有任何提示,我们也没有办法知道文件上传的进度… 但是现在,网上出现了一个名为SWFUpload的上传组件,该组件利用Fl

局域网的传输介质、网线水晶头制作图解教程

硬件工具 压线钳 测试仪 万用表 同轴电缆 双绞线 双绞线的分类 双绞线的制作方法 网线水晶头制作图解教程   http://www.360doc.com/content/12/0130/13/8395472_182723119.shtml 光纤 光纤的分类 无线传输 无线电波 微波 红外线 射频传输 蓝牙技术 局域网布线 选择传输介质 设计与管理网络布线 安装电缆