为 SureCart 产品制作自定义加购按钮（含加载动画与 Tooltip）

“创建按钮”

• text: “添加加载动画”

• text: “添加 Tooltip”

• text: “搞定”

— Bricks 对 SureCart v3+ 的集成提供了现成的「加购按钮（Add-to-Cart button）」元素，单产品页和查询循环里都能用。但如果我们需要的不只是一个纯文字按钮，比如要可以嵌套内容的自定义按钮，就可以用其他 Bricks 元素拼一个，获得更多控制权。 本教程带你完成： - 用 Bricks 元素创建自定义按钮

• 点击按钮后添加加载动画或自定义样式

• 可选：给按钮加 Tooltip（悬浮提示） ## 创建按钮 第一步是创建自定义按钮。 ### 第 1 步：选元素 想要最大灵活性，创建自定义按钮的最佳元素是 div。用 div 可以保证没有任何默认样式，而且能往里面嵌套任意元素（Button 元素就不行）。 ### 第 2 步：变成真正的按钮 我们得让这个元素是实际意义上的按钮，而不是 div。方法：把 HTML 标签改成 button——在下拉框里选 ‘custom’（自定义），然后自定义标签填 ‘button’： ### 第 3 步：添加按钮内容 这个例子里，我们用 Bricks 的图标（icon）元素在按钮里放一个购物车图标。（如果按钮里不打算放任何文字，记得给按钮加 aria-label 属性。） 这里放什么都可以，图标只是个简单示例。 然后给 div 元素设置样式，让它看起来更像按钮：背景、内边距、hover/focus 样式等等。 ### 第 4 步：在结构里的摆放位置 要让新按钮能把当前产品加入购物车，它在结构中的位置很重要，SureCart 才能用得上这个按钮。 如果在单产品页（single product view） ——按钮必须放在 ‘Product’（产品）元素内部的某个位置。 如果在产品查询循环里 ——按钮必须放在 ‘Product Card’（产品卡片）元素内部的某个位置（见上文结构图）。 前端点击这个按钮，就会把当前产品加入购物车。 ## 添加加载动画 SureCart 默认的加购按钮点击后会有个小加载动画，在购物车打开前给出「正在处理」的视觉反馈。这是用 Interactivity API 给按钮加一个 ‘busy’（忙碌中）类实现的。 我们可以在自定义按钮上复刻这个行为：给新按钮添加下面这个自定义属性： Name（名称） – data-wp-class--bl-add-to-cart__busy

Value（值） – context.busy 这样，按钮被点击后、购物车打开前，会加上 bl-add-to-cart__busy 这个类（你可以改成任意类名）。用 %root%.bl-add-to-cart__busy 选择器，就能只在按钮 ‘busy’ 状态下设置样式。 下面做个能跑的示例：用我们的 bl-add-to-cart__busy 类，复刻默认加购按钮同款 spinner（旋转加载圈）。把这段 CSS 直接加到新按钮元素的 CSS 设置里： css %root% { position: relative; } /* add spinner to ::before */ %root%::before { --track-color: #0d131e20; --stroke-width: 2px; --spinner-size: 1em; -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; border: solid var(--stroke-width) var(--track-color); border-radius: 50%; border-right-color: currentColor; border-top-color: currentColor; display: inline-block; height: var(--spinner-size); width: var(--spinner-size); -webkit-transition: opacity .25s ease; transition: opacity .25s ease; left: calc(50% - 8px); opacity: 0; position: absolute; top: calc(50% - 8px); visibility: hidden; content: ''; transform: none; } /* reveal spinner only when button busy */ %root%.bl-add-to-cart__busy::before { opacity: 1; visibility: visible } /* hide other button content when button busy */ %root%.bl-add-to-cart__busy > * { opacity: 0; visibility: hidden; } 原理：用 ::before 伪元素加一个 spinner，然后随着 bl-add-to-cart__busy 类的添加/移除，切换按钮内容和 spinner 的显示与隐藏。 现在点击按钮后，spinner 就会出现： 想在构建器里临时预览 spinner 方便调样式？把 bl-add-to-cart__busy 类加到「CSS classes」选项里（就在自定义 CSS 输入框下面），调完再删掉。 ## 添加 Tooltip 取决于按钮内容和设计，给按钮加一个 hover/focus 时显示的 Tooltip，告诉用户这个按钮是干嘛的，是个好主意。 添加 Tooltip 的方式和给 Bricks 其他元素添加类似，不过我们要的是 hover 时显示、不是点击时显示——因为点击按钮会触发购物车。 ### 简单 CSS Tooltip Bricks 内置了 CSS tooltip，可以加到任意元素上、hover 时显示。给新按钮元素添加下面两个自定义属性即可： Name – data-balloon

Value – Add to cart Name – data-balloon-pos

Value – top ### 响应式 Tooltip 如果你希望 tooltip 位置能自动调整、根据可用空间保证始终可见，那就需要 JS 方案了。二选一： - 按这篇教程手动加到你的按钮元素上：/how-to-create-responsive-tooltips-in-bricks/

• 或者往页面里加一个 BricksExtras Tooltip/Popover 元素，这个功能是内置的：把元素设为 ‘tooltip’ 模式，用户交互设为 ‘mouseenter and focus’，然后填上你的按钮类名，就能一次性覆盖页面上所有加购按钮。之后可以直接在按钮元素的 Tooltip > Tooltip content 里改提示文字。 > 相关阅读：

• Bricks 内容切换器：纯 CSS 方案（radio + :has 实现标签切换）

• Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表

• Bricks 按 ACF Gallery 图片数量做动态条件输出

搞定 现在我们的自定义按钮有了：产品加购时的 spinner 动画，以及 hover 时提供上下文说明的 tooltip。

SureCart 自定义按钮的常见坑

SureCart 的按钮和 WooCommerce 不同，走的是自己的 checkout 流程：一是别直接套 Woo 的加购函数，要用 SureCart 提供的事件/接口；二是 spinner 和 tooltip 这类反馈要在前端 JS 里接管，确认请求成功再给提示；三是测试时走一遍真实结算，别只看按钮点了没反应。想做「加入购物车→去结账」的顺畅路径，重点把 SureCart 的 checkout 跳转接对。

延伸阅读

• 想要现成外贸独立站，从零搭出能收询盘的站？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks）

常见问题（FAQ）

SureCart 按钮和 WooCommerce 一样吗？ 不一样，SureCart 有自己的 checkout 流程，不能直接套 Woo 的加购函数。

spinner/tooltip 怎么接？ 在前端 JS 里接管按钮状态，请求成功再给视觉反馈。

怎么测自定义按钮？ 走一遍真实结算流程，确认能正常加购并跳到 SureCart checkout。

能做成「加入购物车并跳转结账」吗？ 能，把按钮动作接到 SureCart 的 checkout 跳转即可。

• 相关阅读：Bricks Setup Guide

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程