WooCommerce模板制作
发布于
by
将 wp-contentpluginswoocommercetemplates 里的所有文件复制到你主题下的w…
将 wp-contentpluginswoocommercetemplates 里的所有文件复制到你主题下的woocommerce文件夹里。
一、所要安装的插件：
WooCommerce
WooCommerce Blocks
Woocommerce Template Hints – 模板位置插件（可选）
Product Gallery Slider for Woocommerce – 相册增强插件（可选）
二、函数功能
1、模板主要函数功能都在这里面(includes/) | 3.6.2版本。
wc-template-functions.php
大部分功能可复制到functions.php重新定义。
2、模板主要动作钩子都在里面(includes/) | 3.6.2版本。
wc-template-hooks.php
3、其他功能
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
<?php
//Woocommerce相册支持
add_theme_support( ‘wc-product-gallery-zoom’ );
add_theme_support( ‘wc-product-gallery-lightbox’ );
add_theme_support( ‘wc-product-gallery-slider’ );
add_theme_support( ‘woocommerce’, array(
‘thumbnail_image_width’ => 200,
‘single_image_width’ => 300,
) );
//新建产品列表页class类名，在循环中添加wc_product_class2()；
function wc_product_class2( $class = ”, $product_id = null ) {
echo ‘class=”col-md-4 ‘ . esc_attr( join( ‘ ‘, wc_get_product_class( $class, $product_id ) ) ) . ‘”‘;
}
//从新定义循环title样式
function woocommerce_template_loop_product_title() {
echo ‘<h3 class=”woocommerce-loop-product__title”>’ . get_the_title() . ‘</h3>’;
}
/**去除动作
* Hook: woocommerce_single_product_summary. 去除产品详细信息动作。
* @hooked woocommerce_template_single_add_to_cart – 30 购物车，不同页面有不同形式，“wc-template-functions.php”“single-product/add-to-cart”。
* @hooked woocommerce_template_single_meta – 40 产品meta分类,”single-product/meta.php”
* @hooked woocommerce_template_single_sharing – 50 产品分享，“single-product/share.php”
*/
remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_add_to_cart’, 30 );
remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_meta’, 40 );
remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_sharing’, 50 );
//相关产品数量
if ( ! function_exists( ‘woocommerce_output_related_products’ ) ) {
function woocommerce_output_related_products() {
$args = array(
‘posts_per_page’ => 3,
‘columns’ => 3,
‘orderby’ => ‘rand’, // @codingStandardsIgnoreLine.
);
woocommerce_related_products( apply_filters( ‘woocommerce_output_related_products_args’, $args ) );
}
}
//shop面包屑导航样式
if ( ! function_exists( ‘woocommerce_breadcrumb’ ) ) {
/**
* Output the WooCommerce Breadcrumb.
*
* @param array $args Arguments.
*/
function woocommerce_breadcrumb( $args = array() ) {
$args = wp_parse_args( $args, apply_filters( ‘woocommerce_breadcrumb_defaults’, array(
‘delimiter’ => ‘ / ’,
‘wrap_before’ => ‘<ul class=”woocommerce-breadcrumb title-manu pull-right “>’,
‘wrap_after’ => ‘</ul>’,
‘before’ => ”,
‘after’ => ”,
‘home’ => _x( ‘Home’, ‘breadcrumb’, ‘woocommerce’ ),
) ) );
$breadcrumbs = new WC_Breadcrumb();
if ( ! empty( $args[‘home’] ) ) {
$breadcrumbs->add_crumb( $args[‘home’], apply_filters( ‘woocommerce_breadcrumb_home_url’, home_url() ) );
}
$args[‘breadcrumb’] = $breadcrumbs->generate();
/**
* WooCommerce Breadcrumb hook
*
* @hooked WC_Structured_Data::generate_breadcrumblist_data() – 10
*/
do_action( ‘woocommerce_breadcrumb’, $breadcrumbs, $args );
wc_get_template( ‘global/breadcrumb.php’, $args );
}
}
/*
* 去除链接中的栏目名称
* 参考外链
* https://gist.github.com/timersys/78a2305d810c27efcb10ce62712d1d95
* https://stackoverflow.com/questions/43447175/woocommerce-how-to-remove-product-product-category-from-urls
*/
add_filter(‘request’, function( $vars ) {
global $wpdb;
if( ! empty( $vars[‘pagename’] ) || ! empty( $vars[‘category_name’] ) || ! empty( $vars[‘name’] ) || ! empty( $vars[‘attachment’] ) ) {
$slug = ! empty( $vars[‘pagename’] ) ? $vars[‘pagename’] : ( ! empty( $vars[‘name’] ) ? $vars[‘name’] : ( !empty( $vars[‘category_name’] ) ? $vars[‘category_name’] : $vars[‘attachment’] ) );
$exists = $wpdb->get_var( $wpdb->prepare( “SELECT t.term_id FROM $wpdb->terms t LEFT JOIN $wpdb->term_taxonomy tt ON tt.term_id = t.term_id WHERE tt.taxonomy = ‘product_cat’ AND t.slug = %s” ,array( $slug )));
if( $exists ){
$old_vars = $vars;
$vars = array(‘product_cat’ => $slug );
if ( !empty( $old_vars[‘paged’] ) || !empty( $old_vars[‘page’] ) )
$vars[‘paged’] = ! empty( $old_vars[‘paged’] ) ? $old_vars[‘paged’] : $old_vars[‘page’];
if ( !empty( $old_vars[‘orderby’] ) )
$vars[‘orderby’] = $old_vars[‘orderby’];
if ( !empty( $old_vars[‘order’] ) )
$vars[‘order’] = $old_vars[‘order’];
}
}
return $vars;
});
//禁用页面的评论功能
function disable_page_comments( $posts ) {
if ( is_page()) {
$posts[0]->comment_status = ‘disabled’;
$posts[0]->ping_status = ‘disabled’;
}
return $posts;
}
add_filter( ‘the_posts’, ‘disable_page_comments’ );
?>
|
三、模板及使用方法
1、single页面判断
|
1
2
3
4
5
6
7
8
9
|
<?php get_header(); ?>
<?php if (is_product()) : ?>
<?php
get_template_part( ‘woocommerce/single-product’);
else :
get_template_part( ‘content’, get_post_format() );
endif;
?>
<?php get_footer(); ?>
|
2、产品内容页模板(woocommerce/single-product)
|
1
2
3
|
<?php while ( have_posts() ) : the_post(); ?>
<?php wc_get_template_part( ‘content’, ‘single-product’ ); ?>
<?php endwhile; // end of the loop. ?>
|
测试省去content-single-product.phpy页面似乎会出错。（后期再测试）
3、产品内容调取页（content-single-product.php）
可直接将钩子里的函数拿出来直接使用。
4、列表页（archive-product.php）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<?php
if ( woocommerce_product_loop() ) {
if ( wc_get_loop_prop( ‘total’ ) ) {
while ( have_posts() ) {
the_post();
/**
* Hook: woocommerce_shop_loop.
*
* @hooked WC_Structured_Data::generate_product_data() – 10
*/
do_action( ‘woocommerce_shop_loop’ );
wc_get_template_part( ‘content’, ‘product-list’ );
}
}
/**
* Hook: woocommerce_after_shop_loop.
*
* @hooked woocommerce_pagination – 10
*/
do_action( ‘woocommerce_after_shop_loop’ );
} else {
/**
* Hook: woocommerce_no_products_found.
*
* @hooked wc_no_products_found – 10
*/
do_action( ‘woocommerce_no_products_found’ );
}
?>
|
5、列表页循环（content-product-list.php）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
// Ensure visibility.
if ( empty( $product ) || ! $product->is_visible() ) {
return;
}
?>
<div <?php wc_product_class3(); ?>>
<div class=“hover ehover14”>
<?php woocommerce_template_loop_product_link_open() ?>
<img src=“<?php echo post_thumbnail_src(); ?>“ class=“img-responsive”>
<?php woocommerce_template_loop_product_link_close();?>
</div>
<div class=“title”>
<?php
do_action( ‘woocommerce_before_shop_loop_item’ );
/**
* Hook: woocommerce_shop_loop_item_title.
*
* @hooked woocommerce_template_loop_product_title – 10
*/
do_action( ‘woocommerce_shop_loop_item_title’ );
/**
* Hook: woocommerce_after_shop_loop_item_title.
*
* @hooked woocommerce_template_loop_rating – 5
* @hooked woocommerce_template_loop_price – 10
*/
woocommerce_template_loop_product_link_close();
?></div>
</div>
|
四、文章调取代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<?php
global $wp_query, $post, $woocommerce,$query_string;
$args = array(
‘tax_query’ => array(
‘relation’ => ‘OR’,
array(
‘taxonomy’ => ‘product_cat’,//此处参数指定为产品目录
‘field’ => ‘id’,//调用依据为产品目录id
‘terms’ => array( 17 ),//11为产品目录id
),
),
‘posts_per_page’ => 4,//一共需要调用的文章数量
‘post_status’ => ‘publish’,//调用的文章为已经发布
‘post_type’ => ‘product’,//调用的类型为产品（product）
‘no_found_rows’ => 1,
‘order’ => “ASC”,//文章排序为时间正排序
‘meta_query’ => array()//还可以使用post meta进行查询，这个和wordpress循环中使用一样
);
//以上为循环的参数
$query= new WP_Query( apply_filters( ‘woocommerce_products_widget_query_args’, $args ) );//建立循环查询
//开始循环
if($query->have_posts()) :
while ( $query->have_posts() ) :$query->the_post(); ?>
<div class=“col-sm-6 col-md-3”>
<div class=“tpic”><img src=“<?php echo post_thumbnail_src(); ?>“ class=“size100”></div>
<h4 class=“tit20”><a href=“<?php the_permalink(); ?>“><?php the_title(); ?></a></h4>
<p><?php echo mb_strimwidth(strip_tags(apply_filters(‘the_excerpt’, $post->post_content)), 0, 50,“…”); ?></p>
</div>
<?php endwhile; //结束循环
wp_reset_query();//清除循环
endif;
?>
|
类别：WordPress开发、
本文收集自互联网，转载请注明来源。
如有侵权，请联系 wper_net@163.com 删除。
猜你喜欢GUESS YOU LIKE
评论功能已经关闭!