Dragon龙主题商城商品主图改为正方形css代码

本文最后更新于2024年8月21日，部分网盘链接偶尔抽风，下载地址如有失效，请在文章评论区留言反馈。

如果你使用的是龙主题，发现商品详情主图是横版的，老刘以前做电子商务网站或者淘宝的时候 ，商品主图都是正方形，有点不习惯，所以老刘笨拙的，各种百度，学习css，用一些代码把商品内页主图改为正方形了，本篇文章作为自己的备忘录，也欢迎喜欢正方形主图的朋友参考使用。

虽然商品设置里面是有商城归档页缩略图比例的，但是它的内页比例仍然是3:2的。

更改后效果：

• 商城首页

• 商城内页

• 商城侧边栏

• 首页CMS商品模块

• 侧边栏商品效果

• 底部通栏商品效果

注意：老刘改后的css代码底部通栏要选择商品，如果选择文章+商品，就会出现文章缩略图为3:2，而商品缩略图为正方形的尴尬布局。

CSS代码

/*商城商品主图*/
.shop .product .preview .slider-feature {
	height:600px!important;
	max-height:360px!important;
}
.shop .product .preview .slider-thumb {
	max-height:100px!important;
}

/*文章插入商品缩略图*/
.insert-post.shop .insert-post-thumb {
	width:120px!important;
	height:120px!important;
}

/*侧边小工具商品聚合缩略图改为正方形*/
.widget_lxtx_juhe li {
	padding-bottom:30px!important;
}

.widget_lxtx_juhe.shop li.has-thumb .tab-item-titless {
	max-height:60px!important;
	-webkit-line-clamp:3!important;
}

使用方法

WordPress后台-外观-自定义，加入以上代码发布即可。