输出ul开始标签

//关键代码
function woocommerce_product_loop_start( $echo = true ) {
    ...
    wc_get_template( 'loop/loop-start.php' );

其中loop-start.php功能：输出ul标签、生成相关class类

<ul class="products columns-<?php echo esc_attr( wc_get_loop_prop( 'columns' ) ); ?>">

其中wc_get_loop_prop( ‘columns’ )函数，返回每行列数，即每行展示多少个产品。从而让 CSS 样式可以依据这个类来调整产品的布局。列数修改可以代码编写，也可以在管理后台配置。

输出略缩图

woo已经预设三种图像裁剪尺寸，分别为：’woocommerce_thumbnail、woocommerce_gallery_thumbnail、woocommerce_single。相关代码如下：

public function adjust_intermediate_image_sizes( $sizes ) {
  // Prevent a filter loop.
  $unfiltered_sizes = array( 'woocommerce_thumbnail', 'woocommerce_gallery_thumbnail', 'woocommerce_single' );
  static $in_filter = false;
    if ( $in_filter ) {
	return $unfiltered_sizes;
	}
    $in_filter      = true;
    $filtered_sizes = apply_filters( 'woocommerce_regenerate_images_intermediate_image_sizes', $unfiltered_sizes );
    $in_filter      = false;
    return $filtered_sizes;
}

// class-woocommerce.php
public function add_image_sizes() {
  $thumbnail         = wc_get_image_size( 'thumbnail' );
  $single            = wc_get_image_size( 'single' );
  $gallery_thumbnail = wc_get_image_size( 'gallery_thumbnail' );

  add_image_size( 'woocommerce_thumbnail', $thumbnail['width'], $thumbnail['height'], $thumbnail['crop'] );
  add_image_size( 'woocommerce_single', $single['width'], $single['height'], $single['crop'] );
  add_image_size( 'woocommerce_gallery_thumbnail', $gallery_thumbnail['width'], $gallery_thumbnail['height'],    $gallery_thumbnail['crop'] );
}

function wc_get_image_size( $image_size ) {
	$cache_key = 'size-' . ( is_array( $image_size ) ? implode( '-', $image_size ) : $image_size );
	...
		$image_size = str_replace( 'woocommerce_', '', $image_size );

		if ( 'single' === $image_size ) {
			$size['width']  = absint( wc_get_theme_support( 'single_image_width', get_option( 'woocommerce_single_image_width', 600 ) ) );
			$size['height'] = '';
			$size['crop']   = 0;

		} elseif ( 'gallery_thumbnail' === $image_size ) {
			$size['width']  = absint( wc_get_theme_support( 'gallery_thumbnail_image_width', 100 ) );
			$size['height'] = $size['width'];
			$size['crop']   = 1;

		} elseif ( 'thumbnail' === $image_size ) {
			$size['width'] = absint( wc_get_theme_support( 'thumbnail_image_width', get_option( 'woocommerce_thumbnail_image_width', 300 ) ) );
			$cropping      = get_option( 'woocommerce_thumbnail_cropping', '1:1' );

以图片裁剪尺寸’thumbnail’为例，其中代码

$size['width'] = absint( wc_get_theme_support( 'thumbnail_image_width', get_option( 'woocommerce_thumbnail_image_width', 300 ) ) );

主要功能是获取缩略图的宽度。图像尺寸设置有两种方式：1：通过 add_theme_support 设置的图像尺寸。2：数据库中存储的图像尺寸宽度。若主题有通过add_theme_support 设置的图像尺寸：则用wc_get_theme_support函数获取（优先级高）。若没有设置，则去数据库提取宽度值：get_option( ‘woocommerce_thumbnail_image_width’, 300 )

SELECT * FROM xs_options WHERE option_name = 'woocommerce_thumbnail_image_width';

数据库中存储的图像尺寸宽度更新：

// 更新选项值
update_option( 'woocommerce_thumbnail_image_width', 400 );

add_theme_support 图像尺寸设置：

// wp-content\themes\xshen\inc\woocommerce.php
function xshen_woocommerce_setup() {
    add_theme_support(
        'woocommerce',
        array(
            'thumbnail_image_width' => 150,
            // 其他设置...
        )
    );
}
add_action( 'after_setup_theme', 'xshen_woocommerce_setup' );