Kadence 教学：Kadence Shop Kit 插件 – 产品徽章功能

Kadence Shop Kit 插件为 WooCommerce 商店提供了强大的扩展功能，其中产品徽章功能尤为突出。通过自定义徽章，商家可以突出显示产品的重要信息，如促销、库存状态或其他特色属性。这些徽章可以帮助商家提高产品的可见性，吸引顾客的注意力，提升购物体验。

什么是 Kadence Shop Kit 的产品徽章功能？

Kadence Shop Kit 插件的产品徽章功能可以让商家通过可自定义的徽章来展示有关产品的关键信息。例如，商家可以通过徽章标记特价商品、显示库存不足或突出新品。徽章的样式、位置和内容都可以进行灵活调整，与商店的整体设计风格保持一致。

添加新徽章

启用 Kadence Shop Kit 的产品徽章功能后，商家可以轻松进行添加。只需按照以下步骤操作：

• 进入徽章管理界面
  导航至 WordPress 后台，点击“产品” -> “徽章”。在该页面，点击顶部的“添加新徽章”按钮，开始创建新的徽章。

• 选择徽章类型
  创建新徽章时，商家需要选择徽章类型。徽章类型决定了徽章的样式和外观。参考以下Kadence Shop Kit 提供四种主要徽章类型，商家可以根据需要选择最合适的类型。

徽章类型

Kadence Shop Kit 提供了四种徽章类型，每种类型都能满足不同的商店需求，商家可以根据具体情况选择：

• 图像徽章类型
  该类型可以让商家使用 Kadence 提供的预制图像作为产品徽章。这些图像可以轻松应用到产品上，用于标识促销、特价或其他特别信息。

• 自定义图像徽章类型
  商家可以上传自己的图片作为产品徽章，完全自定义徽章的外观。这使得商家可以根据品牌风格设计独特的徽章图像。

• 自定义文本徽章类型
  商家可以自定义文本徽章，输入所需的文字并设置文本样式。这个类型也支持动态选项，可以根据产品的不同属性（如折扣、数量等）显示不同的文本。

• 自定义 HTML 徽章类型
  自定义 HTML 徽章可以让商家使用 HTML 代码或者所见即所得（WYSIWYG）编辑器来自定义徽章内容。商家可以插入文本、图像或其他多媒体内容，提供最大的灵活性来设计和展示徽章。

徽章图像设置

徽章位置
商家可以使用徽章位置设置来确定徽章在产品上的显示位置。

最大宽度
商家可以设置单个产品页面中徽章的最大宽度，以确保徽章不会过大影响产品展示的美观性。

最大宽度循环
对于循环项目，如存档页中的产品列表，商家可以设置与单个产品页面不同的最大宽度，以适应不同的展示需求。

边距
在徽章周围设置边距，以像素为单位，确保徽章与周围内容之间有足够的空间。

填充
商家还可以在徽章内部设置填充值，以像素为单位，给徽章的内容增加更多的内边距，使徽章在视觉上更为突出。

图像设计设置

Kadence Shop Kit 插件提供了多种图像设计设置选项，商家可以通过这些设置进一步自定义产品徽章的外观，使其更符合商店的设计风格和品牌形象。

颜色
使用 Kadence 提供的图像徽章时，商家可以根据需要调整徽章的颜色。

背景颜色
商家可以在徽章背景后添加背景颜色，增强徽章的可见性和美观性。

边框半径
设置边框半径可以使产品徽章的角落变得圆润，提供更柔和的视觉效果。

边框宽度
商家可以设置产品徽章的边框宽度，以像素为单位。

边框颜色
如果商家选择使用边框，边框颜色可以进行自定义调整，以确保徽章的边框与整个页面设计相协调，提供更好的视觉效果和控制。

徽章图像
选择自定义图像徽章时，商家可以通过此设置上传或添加媒体文件，作为产品徽章的图像。这样，商家可以使用自己设计的图像，增强品牌标识。

徽章位置
商家可以设置徽章在产品图片上的位置，选择包括右下角、左下角、中间、右上角或左上角等位置选项。这使商家能够根据自己的需求优化徽章的展示，确保它能够吸引顾客的注意。

最大宽度
商家可以设置最大宽度来控制自定义图像徽章的大小，限制其不超过指定的像素值。这个设置主要适用于单个产品页面，防止徽章过大影响产品的展示效果。

最大宽度循环
对于存档页面或其他 WooCommerce 相关的产品循环，商家可以设置不同的最大宽度，以适应不同页面的展示需求，使徽章大小更符合页面布局。

边距和填充
通过调整边距和填充（以像素为单位），商家可以进一步优化徽章的位置和展示效果。边距可以帮助调整徽章与周围内容的距离，而填充则增加徽章内部的空间，使徽章更加醒目。

徽章可见性设置
商家可以通过徽章可见性设置，决定徽章的显示范围。例如，商家可以选择让徽章仅在特定的产品、促销产品或低库存产品上显示，从而提高徽章的针对性和效果。

背景颜色
可以为徽章添加背景颜色，使其在产品图像上更加醒目。

边框半径
设置边框半径可以使徽章边角变得圆润，增强徽章的视觉柔和度。

边框宽度
可根据需要设置徽章的边框宽度（以像素为单位）

边框颜色
当启用边框宽度后，可以自定义边框的颜色。

徽章文本
使用文本徽章时，可在徽章文本设置中输入需要显示的内容。这些文字将直接展示在产品徽章上，用于传达促销信息或产品状态。

徽章位置
商家可以将文本徽章放置在产品图像的不同位置，包括：

• 右下角
• 左下角
• 中间
• 左上角
• 右上角
  不同位置的选择有助于根据页面设计灵活布局。

最大宽度
设置单个产品页面中徽章的最大宽度，以像素为单位，防止徽章因文字较多而影响整体美观。

最大宽度循环
对于产品列表页（如商店主页、分类页面等），可以设置不同的最大宽度，保证徽章在各种页面中的展示一致。

边距与填充
商家可通过设置边距（Margin）和填充（Padding）进一步控制徽章的位置和内部留白。合理的间距有助于增强视觉效果，使徽章在页面中更具可读性和辨识度。

徽章可见性设置
支持指定徽章的显示范围。例如，仅在促销产品、缺货产品或某些分类下显示，便于精准传达信息。

颜色
设置文本的主颜色，以控制徽章上文字的显示色彩。

背景颜色
为徽章添加背景颜色，使文字在产品图像上更清晰。

字体大小
指定文本的字体大小（以像素为单位）。

字体样式
可选择文字的样式，如加粗（Bold）等。

文本对齐
设置文本在徽章内部的对齐方式。

边框半径
设置边框圆角值，使徽章边角更加柔和。

边框宽度
控制徽章边框的粗细，单位为像素。

边框颜色
启用边框宽度时，可设置边框颜色。

徽章 HTML 内容编辑

• 可直接在编辑区域添加文本、HTML 或媒体文件，展示更复杂的内容结构。
• 点击“添加媒体”按钮可将图片或其他媒体文件插入徽章。
• 使用“Visual”标签页可以在所见即所得模式下编辑 HTML 内容，更直观地查看效果。
• 切换至“Text”标签页可输入纯 HTML 代码，自由控制徽章结构与样式。

徽章位置

支持将 HTML 徽章定位在以下产品图像区域：

• 右下角
• 左下角
• 中间
• 左上角
• 右上角

最大宽度

设置单个产品页面上徽章的最大宽度，以像素为单位，防止徽章尺寸过大影响页面布局。

最大宽度循环

针对产品循环页（如商店列表、分类页面）可设置不同的最大宽度，确保在各种展示场景中都保持良好的视觉效果。

边距与填充

可调整边距值控制徽章与产品内容之间的间距。

设置填充值可增加徽章内部文字或元素的空间，提升视觉清晰度。

徽章可见性设置

支持控制徽章在哪些产品上展示，例如特定分类、促销商品或库存状态匹配的商品，实现更精准的展示控制。

背景颜色
可为徽章添加背景颜色，增强其在产品图片上的对比度，使内容更加醒目，提升可读性和视觉吸引力。

边框半径
设置边框半径可以让徽章的边角呈现圆润效果。

边框宽度
该选项用于设置徽章边框的粗细（以像素为单位）。

边框颜色
启用边框后，可以自定义边框的颜色，使其与徽章内容和网站配色方案保持协调，进一步提升整体视觉一致性。

一般可见性

决定徽章在页面中的整体显示位置，包含以下选项：

• 仅限产品循环：徽章仅显示在产品列表页（如商店首页、分类页）。
• 产品循环和单一产品：徽章同时显示在产品列表页和单个产品详情页。
• 仅限单一产品：徽章仅显示在单个产品详情页。

产品可见性：使用此设置可确定产品徽章在哪些产品上可见。

文章状态（Status）

状态：这表示产品徽章的状态。产品徽章可以保存为已发布、草稿或待审核帖子。

可见性（Visibility）

可见性：指定产品徽章的可见性，可以设置为公开、密码保护或私人。请注意，密码保护和私人徽章不会显示在前端。

徽章优先级设置（Order）

在“文章属性（Post Attributes）”中，可以设置徽章的优先级：

• 数字越大，优先级越高。
• 当多个徽章作用于同一产品时，优先级高的徽章将覆盖优先级低的徽章。
• 可实现多个徽章并存，同时避免冲突。