woocommerce模板製做簡易教程

　　woocommerce是wordpress裏比較好用的電商解決方案，可是製做woocommerce模板相對比較複雜，若是想用woocommerce來建一個展現型的網站，不帶下單功能，咱們能夠很快就能把模板設計出來，下面就跟着ytkah一塊兒來學習吧

　　展現型網站主要用到的woocommerce函數就產品列表頁和產品詳情頁，其他按默認模板

　　一、後臺安裝啓用woocommerce插件，複製/wp-content/plugins/woocommerce/templates/下全部文件到/wp-content/themes/ytkah/woocommerce/（若是沒有woocommerce文件夾，新建一個）

　　二、在/wp-content/themes/ytkah/function.php中添加add_theme_support函數，代碼以下

add_theme_support( 'woocommerce' );

　　三、產品詳情頁模板路徑是/wp-content/themes/ytkah/woocommerce/content-single-product.php，產品多圖調用請參考這篇文章：woocommerce調用產品相冊gallery圖片如何操做?

　　四、產品列表頁模板路徑是/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; ?>

　　五、有些功能須要引用woocommerce插件自帶的css和js文件

　　六、文件加載順序

①/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模板製做