zoukankan      html  css  js  c++  java
  • 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模板制作

  • 相关阅读:
    2018年春季个人阅读计划
    软件需求与分析读后感
    假期读后感3
    假期读后感2
    假期读后感1
    四则运算2
    软件工程概论第一次作业
    《大道至简》读后感
    HMX-Server C++ 分步式服务器大版本更新了(有源码)
    HMX-Server-分步式服务器框架(开源+源码)
  • 原文地址:https://www.cnblogs.com/ytkah/p/11024603.html
Copyright © 2011-2022 走看看