Posted on

独立站配置起来-商品列表页

商品列表页配置


1,产品属性过滤 (Product Filtering), Layered Nav widget

实现方法:管理后台自定义设计 Appearance > Customize > widget > sidebar
选择对应 filter 则可以:



2,列表 促销/优惠图标 (Promotion Icon)

列表模板已经有这功能,只需要自定义样式则可以。

3,更多自定义样式,可参考:

WooCommerce Smart Sale Badge – WordPress plugin | WordPress.org
Sales Countdown Timer – WordPress plugin | WordPress.org

4,改变列表页数

add_filter( 'loop_shop_columns',
'woocommerce_cookbook_loop_shop_columns', 20 );
function woocommerce_cookbook_loop_shop_columns( $cols ) {
 return 3;
}





5,自定义排序


// Add a new sorting option
add_filter( 'woocommerce_default_catalog_orderby_options','woocommerce_cookbook_catalog_orderby' );
add_filter( 'woocommerce_catalog_orderby','woocommerce_cookbook_catalog_orderby' );

function woocommerce_cookbook_catalog_orderby( $sortby ) {
 $sortby['oldest_to_newest'] = __( 'Sort by oldest to newest', 'woocommerce' );
 return $sortby;
}

// Add sorting oldest to newest functionality to sorting dropdown
add_filter( 'woocommerce_get_catalog_ordering_args','woocommerce_cookbook_get_catalog_ordering_args' );

function woocommerce_cookbook_get_catalog_ordering_args($args ) {
         // get the orderby value
             $orderby_value = isset( $_GET['orderby'] ) ? wc_clean($_GET['orderby'] ) :   

    apply_filters( 
        'woocommerce_default_catalog_orderby', get_option(
        'woocommerce_default_catalog_orderby' ) );
         	// if the orderby value matches our custom option
         	if ( 'oldest_to_newest' == $orderby_value ) {
         		$args['orderby'] = 'date'; 
        $args['order'] = 'ASC';
         }
 	return $args;
}

6,展示品类图片

function woocommerce_cookbook_category_image() {
     if ( is_product_category() ){
     global $wp_query;
     $cat = $wp_query->get_queried_object();
     $thumbnail_id = intval( get_woocommerce_term_meta(
    $cat->term_id, 'thumbnail_id', true ) );
     $image = wp_get_attachment_url( $thumbnail_id );
     if ( $image ) {
     echo '<img src="' . esc_url( $image ) . '"
    alt="" />';
     }
 }

add_action( 'woocommerce_archive_description',
'woocommerce_cookbook_category_image', 2 );

7,列表内容过滤、自定义列表内容

例子:怎样去掉特定分类

  //Removing a product category from the Shop page
    add_action( 'pre_get_posts',
        'woocommerce_cookbook_pre_get_posts_query' );
        function woocommerce_cookbook_pre_get_posts_query( $q ) {
         if ( ! $q->is_main_query() ) return;
         if ( ! $q->is_post_type_archive() ) return;
         if ( ! is_admin() && is_shop() ) {
         $q->set( 'tax_query', array(array(
             'taxonomy' => 'product_cat',
             'field' => 'slug',
             'terms' => array( 'posters' ),
             'operator' => 'NOT IN'
         )));
         }
         remove_action( 'pre_get_posts',
        'woocommerce_cookbook_pre_get_posts_query' );
    }

8,产品双图片/多图片展示 (Multiple images on PLP)

TODO