回到所有的课程
课程库

定制购物车按钮

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

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

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

在这节课中

在本课中,我们将定制购物车按钮。要定制购物车本身,请检出定制购物车

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

设置默认Cart元素的样式

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

Cart按钮包括一个购物车图标、单词Cart和一个白色圆圈内的蓝色数字3。购物车里有三样东西。
购物车图标(图标)

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

“购物车”(文本块)

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

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

此文本块连接到您无法编辑的购物车数量字段。您可以像设置任何排版元素一样设置此元素的样式。

向Cart按钮添加和从Cart按钮中删除元素

您可以向Cart添加其他元素,例如不同的图像或文本块,并按您的意愿设置Cart按钮的样式。您可以删除Cart图标和文本块,但不能删除Cart数量元素。可以使用Cart设置隐藏。阅读更多。

自定义购物车数量设置

默认情况下,Cart按钮显示购物车数量——购物车中的商品总数。

隐藏的车的数量元素:

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

空车时隐藏购物车数量:

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

在购物车中显示小计

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

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