Astra Pro模組教學指南-WooCommerce電子商務設定

本文重點摘要

如何移除購物車周圍的邊框?(更新到Astra 3.4之後的問題)

將Astra更新到版本3.4之後,
你是否在Header中的WooCommerce或EDD購物車周圍觀察到邊框,
儘管以前沒有設置邊框?就像下方截圖所示

如果是的話,本文將幫助你了解為什麼會發生這種情況以及如何解決–

為什麼?

Astra主題版本3.4.0附帶的一項更改是–
不推薦使用購物車樣式None無,並將其與WooCommerce和EDD的現有選項 “Outline邊線” 合併。

這是什麼意思?

Astra提供了在標題中添加購物車的選項。
添加購物車時,你將在 Design 選項卡下觀察網頁設計的樣式選項。

在3.4版之前,購物車具有三個樣式選項 – None、Outline和Fill。
在Astra 3.4中,None選項已不推薦使用,
並與Outline樣式合併。這個樣式在購物車周圍添加了邊框。
因此,如果你將購物車樣式設置為None,則樣式將替換為Outline,並在購物車周圍添加邊框。

這就是為什麼在將Astra更新到3.4時看到購物車周圍有邊框的原因

怎麼修改?

為此,Astra Pro版本3.4.2提供了一個解決方案,為購物車元素提供了新的 Border Width邊框寬度 選項。
使用此新選項,你可以設置購物車邊框的寬度,也可以將其刪除。

因此,如果你想刪除該邊框,只需將Border Width設置為0即可。

你可以到自訂,然後轉到 Header Builder > Cart > Design > Style > Border Width 並將其設置為0。

筆記:
1.確保將Astra主題更新到版本3.4.3,將Astra Pro更新到版本3.4.2,以使用新的購物車邊框選項。
2.只有Astra Pro用戶可能會遇到購物車邊框問題。免費的Astra用戶將不會遇到此問題。


建立商店WooCommerce頁面

Astra在 Product Catalog產品目錄 部分列出了一些功能,
這些功能將幫助你建立Shop WooCommerce頁面,搭配你的網路行銷

這是 Astra Pro Addon 外掛提供的一項進階功能 。
要使用這些Pro功能,你需要在網站上安裝Astra主題以及Astra Pro外掛。

Astra已經看到 WooCommerce 與Free Astra主題的整合。

WooCommerce Pro Addon為你的WooCommerce商店提供了強大而獨特的樣式選項。
你可以用最少的工作和簡單的自訂設定使你網站設計的商店更加時尚。

注意 – 確保已啟用WooCommerce外掛。

以下選項很容易理解,
你會在 Shop Product Structure商店產品架構 下面找到這些選項,
選中該選項將啟用相應的選項:

Display Page Title 顯示頁面標題

啟用此選項將顯示頁面標題。
如果你已停用頁面Meta標籤設定中的頁面標題,它將覆蓋以上設定。

Display Breadcrumb  顯示頁面路徑

Breadcrumb頁面路徑顯示使用者在網站上的當前位置。
它通常用作輔助導航,允許使用者在連結階層中上下移動。
如果要在商店頁面上顯示Breadcrumb頁面路徑,則必須啟用此選項。

Display Toolbar  顯示工具欄

此選項提供有關可用和顯示的產品總數的快速資訊。
它使用以下選項在頁面的右上角新增了預設排序下拉列表:

  • Sort by popularity 依熱銷度排序
  • Sort by average rating 平均評分排序
  • Sort by latest 依最新項目排序
  • Sort by price: low to high 依價格排序:低到高
  • Sort by price: high to low 依價格排序:高到低

Shop Product Structure  商店產品架構

產品架構可幫助你以簡便的方式快速提供詳細資訊。
顯示的所有資訊均從產品資訊中出現。

Category 分類

啟用此選項後,將出現在產品的產品設定中選擇的分類。

Title 標題

標題是你為產品設定的產品名稱。

Ratings 星級

當特定的買家對你的產品進行質量、服務、收貨
或整體產品滿意度星級評價時,會對其進行評級。
你可以選擇啟用或停用評級選項。

Price 價格

你在產品部分中設定的產品價格會出現在這裡。
如果你輸入了銷售價格,則舊價格將以加粗文字的形式顯示在交叉文字中,
而新價格將以粗體顯示。

Short Description 簡短敘述

如果你希望對所售產品進行快速預覽,可以選擇在 Short Description 中編寫此內容。
確保你的描述不太冗長。

Add to Cart 加入購物車

這是行動呼籲按鈕,你可以在其中使購買者傾向於將產品加入購物車中以進行最終結帳。
對於行銷策略,始終建議在Product/Archive頁面或Single Product頁面上保持啟用此選項。

小提醒:你可以用拖放欄位來更改 Shop Product Structure 的架構。

Product Styling產品樣式

Content Alignment 內容對齊

此選項可幫助你設定產品顯示的整體對齊方式。
你可以將內容對齊方式設定為 左、右或置中

Product Image Hover Style 產品圖片懸停樣式

懸停樣式是在產品圖片上懸停或滾動滑鼠後看到的動畫效果。
連同Swap Images交換圖片選項一起,你可以獲得動畫選項,
例如Fade淡入淡出,Zoom縮放,Zoom Fade縮放淡入淡出。

Swap Images交換圖片

在此選項中,用點擊或圖片懸停,可以將產品頁面上的預設產品圖片替換為設定圖片。
你提供的設定圖片可以是同一產品的不同角度,顏色,形狀等的照片。
你可以在Single Product頁面的右側找到 Product Gallery 選項的設定。

此選項可幫助購買者快速將滑鼠懸停在其中,以了解更多有關產品的資訊。

Box Shadow 和 Box Hover Shadow 陰影和懸停陰影

陰影有助於強調你的產品頁面設計。
你可以為Box以及滑鼠懸停Hover新增陰影。

Button 按鈕

加入購物車Add to Cart 按鈕可以幫助你設定水平和垂直內距。
將應用預設主題顏色。如果你希望更改此顏色,則可以為其新增自訂CSS。


WooCommerce商店頁面的Off-Canvas Sidebar

這是Astra Pro Addon 外掛提供的一項進階功能 。
要使用這些Pro功能,你需要  在網站上安裝Astra主題以及Astra Pro外掛。

你可以使用Astra Pro隨附的WooCommerce模組管理側邊欄。
WooCommerce外掛為商店頁面提供了Off-Canvas Sidebar選項。
可以在 外觀 > 自訂 > WooCommerce > Product Catalog下找到設定。

Off-Canvas Sidebar是導航策略的一部分。
要顯示側邊欄,你必須以按鈕或設定連結的形式設定觸發。
點擊觸發時,將顯示 Off-Canvas Sidebar 。
此選項也適用於所有響應式裝置。

由於這是側邊欄,因此你需要使用各種WordPress小工具來設定側邊欄。
或者,你甚至可以新增第三方窗口小工具。

有3種方法來觸發展示 Off-Canvas Sidebar

Link連結

會出現三條線的選單。

Button按鈕

如前所述,預設主題顏色和文字樣式應用在此按鈕。

Custom Class自訂類型

此自訂功能可幫助你在整個網站上的任何位置設定/放置 Off-Canvas Sidebar觸發。
可以根據需要將 Off-Canvas Sidebar的觸發器放置在頁首、上方頁首、頁尾或其他任何位置。

例如:
可以在 Custom Layouts 模組的幫助下設計一個漂亮而簡單的按鈕。
在按鈕的HTML Class的進階選項卡中給一些名稱

在 Off-Canvas Sidebar的 Custom Class 選項中重複相同的Class名稱。

小提醒:Custom Class 僅在商店頁面上會觸發Off-Canvas Sidebar。
它不會在其他任何頁面上觸發它。

例如,如果將具有Custom Class的按鈕新增到Header中。
然後點擊按鈕則僅在商店頁面,而不會在其他頁面上觸發Off-Canvas Sidebar。

啟用該選項後,除非在其中新增了小工具,否則Off-Canvas Sidebar將不會被觸發。

要新增小工具,請訪問 外觀 > 小工具 > Off-Canvas Filters
只需從 可用的小工具 選項中拖放小工具即可。

新增小工具後,你可以從自訂管理其他設定


快速瀏覽WooCommerce產品

你可以使用商店頁面設定下Astra Pro附帶的WooCommerce模組
來管理在燈箱中顯示產品詳細資訊的快速顯示。

啟用模組,設定下可以找到 外觀 > 自訂 > WooCommerce > 產品目錄Product Catalog

以下是可用的設定:

  • On Image圖片上
  • On Image Click圖片上點擊
  • After Summary總結

On Image圖片上

選擇此選項時,懸停在圖片上會出現一行顯示。
點擊 Quick View快速瀏覽 選項後,將打開一個燈箱,其中包含產品的說明。

On Image Click圖片上點擊

與 On Image 不同,在圖片懸停時沒有快速瀏覽行出現。
當你點擊顯示的圖片時,隨即打開帶有產品說明的燈箱。

After Summary總結

摘要產品的詳細資訊,例如標題,價格,簡短描述等。
當你選擇此選項時,快速瀏覽按鈕出現在上述摘要的末尾。

Stick Add to Cart Button 固定加入購物車按鈕

啟用此選項會將 加入購物車 按鈕和其他數量固定在快速瀏覽顯示底部。
如果你有很長的描述和數量,則可以使用此選項貼上並突出顯示 加入購物車 按鈕。 

小提醒:燈箱中顯示的內容均來自 Single Product 單一產品 設定。
因此,如果你希望顯示/隱藏標題、描述、加入購物車按鈕等設定,則需要預設這些設定。
所有這些設定也將顯示在 Single Product 頁面上。

在控制台中進行設定的路徑是 外觀 > 自訂 > WooCommerce > Single Product


如何在頁首中新增WooCommerce迷你購物車?

使用Astra,你可以用一些簡單的設定將WooCommerce迷你購物車新增到主頁首中。

確保你已啟用WooCommerce外掛

要找到設定,請從WordPress控制台導到 外觀 > 自訂 > Header Builder > Primary Header > 選單中的最後一項  然後選擇  Cart

它將在主選單的末尾顯示一個WooCommerce購物車圖標。

你也可以使用Astra Pro將WooCommerce迷你購物車新增到上方/下方頁首中。
Astra Pro的WooCommerce模組提供選項
新增造型來改變購物車icon,顯示購物車標題和加總。

像設定主頁首一樣,你可以在Above HeaderBelow Header中新增迷你購物車。

要找到設定,請從WordPress控制台導航到  外觀 > 自訂 > Header Builder > Above Header,然後選擇  Cart

除Header外,你可能還需要在網站上的任何地方顯示一個迷你購物車圖標。
WooCommerce模組提供了WooCommerce迷你購物車短碼

[astra_woo_mini_cart]

可讓你在所需的任何地方顯示迷你購物車圖標

小提醒:僅在你安裝了Astra Pro並從Astra Pro Options啟用了WooCommerce模組時,該短代碼才有效。


WooCommerce的文字樣式選項

你可以使用Astra Pro隨附的WooCommerce模組自訂WooCommerce的 Typography 選項。
從Astra Options啟用WooCommerce模組。

外觀 > 自訂 > WooCommerce > Product Catalog > Typography
外觀 > 自訂 > WooCommerce > Single Product > Typography下,可以使用文字樣式選項。

以下是可用的項目:

  • Base Typography
  • Product Catalog
  • Single Product

Base Typography 基本文字樣式

在這裡,你可以設定網站內容的 Base Typography,這也適用於WooCommerce內文。

Product Catalog 產品目錄

  1. Product Title產品標題:將文字樣式應用於商店頁面上的產品標題。
  2. Product Price產品價格: 文字樣式應用於商店頁面上的產品價格。
  3. Product Content產品內文: 文字樣式應用於商店頁面上的產品簡短描述。

Single Product 單一產品

  1. Title標題:將文字樣式應用於單一產品頁面上的產品標題。
  2. Price價格: 文字樣式應用於單一產品頁面上的產品價格。
  3. Breadcrumb頁面路徑:在單一產品頁面上將文字樣式應用於產品頁面路徑。
  4. Content內文:將文字樣式應用於單一產品頁面上的產品描述。

WooCommerce的顏色和背景選項

你可以使用Astra Pro附帶的WooCommerce模組為WooCommerce頁面自訂顏色和背景選項。

從Astra Options啟用WooCommerce模組。

顏色和背景選項將在 外觀 > 自訂 > WooCommerce > Product Catalog
以及 外觀 > 自訂 > WooCommerce > Single Product 下提供

以下是可用的項目:

  • Base Colors
  • Product Catalog
  • Single Product

Base Colors 基本顏色

在這裡,你可以將顏色應用於文字(Text Color)和連結(Link Color),
該連結顏色設定將與星級評級、商店頁面標題、篩選器連結的顏色一樣
以及其他跟產品一起出現的其他連結應用顏色的頁面。

同樣,標題顏色將應用於產品標題。

Product Catalog 產品目錄

  1. Product Title Color產品標題顏色:將顏色應用於商店頁面上的產品標題。
  2. Product Price Color產品價格顏色:將顏色 應用於商店頁面上的產品價格。
  3. Product Content Color產品內文顏色:將顏色 應用於商店頁面上的產品簡短描述和分類。

Single Product 單一產品

  1. Product Title Color產品標題顏色:將顏色應用於單一產品頁面上的產品標題。
  2. Product Price Color產品價格顏色: 將顏色應用於單一產品頁面上的產品價格。
  3. Product Content Color產品內容顏色: 將顏色應用於單一產品頁面上的產品描述。
  4. Breadcrumb頁面路徑顏色:將顏色應用於單一產品頁面上的產品頁面路徑。

WooCommerce模組概述

Astra與WooCommerce無縫結合,提供優雅的網站設計與設定,可根據你的網路行銷對其進行自訂。 
同時,WooCommerce外掛為你提供了擴展的功能,可以打造和設計WooCommerce商店。
只需花費最少的時間和精力,並使用強大的自訂選項,你就可以使商店更時尚,更脫穎而出。

這是Astra Pro外掛提供的一項進階功能。
要使用這些附加組件,你需要在網站上安裝Astra主題以及Astra Pro外掛。

以下是啟用外掛並瀏覽進階設定的步驟:

步驟1 –確保已安裝並啟用Astra Pro和WooCommerce外掛。

步驟2 –從 外觀 > Astra Options > WooCommerce啟用WooCommerce模組

步驟3 現在,你可以在 外觀 > 自訂 > WooCommerce下找到這些設定

你將在此處看到各種標籤。 

WooCommerce模組本身提供很少的自訂設定。
Astra Options與WooCommerce的預設選項結合在一起,因此你可以在同一處找到所有內容。  

所有選項卡和相關設定的說明如下:

  • General一般
  • Shop商店 
  • Single Product單一產品
  • Cart Page購物車頁面
  • Checkout Page結帳頁面

Shop WooCommerce 商店

你可以設定列出所有產品的商店頁面樣式。
這可以是你的主要商店頁面或產品彙整頁面。

如何使用WooCommerce模組為WooCommerce商店頁面設定樣式的快速步驟

步驟1: 確保已 安裝並啟用了 Astra Pro外掛 和 WooCommerce外掛。
步驟2: 從WordPress控制台 > 外觀 > Astra Options下啟用WooCommerce模組 
步驟3: 訪問控制台 [ 外觀 > 自訂 > WooCommerce  ] 以編輯模組設定

你可以在 外觀 > 自訂 > WooCommerce > Product Catalog 下找到設定

Choose Product Layout 選擇產品版型

Astra的商店頁面有兩個版型選項:

Grid View 網格顯示

你可以在商店以網格樣式顯示的地方,將產品圖片顯示在頂部。
圖片下方會顯示與產品相關的資訊,例如價格、銷售價格、分類等。

List View 列表顯示

圖片和產品相關資訊並排顯示位置。

Shop Columns 商店列數

你可以在商店頁面上的 Grid View 和 List View 中選擇要為產品顯示的列數。

Grid View 網格顯示

List View 列表顯示

你可以選擇響應式裝置上的列數:

Products Per Page 每頁產品

就像彙整頁面上的Blog文章一樣,你可以控制決定在商店主頁面上的產品數量。

Shop Pagination 商店分頁

Number 分頁編號

數字選項限制單篇頁面上的產品數量。
其餘未展示的產品分為更多頁面

Shop Pagination Style 商店分頁樣式

你可以將此樣式更改為圓形或正方形

Infinite Scroll 無限滾動

產品頁面上的此選項代表產品的無限量顯示。
該頁面將擴展到你可以無限地滾動將產品新增到產品彙整頁面上。

Event to Trigger Infinite Loading 無限加載觸發事件

Scroll 滾動

持續滾動頁面。

Click 點擊

滾動可能會使頁面拉長,並且瀏覽者在一直滾動頁面後可能會沒有興趣。
為避免這種情況,請選擇 Click點擊 選項,在其中出現 Load More瀏覽更多 按鈕。
在行列中顯示一定數量的產品後,將顯示此按鈕。
你可以根據需要更改按鈕文字。


Single Product WooCommerce單一產品

使用Astra Pro的WooCommerece外掛,使你可以設計WooCommerce的 Single Product 頁面。

Gallery Layout 圖庫版型

你可以在Vertical垂直/ Horizontal水平顯示中設定圖庫圖片。

Image Width 圖片寬度

你可以使用滑條輕鬆調整圖片寬度。

Disable Breadcrumb 停用頁面路徑

你可以設法在單一產品頁面上顯示/隱藏頁面路徑。

Single Product Structure 單一產品架構

你可以設法顯示/隱藏以下資訊:

  • Title標題
  • Ratings星級
  • Price價格
  • Short Description簡短敘述
  • Add To Cart加入購物車
  • Meta標籤

Enable Ajax Add To Cart 啟用Ajax加入購物車

啟用此選項將限制在將產品加入購物車時刷新頁面。

Enable Image Zoom Effect 啟用圖片縮放效果

這將允許你在懸停時縮放圖片。

Product Navigation 產品導航

這將允許你為產品導航箭頭設定不同的網頁設計。

Product Description Tabs 產品說明標籤

它將允許你顯示/隱藏產品描述選項卡。
你還可以設定選項卡以顯示垂直或水平。

Related & Up Sell Products 相關及熱銷產品

這將使你可以顯示/隱藏相關和熱銷產品。
你可以設定一列來顯示這些產品。
此外,你可以選擇要在頁面上顯示的許多相關產品。


Checkout Page WooCommerce 結帳頁面

WooCommerce的結帳頁面下提供以下選項:

Two-Step Checkout 兩階段結帳

它分別顯示 Billing details訂單明細 Your order你的訂單 部分
最開始,會顯示訂單明細表格,然後使用者可以看到訂單摘要並可以繼續結帳。

Display Order Note 顯示訂單備註

它將在結帳資訊的底部顯示訂單備註。
它包含有關你的訂單的備註,例如:出貨的特殊備註。

Display Apply Coupon Field 顯示申請優惠券欄位

優惠券欄位將在結帳頁面頂部可見。
如果你不想顯示優惠券的任何資訊,可以將其停用。

Distraction Free Checkout 無干擾結帳

啟用此選項後,網站頁首和第一頁尾中的選單會在結帳頁面上消失。
Distraction Free Checkout選項可覆蓋頁首和頁尾設定。

Use Labels as Placeholders 使用標籤作為預覽文字

它將顯示表單標籤內的空白處作為預覽文字。這將減少結帳資訊表格的瀏覽長度。

Persistent Checkout Form Data 暫存結帳表格資料

即使訪客意外重新整理了結帳頁面,它也會暫時保留之前填寫到一半的結帳表單欄位。


WooCommerce迷你購物車短碼

Astra Pro中的WooCommerce外掛提供了一個短代碼,
可在你需要的任何地方顯示迷你購物車icon。
可以在頁面編輯器/側邊欄小工具上使用。

迷你購物車的短碼具有direction方向屬性 ,該屬性在懸停時打開迷你購物車。

選項:

[astra_woo_mini_cart]
[astra_woo_mini_cart direction="top left"]
[astra_woo_mini_cart direction= bottom right ]
[astra_woo_mini_cart direction= top right ]

選單中購物車的設計可以使用WordPress自訂中的選項進行完全客製。

3 thoughts on “Astra Pro模組教學指南-WooCommerce電子商務設定”

  1. Pingback: Astra主題教學指南-WooCommerce電子商務設定 – Ez2.HELP

  2. Pingback: Astra Pro模組教學指南-Native AMP支援 – Ez2.HELP

  3. Pingback: Astra Pro模組教學指南-Page Headers設定 – Ez2.HELP

Leave a Comment

Shopping Cart
回到頂端
Malcare WordPress Security