WooCommerce基礎教學 (一):在你的網拍平台上架第一件商品!
有一個自己的網拍商店是很多斜槓青年的夢想但是除了蝦皮以外我們還有其他的可能就利用網站架設一個網購平台,如果你的網站是用WordPress架站平台的話就可以利用WooCommerce來架設屬於你自己的網拍商店WooCommerce可以搭配上多種外掛在擁有強大功能的同時也具備了能夠客製化的操作性!接下來跟著鵠學苑的腳步,讓我們開始學習吧!
首頁 > WooCommerce > Page 2
有一個自己的網拍商店是很多斜槓青年的夢想但是除了蝦皮以外我們還有其他的可能就利用網站架設一個網購平台,如果你的網站是用WordPress架站平台的話就可以利用WooCommerce來架設屬於你自己的網拍商店WooCommerce可以搭配上多種外掛在擁有強大功能的同時也具備了能夠客製化的操作性!接下來跟著鵠學苑的腳步,讓我們開始學習吧!
WooSwatches 是一款 WooCommerce 的延伸功能外掛,是由 WooMatrix 所開發,主要用途是在變更 WooCommerce 單一可變產品頁面上屬性變化類型的顯示方式,可以將預設為下拉式選單的選擇產品規格,變更為以顏色、圖片、或者文字顯示,讓顧客在挑選產品時可以使用更加直覺的方式來做產品
使用 Elementor 建立 WooCommerce 單一商品頁 – 在本篇文章中,將會說明如何使用 Elementor PRO 的單一產品頁模板及屬於 WooCommerce 的小工具來製作產品頁內容,從商品圖片、標題、商品描述、可變商品選項、加入購物車、價錢的顯示、相關商品、產品資訊都可以自由改變樣式
WooCommerce Shortcode 範例說明 的相關文章有:WooCommerce 以短代碼呈現產品列表 以及 WooCommerce 頁面基本短代碼呈現效果說明 這兩篇文章可以參考,會使用到 WooCommerce 短碼來設定頁面,無非就是想要客製化網站內容,因此在本篇教學中將會說明如何使用預設的
Elementor WooCommerce 教學 – Elementor PRO 是具備從無到有建立商店頁、產品分類頁甚至是單一商品頁的能力,透過後台 UI 選項編輯,就能客製屬於自己想法的商店頁面,大從商品顯示數量、商品來源、商品排序,小至商品標題顏色、字體大小、區塊間距都可以做調整,
WooCommerce Shortcode 產品教學 在本篇教學中,鵠學苑將會介紹 WooCommerce 6 組以不同條件篩選顯示產品列表條件的基礎代碼,屬於只要插入在正確的位置就會顯示的類型,另外是稍微比較進階一點的短代碼,必須要先熟悉 WooCommerce 說明中的代碼屬性進而製作特殊顯示方式的產
WooCommerce Shortcode 是架設 WordPress 購物網站時的進階應用,在網站主題所導入的模板有支援 WooCommerce 的狀況下,其實是會自動建立這些短碼所生成的頁面,本篇教學中,將介紹短碼呈現的樣式與加入方法,以及如何使用 Elementor 短碼工具為 WooCommerce
WooCommerce 點數折扣機制,對使用 WordPress 架設的購物網站而言,使用 WooCommerce 必定是多數人的選擇,而使用 WooCommerce 的好處之一,就是有許多購物機制的外掛模組可以一鍵安裝使用,而本篇文章要介紹的就是購物網站常見的累積點數、點數折抵現金的功能外掛
WooCommerce 購物車按鈕 在預設中點擊後只會出現 ”已成功加入購物車按鈕” 的提示文字,如果想要提供更詳細的商品資訊讓顧客觀看,就可以使用本次教學所介紹的付費外掛 – YITH Cart PopUp ,顧名思義,就是可以在顧客點擊加入購物車按鈕時顯示全螢幕彈跳視窗以顯示商品價格、運送費用
WooCommerce 教學(稅金設定) 是屬於商店基本選項之一,在國外電子商務中常常會需要根據不同的運送地區或商品在結帳時加收稅金,但對大部分在地銷售的台灣小型電商而言,除了客戶要求開立實體發票時必須加收的 5% 稅金,實際上很少使用到此項功能,因此本篇文章只會對稅率設定選項做簡單說明,並且也會介紹商品運費
WooCommerce 商品圖片設定 製作網頁時所謂的 “圖片翻轉” 效果,讓使用者在商店頁面透過簡單的滑鼠操控,就能得知商品更多外觀與樣式,是非常有利於使用者挑選商品的。在本篇教學介紹加入產品圖片翻轉效果的外掛 – WooCommerce Product Image Flipper
WooCommerce 結帳功能 本篇教學要介紹 WooCommerce 官方所出的附加功能外掛 – Checkout Add-Ons ,可以在結帳時加入額外付費的選項,單位可以使用百分比或者直接輸入金額數字,也能夠客制化金額選項,以單選、多選、文字說明、附加檔案等方式呈現,甚至可以設定項目顯示條件
Woocommerce 會員系統 – 如果只是想單純客制一個登出按鈕,加入外掛說不定會引起其他相容性的問題(在 WooCommerce 尤其容易發生),因此在今天的文章中鵠學苑將分享一段簡易的函數,透過輸出控制函式加入 HTML 顯示文字並製作為 Shortcode (短代碼),以 CSS 來控制按鈕外觀
在本篇教學中透過安裝 Conditional Shipping and Payments,就能夠讓每一種付款與運送方式能根據使用者結帳時的選擇對應顯示,比如說當顧客消費未達免運費標準,且選擇以銀行轉帳付款,那麼在購物車及結帳頁面就 “只會” 顯示銀行轉帳與必須支付運費的選項,不會再顯示其他無關的項目
Woocommerce 購物車教學 – Woocommerce 購物車預設的操作方式中,如果增加或減少商品數量,必須要點選更新購物車按鈕才會重新計算商品總計金額,因此在本篇教學中,將分享一個簡單的 jQuery 函數,讓購物車中的商品數量變更時會同步更新總計金額。
Astra 主題介紹 鵠學苑之前推薦過許多 WorPress 主題,每一款主題都有自己的特色,Astra 主題 ,相較於其他主題而言在網站外觀樣式的建構上更能靈活運作,可以自己決定啟用/停用哪些功能以精簡網站載入時所要抓取的程式碼, Astra 相對於一些付費主題而言,在網站載入速度方面是有相當大的優勢。
WooCommerce 自訂郵件樣式 主要是對內建電子郵件模板外觀做修改,無論是新註冊、新訂單、更換密碼等通知信的郵件內容樣式,都能使用 YITH WooCommerce Email Templates 外掛來做編輯與更動,除了樣式外,也可以在電子郵件模板中加入社群媒體連結(FB 粉絲團、Youtube
WooCommerce 商品設定 是建立商品時必須先了解的基本知識,必須要能夠正確設定商品內容,才能保證電商網站在商品銷售流程上的順暢度,另外提供詳細的商品資訊,也能增加消費者購買意願。本篇教學中將說明如何對單一商品做基本設定,以及對具有不同類型的可變化商品中屬性欄位的設定方式
WooCommerce 商品描述標題修改 方法有很多種,包含使用 CSS :before 偽元素來取代文字,或者是使用 Loco Translate 網站翻譯外掛來將預設的英文翻譯為中文等,而在本篇教學中將以加入函數的方式,直接將 dh_rename_description_product_tab_label
WooCommerce 頁面設定教學 – 如果說網站主題有支援 WooCommerce 外掛功能,在安裝 WooCommerce 後會自動在頁面中建立與 WooCommerce 相關的頁面,比如商品彙整頁、購物車、結帳、訂單、帳戶等,在本篇教學將說明 WooCommerce 進階中的頁面設定,可以將購物車
立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!