如何自定义设置好看的Woocommerce产品页面和产品卡片

如果使用的是Woocommerce默认的产品页面，可以自定义的地方很少，布局和样式也比较单一。

正常情况下，可以进行配置的也就是这些，通过主题的自定义功能，设置页面的布局，产品的结构设置等。

卡片结构也比较简单，可以配置的内容均为woocommerce默认的卡片结构，均在主题的自定义界面中设置

下面介绍几个可以自定义出产品界面和卡片结构的方式和插件

一、Elementor自定义产品和商店页面如果你的网站已经安装了Elementor，并且不通过其他的商店专用美化插件的情况下，可以直接使用Elementor进行一定的配置，可以把产品页面配置的更加多样化一些。

1. 产品页面在Wordpress后台中找到：模版-新增模版中，选择归档（Archive），添加一个名字

然后可以从模块里面选择一个插入，然后进入Elementor的编辑页面，在左侧的工具栏就可以看到很多产品单页的元素，可以直接拖动到产品页面中，完成后记得最后设置Display condition，把这个页面应用到所有产品中。
如果还不知道Elementor怎么使用的，可以看我这篇文章重磅插件介绍！WordPress Elementor的使用方法（附免费汉化包，送Elementor Pro）

2. 商店页同理，如果想把商店页，或者是分类产品的显示页面自定义更改，也可以新增一个模版，选择产品归档并命名。

然后进入Elementor的编辑页面就可以看到产品的自定义选项了。当然，这里的自定义选项可能还不是很丰富。如果你想展示更多的信息，或者更多样化的配置的话，可能需要借助专门的商店插件来进行美化，比如ShopLentor或者ShopEngine这样的插件实现，接下来展示一下Shoplentor的使用方式。

二、使用ShopLentor自定义产品和商店页面

1. ShopLentor能做什么

ShopLentor = WooCommerce 页面设计神器
它能做什么？

✅ 自定义产品页、商店页（用 Elementor 拖拽组件）
✅ 产品卡片样式自定义（价格、图片、按钮都能换）
✅ 内置常用的商城小功能（倒计时、收藏、比较、标签）
✅ 支持全站统一样式模板
✅ 免费版本已经非常好用！

2. ShopLentor的基本功能

ShopLentor中有很多的Element可以使用，而且这些Element的界面设计相对比较美观，可以进行自定义操作，重要的是这些元素都可以在Elementor中使用，可以根据自己的需要开启。

同时也有很多模块可以使用，根据自己的需要开启

模块名称	作用
Product Tabs	自定义产品详情页中的选项卡布局
Wishlist（愿望清单）	用户收藏产品功能
Product Label	给产品打标“热销”“新品”等
Flash Sale	限时抢购倒计时
Email Automation	邮件提醒/跟进功能
Template Builder（核心）	构建产品页、商店页、购物车等页面

3. 使用Template Builder自定义页面

这是 ShopLentor 最核心的功能！可以自定义很多页面，不仅仅只包括Single Product和Product Archive页面，同时包括Check Out, Account等界面都可以设置。

步骤一：新建产品页模板（Single Product）

后台 → ShopLentor → Template Builder
点击【Add New】→ 选择 Single Product
输入模板名称，点击【Edit with Elementor】

步骤二：进入 Elementor 拖拽编辑界面

你将看到专属于 ShopLentor 的组件面板（WooCommerce 小工具）

以下是常用组件：

组件名称	功能描述
Product Title	显示产品标题
Product Price	显示价格
Product Image / Gallery	显示主图与画廊图
Product Add To Cart	添加至购物车按钮
Product Short Description	简短描述
Product Meta / Category	分类、标签信息
Product Tabs	详情/评价/属性选项卡
Product Stock Progress Bar	剩余库存显示（可做紧迫感营销）
Product Countdown Timer	限时抢购倒计时