如何使用 Elementor 建立 WooCommerce 單一商品頁?圖文步驟教學
使用 Elementor 建立 WooCommerce 單一商品頁 – 在本篇文章中,將會說明如何使用 Elementor PRO 的單一產品頁模板及屬於 WooCommerce 的小工具來製作產品頁內容,從商品圖片、標題、商品描述、可變商品選項、加入購物車、價錢的顯示、相關商品、產品資訊都可以自由改變樣式
首頁 > WooCommerce 代管
使用 Elementor 建立 WooCommerce 單一商品頁 – 在本篇文章中,將會說明如何使用 Elementor PRO 的單一產品頁模板及屬於 WooCommerce 的小工具來製作產品頁內容,從商品圖片、標題、商品描述、可變商品選項、加入購物車、價錢的顯示、相關商品、產品資訊都可以自由改變樣式
WooCommerce Shortcode 範例說明 的相關文章有:WooCommerce 以短代碼呈現產品列表 以及 WooCommerce 頁面基本短代碼呈現效果說明 這兩篇文章可以參考,會使用到 WooCommerce 短碼來設定頁面,無非就是想要客製化網站內容,因此在本篇教學中將會說明如何使用預設的
Elementor WooCommerce 教學 – Elementor PRO 是具備從無到有建立商店頁、產品分類頁甚至是單一商品頁的能力,透過後台 UI 選項編輯,就能客製屬於自己想法的商店頁面,大從商品顯示數量、商品來源、商品排序,小至商品標題顏色、字體大小、區塊間距都可以做調整,
WooCommerce Shortcode 是架設 WordPress 購物網站時的進階應用,在網站主題所導入的模板有支援 WooCommerce 的狀況下,其實是會自動建立這些短碼所生成的頁面,本篇教學中,將介紹短碼呈現的樣式與加入方法,以及如何使用 Elementor 短碼工具為 WooCommerce
WooCommerce 教學(稅金設定) 是屬於商店基本選項之一,在國外電子商務中常常會需要根據不同的運送地區或商品在結帳時加收稅金,但對大部分在地銷售的台灣小型電商而言,除了客戶要求開立實體發票時必須加收的 5% 稅金,實際上很少使用到此項功能,因此本篇文章只會對稅率設定選項做簡單說明,並且也會介紹商品運費
WooCommerce 商品圖片設定 製作網頁時所謂的 “圖片翻轉” 效果,讓使用者在商店頁面透過簡單的滑鼠操控,就能得知商品更多外觀與樣式,是非常有利於使用者挑選商品的。在本篇教學介紹加入產品圖片翻轉效果的外掛 – WooCommerce Product Image Flipper
Woocommerce 會員系統 – 如果只是想單純客制一個登出按鈕,加入外掛說不定會引起其他相容性的問題(在 WooCommerce 尤其容易發生),因此在今天的文章中鵠學苑將分享一段簡易的函數,透過輸出控制函式加入 HTML 顯示文字並製作為 Shortcode (短代碼),以 CSS 來控制按鈕外觀
Astra 主題介紹 鵠學苑之前推薦過許多 WorPress 主題,每一款主題都有自己的特色,Astra 主題 ,相較於其他主題而言在網站外觀樣式的建構上更能靈活運作,可以自己決定啟用/停用哪些功能以精簡網站載入時所要抓取的程式碼, Astra 相對於一些付費主題而言,在網站載入速度方面是有相當大的優勢。
WooCommerce 商品描述標題修改 方法有很多種,包含使用 CSS :before 偽元素來取代文字,或者是使用 Loco Translate 網站翻譯外掛來將預設的英文翻譯為中文等,而在本篇教學中將以加入函數的方式,直接將 dh_rename_description_product_tab_label
WooCommerce 結帳設定 在預設外掛設定中並沒有太多選項可以來客製化結帳流程,尤其像是限制結帳金額定制購買條件的需求。在本篇教學中將說明如何在 WordPress 子主題中加入 WooCommerce 函數,只需修改 $minimum 的數值,就能達到限制顧客最低結帳金額的效果,讓網站能運作不同銷售策略
WooCommerce 免運費 在 WooCommerce 預設的運費選項中可以啟用免費運送的,但在購物車以及結帳畫面中,當顧客達到免運條件時,卻不會隱藏其它運送選項,而是多出免費運送的項目讓顧客在結帳時自行點選,本次教學中要跟大家分享使用 Advanced Free Shipping 外掛來做結帳流程優化
WooCommerce 加入購物車功能 本篇教學中,將以 php 函數 add_filiter 配合 return 以及 switch 來執行修改購物車按鈕文字的動作,如果對 WooCommerce 所定義的 hook 夠熟悉,也可以將這兩段函數運用在其他需要修改文字的地方,比如説加入會員、註冊按鈕等
WooCommerce 詢價車 主要是為網站加入商品詢價功能,通常用於客製化產品、大量產品訂購或著外銷網站產品諮詢,本篇教學將說明如何使用 YITH WooCommerce Request A Quote 為網站加入詢價頁面,建置完整的商品詢價流程,編輯詢價表單內容以及詢價時點擊動作的細節設定等。
WooCommerce 自訂函數 有很多種寫法,不同的狀況下可以衍生出更為快捷的建構方式,因此在這一次教學中鵠學苑將提供兩種不同的 funtion 給大家做參照,在學習 funtion 函數前,請確保本身對 HTML 寫法與架構有一定的了解,比如基本的 h1 標題標記、p 段落標記、img src=””
WooCommerce 自訂結帳表單 可以將系統預設的結帳表單欄位做修改,將預設結帳表單一些比較不符合使用需求的欄位做刪除,比如姓名欄位不需要跟國外一樣分為兩欄。本篇教學中將說明安裝 WooCommerce 自訂結帳表單外掛,以及結帳、運送、訂單備註三個表單位置編輯的方式,如果說想先瞭解 WooCommerce
WordPress 禁用 Gutenberg 的主要原因是 Gutenberg 編輯器就目前而言還在開發中,而另一個問題是對大部分的主題與外掛而言與 Gutenberg 的相容性並沒有完全契合,本篇教學將會說明兩種停用 Gutenberg 的方法,分別是安裝外掛與使用 funtion 函數來禁止 Gutenberg 功能。
立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!