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 提供的一组可供选择的图像。通过使用这些图像徽章，商家可以增加产品的视觉吸引力，帮助突出显示关键的产品信息，如特价、促销活动等，从而吸引顾客的注意。
徽章图像设置
徽章位置
商家可以使用徽章位置设置来确定徽章在产品上的显示位置。
最大宽度
商家可以设置单个产品页面中徽章的最大宽度，以确保徽章不会过大影响产品展示的美观性。
最大宽度循环
对于循环项目，如存档页中的产品列表，商家可以设置与单个产品页面不同的最大宽度，以适应不同的展示需求。
边距
在徽章周围设置边距，以像素为单位，确保徽章与周围内容之间有足够的空间。
填充
商家还可以在徽章内部设置填充值，以像素为单位，给徽章的内容增加更多的内边距，使徽章在视觉上更为突出。
图像设计设置
Kadence Shop Kit 插件提供了多种图像设计设置选项，商家可以通过这些设置进一步自定义产品徽章的外观，使其更符合商店的设计风格和品牌形象。
颜色
使用 Kadence 提供的图像徽章时，商家可以根据需要调整徽章的颜色。
背景颜色
商家可以在徽章背景后添加背景颜色，增强徽章的可见性和美观性。
边框半径
设置边框半径可以使产品徽章的角落变得圆润，提供更柔和的视觉效果。
边框宽度
商家可以设置产品徽章的边框宽度，以像素为单位。
边框颜色
如果商家选择使用边框，边框颜色可以进行自定义调整，以确保徽章的边框与整个页面设计相协调，提供更好的视觉效果和控制。
自定义图像徽章设置
Kadence Shop Kit 插件可以让商家使用自定义图像徽章，这为产品展示提供了更多的个性化选项。商家可以上传自己的图像作为产品徽章，并根据需要调整徽章的外观和位置，以更好地融入商店的整体设计。
徽章图像
选择自定义图像徽章时，商家可以通过此设置上传或添加媒体文件，作为产品徽章的图像。这样，商家可以使用自己设计的图像，增强品牌标识。
徽章位置
商家可以设置徽章在产品图片上的位置，选择包括右下角、左下角、中间、右上角或左上角等位置选项。这使商家能够根据自己的需求优化徽章的展示，确保它能够吸引顾客的注意。
最大宽度
商家可以设置最大宽度来控制自定义图像徽章的大小，限制其不超过指定的像素值。这个设置主要适用于单个产品页面，防止徽章过大影响产品的展示效果。
最大宽度循环
对于存档页面或其他 WooCommerce 相关的产品循环，商家可以设置不同的最大宽度，以适应不同页面的展示需求，使徽章大小更符合页面布局。
边距和填充
通过调整边距和填充（以像素为单位），商家可以进一步优化徽章的位置和展示效果。边距可以帮助调整徽章与周围内容的距离，而填充则增加徽章内部的空间，使徽章更加醒目。
徽章可见性设置
商家可以通过徽章可见性设置，决定徽章的显示范围。例如，商家可以选择让徽章仅在特定的产品、促销产品或低库存产品上显示，从而提高徽章的针对性和效果。
自定义图像设计设置
在 Kadence Shop Kit 插件中，使用自定义图像徽章时，商家可以通过图像设计设置进一步优化徽章的视觉效果。以下为可用的设计选项说明：
背景颜色
可以为徽章添加背景颜色，使其在产品图像上更加醒目。
边框半径
设置边框半径可以使徽章边角变得圆润，增强徽章的视觉柔和度。
边框宽度
可根据需要设置徽章的边框宽度（以像素为单位）
边框颜色
当启用边框宽度后，可以自定义边框的颜色。
自定义文本徽章设置
Kadence Shop Kit 插件提供自定义文本徽章功能，支持商家为产品添加个性化的文字标识，例如“新品”、“热卖”、“限时折扣”等。通过一系列位置和样式设置，商家可以灵活地控制文本徽章的展示效果，使其更符合品牌和页面布局需求。
徽章文本
使用文本徽章时，可在徽章文本设置中输入需要显示的内容。这些文字将直接展示在产品徽章上，用于传达促销信息或产品状态。
徽章位置
商家可以将文本徽章放置在产品图像的不同位置，包括：
右下角
左下角
中间
左上角
右上角
不同位置的选择有助于根据页面设计灵活布局。
最大宽度
设置单个产品页面中徽章的最大宽度，以像素为单位，防止徽章因文字较多而影响整体美观。
最大宽度循环
对于产品列表页（如商店主页、分类页面等），可以设置不同的最大宽度，保证徽章在各种页面中的展示一致。
边距与填充
商家可通过设置边距（Margin）和填充（Padding）进一步控制徽章的位置和内部留白。合理的间距有助于增强视觉效果，使徽章在页面中更具可读性和辨识度。
徽章可见性设置
支持指定徽章的显示范围。例如，仅在促销产品、缺货产品或某些分类下显示，便于精准传达信息。
自定义文本设计设置
使用 Kadence Shop Kit 插件创建自定义文本徽章时，商家可以通过丰富的设计设置控制文本外观，这样更符合网站风格，增强视觉效果和产品识别度。以下是可用的设计选项说明：
颜色
设置文本的主颜色，以控制徽章上文字的显示色彩。
背景颜色
为徽章添加背景颜色，使文字在产品图像上更清晰。
字体大小
指定文本的字体大小（以像素为单位）。
字体样式
可选择文字的样式，如加粗（Bold）等。
文本对齐
设置文本在徽章内部的对齐方式。
边框半径
设置边框圆角值，使徽章边角更加柔和。
边框宽度
控制徽章边框的粗细，单位为像素。
边框颜色
启用边框宽度时，可设置边框颜色。
自定义 HTML 徽章设置
Kadence Shop Kit 插件提供自定义 HTML 徽章功能，也可通过 HTML 代码自由添加文本、图片或其他媒体内容，使徽章在视觉呈现和功能表达上都更加丰富。
徽章 HTML 内容编辑
可直接在编辑区域添加文本、HTML 或媒体文件，展示更复杂的内容结构。
点击“添加媒体”按钮可将图片或其他媒体文件插入徽章。
使用“Visual”标签页可以在所见即所得模式下编辑 HTML 内容，更直观地查看效果。
切换至“Text”标签页可输入纯 HTML 代码，自由控制徽章结构与样式。
徽章位置
支持将 HTML 徽章定位在以下产品图像区域：
右下角
左下角
中间
左上角
右上角
最大宽度
设置单个产品页面上徽章的最大宽度，以像素为单位，防止徽章尺寸过大影响页面布局。
最大宽度循环
针对产品循环页（如商店列表、分类页面）可设置不同的最大宽度，确保在各种展示场景中都保持良好的视觉效果。
边距与填充
可调整边距值控制徽章与产品内容之间的间距。
设置填充值可增加徽章内部文字或元素的空间，提升视觉清晰度。
徽章可见性设置
支持控制徽章在哪些产品上展示，例如特定分类、促销商品或库存状态匹配的商品，实现更精准的展示控制。
自定义 HTML 设计设置
在使用 Kadence Shop Kit 插件创建自定义 HTML 徽章时，商家可以借助设计设置对徽章的外观进行全面调整，使其更贴合网站整体风格，并提升视觉效果。以下是具体的设计选项说明：
背景颜色
可为徽章添加背景颜色，增强其在产品图片上的对比度，使内容更加醒目，提升可读性和视觉吸引力。
边框半径
设置边框半径可以让徽章的边角呈现圆润效果。
边框宽度
该选项用于设置徽章边框的粗细（以像素为单位）。
边框颜色
启用边框后，可以自定义边框的颜色，使其与徽章内容和网站配色方案保持协调，进一步提升整体视觉一致性。
徽章可见性设置整理
Kadence Shop Kit 插件中的徽章可见性设置位于设计设置之后，主要用于控制产品徽章的显示范围。该设置分为两类：一般可见性 和 产品可见性，商家可根据实际需求灵活配置。
一般可见性
决定徽章在页面中的整体显示位置，包含以下选项：
仅限产品循环：徽章仅显示在产品列表页（如商店首页、分类页）。
产品循环和单一产品：徽章同时显示在产品列表页和单个产品详情页。
仅限单一产品：徽章仅显示在单个产品详情页。
产品可见性：使用此设置可确定产品徽章在哪些产品上可见。
商品徽章文章设置说明
在创建商品徽章（Product Badge）时，编辑器右侧会显示一些可用的设置选项：
文章状态（Status）
状态：这表示产品徽章的状态。产品徽章可以保存为已发布、草稿或待审核帖子。
可见性（Visibility）
可见性：指定产品徽章的可见性，可以设置为公开、密码保护或私人。请注意，密码保护和私人徽章不会显示在前端。
徽章优先级设置（Order）
在“文章属性（Post Attributes）”中，可以设置徽章的优先级：
数字越大，优先级越高。
当多个徽章作用于同一产品时，优先级高的徽章将覆盖优先级低的徽章。
可实现多个徽章并存，同时避免冲突。
动态自定义 HTML 占位符说明
在使用自定义 HTML 徽章（Custom HTML Badge）或文字徽章（Text Badge）时，可以使用以下两个动态占位符，使徽章内容自动显示相关产品信息：
可用占位符：
{quantity}
动态显示商品库存数量。
{sale-percentage}
动态显示商品折扣百分比。
在查询卡片中使用商品徽章
要在查询卡片中正确显示商品徽章，需确保使用正确的图像区块。
使用规范：
使用：Shop Kit Product: Image Block
此区块支持商品徽章的正常显示，推荐使用。
避免使用：Advanced Image Block + 动态内容
这种组合不支持徽章显示，可能导致前端不显示徽章。
注意事项：
如果你的商品徽章未在卡片中显示，请检查是否使用了 Shop Kit 提供的专用图像区块。
总结
Kadence Shop Kit 插件为 WooCommerce 商店提供了强大而灵活的产品徽章系统，无论是图像、文字还是 HTML，自定义能力都极高。通过合理设置徽章类型、样式、位置和可见性，商家可以有效增强产品展示效果，突出重点信息，提升用户对商品的关注度和购买转化率。