ulli/li/ul有序
公司专注于为企业提供做网站、网站设计、微信公众号开发、商城网站建设，微信小程序，软件按需设计网站等一站式互联网企业服务。凭借多年丰富的经验，我们会仔细了解各客户的需求而做出多方面的分析、设计、整合，为客户设计出具风格及创意性的商业解决方案，成都创新互联更提供一系列网站制作和网站推广的服务。
ullo/lo/ul无序
属性：list-style
list-style-type：设置列表项标志的类型（none就是前面没有小圆点）
list-style-image：将图象设置为列表项标志。
list-style-position：设置列表中列表项标志的位置
其实都可以 就看喜欢 div布局
div class="wrap"
div商品/div
div商品/div
div商品/div
div商品/div
div商品/div
/div
UL 布局
ul class=“wrap”
li商品/li
li商品/li
li商品/li
/ul
居中对齐可以写样式控制，列如：
.wrap{width:600px; margin:auto auto;}
如果列表项需要两端对齐的话，可以对列表项精确控制即可
WooCommerce产品图片有三种尺寸：
1、Single Product Image：是最大的缩略图，用在产品详情页面展示产品大图
2、Catalog Images：用在shop首页、相关产品、交叉销售和增量销售中
3、Product Thumbnails：最小的缩略图，用在购物车页、购物车小工具，产品详情页大图下方那一堆小图也是这个尺寸.
4、下述所有代码都应放在主题的functions.php中
add_filter( 'woocommerce_output_related_products_args', 'wc_custom_related_products_args' );
function wc_custom_related_products_args( $args ){
$args = array(
'posts_per_page' = 3,
'columns' = 3,
'orderby' = 'rand'
);
return $args;
}
5、只更改数量无法达到想要的效果，还需要修改样式表，在主题的style.css里添加如下样式：
woocommerce .related ul li.product,
woocommerce .related ul.products li.product,
woocommerce-page .related ul li.product,
woocommerce-page .related ul.products li.product{
width:30%;
}