個性化購物車按鈕

完全自訂您的購物車和購物車按鈕並設計其樣式。

一旦您在頁面上添加了購物車,您就可以完全個性化和設計購物車按鈕以及購物車本身。

關於本教程

在本教學中,將介紹購物車按鈕的自訂。若要修改購物車本身,請參閱購物車的自訂。

  1. 設計預設的購物車組件
  2. 合併並消除購物車按鈕中的組件
  3. 客製化購物車數量配置
  4. 在購物車中顯示小計

設計預設的購物車元素

預設情況下,購物車按鈕帶有一個圖示、一個標記為「購物車」的文字區塊和購物車數量組件。

「購物車」按鈕包括購物車圖示、「購物車」一詞和白色圓圈中的藍色數字 3。購物車中有三件商品。
購物車圖示 [圖示]

您可以透過選擇字體顏色來修改購物車圖示的顏色。

「購物車」[文字區塊]

您可以自由編輯按鈕文字或透過雙擊將其連接到購物車的數量或小計。可以像任何其他排版元素一樣設定它的樣式。

內部文字設定面板包括用於「從購物車取得文字」的集合清單複選框、用於選擇欄位「無」、數量或小計的下拉式選單以及用於在面板右上角關閉的 x 圖示。
「購物車數量」[文字區塊]

該文字區塊連結到購物車數量字段,該字段無法編輯。您可以像設定任何其他版面元素一樣設定此元件的樣式。

在購物車按鈕中新增和刪除組件

您可以選擇為購物車添加替代組件,例如不同的圖像或文字區塊,並根據需要設定購物車按鈕的樣式。可以刪除購物車圖示和文字區塊,但無法刪除購物車數量組件。您可以使用購物車設定隱藏它。更多詳情如下。

個性化購物車數量配置

預設情況下,購物車按鈕顯示購物車數量 - 購物車中的全部商品。

為了隱藏 購物車數量 成分:

  1. 按兩下 購物車按鈕
  2. 關閉 購物車數量 按鈕(來自右側彈出的元素設定面板)
購物車按鈕設定包括文字購物車數量和右側的切換按鈕。

當購物車為空時隱藏購物車數量:

  1. 按兩下 購物車數量
  2. 標記 購物車空時隱藏 來自 購物車數量設定
購物車數量設定包括「購物車為空時隱藏」複選框

在購物車中顯示小計

要在購物車按鈕上顯示購物車的小計:

  1. 納入一個 文字區塊 到您的購物車
  2. 選擇 獲取文字來自大車 > 小計 (從 內部文字設定)
文字區塊內部文字設定面板包括「從購物車取得文字」的複選框。在下拉式選單中選擇小計字段。還有一個顯示所有設定按鈕。
麥伊凡
Ewan Mak 的最新帖子 (看全部)