Bright Plugins 正在收购 WordPress 和 WooCommerce 插件。 联系我们

自定义 BOGO 卡片样式

2 分钟阅读 更新于 2026年4月20日 Bright Plugins 团队

摘要
使用样式选项卡,让您的 BOGO 卡片和提示与商店品牌保持一致,而无需修改主题文件。请重点关注最能提升清晰度和转化率的三个方面。

在哪里找到样式选项卡#

  1. 前往 Bright Plugins Pro → BOGO Deal。
  2. 打开样式选项卡。
BOGO 买一送一优惠: Bogo deal styles section

BOGO 样式设置的 80/20 法则#

想要快速获得最佳视觉效果,请优先处理以下三个方面:

  1. 卡片样式:负责结构与可读性。
  2. 标签样式:负责让优惠清晰明了。
  3. 价格 + 提示消息样式:在顾客做决定时增强其信心。

其他一切都只是细节优化。

截图 1 – 卡片样式(先调整布局)#

此部分控制 BOGO 卡片的整体容器。

最重要的内容#

  • 背景和边框
  • 边框圆角
  • 内边距和间距

简洁的卡片能让优惠更易浏览、更值得信赖。

快速建议#

  • 与主题的中性色调保持一致。
  • 使用舒适的内边距,避免卡片显得拥挤。
  • 让形状与主题的按钮/卡片保持一致。

截图 2 – 标签样式(让优惠一目了然)#

标签通常是顾客最先阅读的元素。

最重要的内容#

  • 高对比度的背景和文字
  • 易读的字体大小
  • 简洁的内边距和圆角
BOGO 买一送一优惠: Bogo text labels

快速建议#

  • 为“免费”优惠使用强烈的对比色。
  • 保持标签简短,避免换行。

截图 3 – 价格与提示消息(确认优惠金额)#

这两个方面能减少顾客在最后一步的犹豫。

价格样式#

使用此部分区分:

  • 原价
  • 折扣价

最佳实践:让折扣价在视觉上比原价更醒目。

提示消息样式#

此部分控制优惠生效或未满足条件时,在购物车和商品页面上显示的提示。

最佳实践:让提示背景保持低调但易读,使消息显得贴心而不打扰。

可选的细节优化(追求精致效果时)#

以下设置可帮助卡片与您的商品目录视觉风格保持一致:

  • 商品名称和分类样式
  • 商品图片样式

预览与重置#

使用实时预览#

保存前请检查可读性和对比度。

重置为主题默认值#

用于清除自定义样式并恢复默认外观。

常见问题排查#

  • 由于缓存,更改未显示。
  • 主题或优化插件导致更新延迟。
  • 样式已编辑但未保存。

更新于 2026年4月20日 · 需要帮助?请提交支持工单