您的购物车目前是空的!
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,可能会用到的代码
-
if(have_posts()) :
-
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模板制作
发表回复