分享笔记:

WooCommerce 特色产品添加自定义标签

推荐产品标签

WooCommerce教程浏览文章

文章目录

WooCommerce 默认会为所有打折商品添加一个促销标签。如果你想为商品添加其他标签，通常需要使用额外的插件来实现。

其中之一就是，WooCommerce应该提供添加一个“特色商品”标签的选项，因为这是它一个默认功能。这个功能其实就是在商店的商品排序让这些特色商品显示在前面，几乎没有其他的用途了。

怎么在WooCommerce设置特色产品？

在 WooCommerce 设置特色商品非常简单。在产品列表外面直接点击小星星或者在产品编辑里面选中“推荐产品”，这都可以给我们需要的产品设置特色产品或推荐产品。

如果你想快速设置，可以通过分类给店铺添加特色产品。

怎么给特色产品添加自定义标签？

上面说过了，特色产品是没有像折扣产品那样自带一个小标签的（你要是用的一些高级主题可能会自带），所以这里我们做的就是利用特色产品已有的 featured 类，并添加一些简单的 CSS 代码，给特色商品添加一个标签并显示你想要的文字内容。

/* 特色产品标签 */
li.featured { 
position: relative
}
li.featured:before { 
padding: 3px 8px; 
text-align: center; 
background: #FB4B7A; 
color: white; 
font-weight: bold; 
position: absolute; 
top: 6px; 
right: 6px; 
font-size: 18px; 
content: "特色产品"; 
z-index: 10
}

你可以将代码添加到主题自定义的“额外 CSS”部分。当然，你可以根据自己的喜好自定义 CSS 代码，比如更改文字大小 (`font-size`)、背景颜色 (`background`)、文字颜色 (`color`)，以及显示的内容 (`content`)，随你喜欢。