woocommerce templates to create simple tutorial

　　woocommerce wordpress is relatively easy to use in electronic business solutions, but to make woocommerce template is relatively complicated, if you want to use to build a showcase woocommerce type of site, not taken off the single-function, we may soon be able to put out the template design, Here's a follow up to learn it ytkah

　　Display website mainly used woocommerce function on the product list page and product detail page, and the rest according to the default template

　　1, installed on the background to enable woocommerce plugin, copy / wp-content / plugins / woocommerce / templates / all files to the / wp-content / themes / ytkah / woocommerce / (If you do not woocommerce folder, create a new one)

　　2, was added add_theme_support /wp-content/themes/ytkah/function.php function code is as follows

add_theme_support( 'woocommerce' );

　　3, the product details page template path is /wp-content/themes/ytkah/woocommerce/content-single-product.php, product multi-map calls please refer to this article: woocommerce calling Products Gallery gallery pictures how to operate?

　　4, the product list page template path is the code /wp-content/themes/ytkah/woocommerce/archive-product.php, it may be used

　　　　　　　　<?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. Some features require references woocommerce plugin comes with css and js files

　　6, file load order

① / wp-content / themes / hqt / woocommerce / global / wrapper-start.php inside the outer div / main

② breadcrumbs /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

and many more

　　If you do not know which page template file to use, can be viewed in real time by a third-party plug-ins, such as WooCommerce Template Hints

　　Well, it introduced so many, ytkah wish you a speedy start with woocommerce template production

woocommerce templates to create simple tutorial

Guess you like