回到所有的课程
课程库

自定义购物车按钮

完全自定义和样式您的购物车和购物车按钮。

这个视频展示了一个旧的用户界面。更新版本即将到来!
克隆这个项目

一旦你添加购物车到您的页面,您可以完全自定义和样式的购物车按钮以及购物车本身。

在本课中

在本节课中,我们自定义购物车按钮。要自定义购物车本身,请签出定制购物车

  1. 样式默认的Cart元素
  2. 在购物车按钮中添加和删除元素
  3. 自定义购物车数量设置
  4. 在购物车中显示小计

样式默认的Cart元素

默认情况下,购物车按钮有一个图标、一个文本块“购物车”和购物车数量元素。

购物车按钮包括一个购物车图标,单词Cart和一个白色圆圈中的蓝色数字3。购物车里有三样东西。
购物车图标[图标]

您可以通过应用字体颜色来更改购物车图标的颜色。

“购物车”[文本块]

您可以编辑按钮文本或双击并将其连接到购物车的数量或小计。你可以像设计任何排版元素一样设计它。

内部文本设置面板包括一个收集列表复选框,用于从购物车中“获取文本”,一个下拉菜单,用于选择字段无,数量或小计,以及一个x图标,用于关闭面板右上角。
“推车数量”[文字块]

此文本块连接到无法编辑的购物车数量字段。可以像处理任何排版元素一样对该元素进行样式化。

在购物车按钮中添加和删除元素

您可以向购物车添加其他元素,例如不同的图像或文本块,并根据自己的喜好设置购物车按钮的样式。您可以删除购物车图标和文本块,但不能删除购物车数量元素。你可以用购物车设置隐藏它。阅读下文。

自定义购物车数量设置

默认情况下,购物车按钮显示购物车数量-购物车中的全部商品。

隐藏车的数量元素:

  1. 双击购物车按钮
  2. 切换的车的数量按钮(从右边打开的元素设置面板中)
购物车按钮设置包括文本购物车数量和右侧的切换按钮。

当购物车是空的时候隐藏购物车数量:

  1. 双击车的数量
  2. 检查车空了就藏起来推车数量设置
购物车数量设置包括“当购物车为空时隐藏”的复选框

在购物车中显示小计

在“购物车”按钮上显示购物车的小计:

  1. 添加一个文本块到你的购物车
  2. 选择获取文本>小计(从内部文本设置
文本块内部文本设置面板包括一个复选框,用于“从购物车中获取文本”。在下拉菜单中选择小计字段。还有一个显示所有设置按钮。
尝试Webflow-是免费的
Baidu
map