WooCommerce 結帳欄位客製大全(陸續新增) | Hellowp
文章推薦指數: 80 %
另外記得要注意的地方,billing_country 這欄位一定要存在,不然會發生資料驗證無法通過的情況,不存在它會一直跳出「請填寫地址進行下一步」的錯誤 ...
操作碰到困難?試試搜尋功能吧!
WooCommerce結帳欄位客製大全(陸續新增)
2017/07/27|
WordPress教學
在購物車要結帳的時候,要讓顧客可以越省事越好應該是每個站主的目標,像是結帳頁面不要有的跳出連結、盡可能減少必填欄位、以及自動幫顧客帶入某些已知欄位,像是姓名、郵遞區號、送件地址都是能有效提升購物車轉換率的方法。
另一方面,WordPress購物車WooCommerce雖然目前是最多人使用的,但它畢竟是舶來品,很多欄位的設計跟台灣常見的習慣有所不同。
因此為了讓有在使用WooCommerce的朋友有更完整的欄位客製教學,我們整理了一篇常會需要客製化的項目,說明該如何使用程式碼來進行修改。
但可能有朋友會問不是已經有WooCommerceCheckoutManager之類可以客製欄位的外掛了嗎?我也是喜歡用外掛解決問題的人,但就是有些事情它做不到,所以還是整理了這篇文章,而且有了程式修改的基礎概念,再搭配外掛使用更是能事半功倍喔!
主要內容如下:
0使用網頁編輯軟體–工欲善其事,必先利其器
1建立子主題–怎麼改程式才不會在更新後回到原點?用子主題就對了!
2WooCommercehook機制說明–找到怎麼修改特定頁面與欄位
3移除不需要的欄位–公司名稱欄位對於一般訪客不需出現
4改變必填項目–我用超商取貨,收件地址就不用必填了吧?
5改變欄位名稱–聯絡電話想改成行動電話怎麼改?
6改變欄位寬度–姓名欄位太短,滿版欄位更顯眼
7帶入現有資訊–客戶資料已填寫完整,自動帶入相關資訊
8改變欄位順序–台灣地址範圍是大到小,WooCommerce預設是從小到大
9下拉選單帶入郵遞區號、縣市–連動式下拉選單,不用再讓客戶去Google查郵遞區號
10新增其它欄位–想新增一欄客戶從何處得知我們,做為行銷預算成效參考
11新增三聯式發票欄位–新增發票是否捐贈或是開立三聯式發票
12預設顯示密碼欄位–讓非會員結帳時能直接看到加入會員的密碼欄位
13動態顯示運費–根據購物車小計金額顯示/隱藏運費選項
14其它
Topic0
使用網頁編輯軟體
要改網頁就是要用專業又好入門的網頁編輯軟體,它可以幫你除錯、FTP上傳下載、整理方便閱讀的格式,這都是使用一般的文書軟體所做不到的。
這邊我推薦免費強大效能又好的SublimeText3,近十年的網頁生涯換過不少主力編輯器,但自從它出了之後,不管換哪套編輯器我電腦裡都會留著一套,因為比效能目前還沒看過有人可以贏過它,所以萬一臨時要修改code的話,我非常喜愛使用SublimeText3(以下簡稱ST3)。
關於ST3的教學非常多,但那是提供給前端工程師看的,我們只要下載回來後安裝它,然後再安裝最最重要的FTP套件,有了它,要改檔案會非常快速又方便。
先從官網下載,把它裝起來後,依照下面步驟說明來安裝SFTP套件。
Mac與Windows都有支援
Console是拿來安裝擴充用的介面
連結網址:https://packagecontrol.io/installation#st3
返回ST3然後,把剛剛複製下來的那一大段貼入游標的地方後按Enter,它就會開始跑跑跑,這動作是在安裝ST3的套件管理工具,有了它就可以很容易安裝新的套件
準備來找SFTP這支外掛來安裝,先進入PackageControl
輸入關鍵字Install,就可以看到InstallPackage的指令,這是準備安裝套件的意思,點下去
再輸入關鍵字SFTP,就可以看到一個名為SFTP的套件,我們就是要利用它當程式修改好後,儲存後就能自動直接上傳的功能,點下去就會開始進行安裝
安裝完成後就會出現這個英文說明頁,接下來我們要先用它把在主機上的網站抓回我們的電腦
先在我的電腦中新增一個空白資料夾,這是要來放所有網站檔案的,所以記要得資料夾放在哪裡,資料夾名稱盡量取英文名,新增好後就用Open來開啟它
找到空白資料夾,點選Open
開啟後就可以在左側欄看到你的資料夾名稱,點選右鍵,找到SFTP/FTP>MaptoRemote後點下去
接下來會出現一個頁籤,未來在編輯網頁的時候新開的檔案都會出現在這邊,sftp-config.json是設定FTP連線的檔案
依序修改此檔案,先把type改成ftp,如果你的主機商有提供sftp連線則不須更動,upload_on_save是指在儲存檔案時自動上傳主機,把它設為true,最後是輸入FTP相關的帳密資訊
改好後存檔即可,sftp-config.json就會存在你的網站資料夾裡,這個檔案切記不要上傳到主機上,不然ftp帳密就被人看光光了
存檔後一樣在資料夾上方點右鍵,找到BrowseRemote,如果ftp資訊正確的話,可以看到主機上的檔案列表
成功連線後,會看到主機目錄裡的資料夾,確保是含有wp-admin、wp-content、wp-includes資料夾的目錄才是WordPress網站目錄,然後點選Folderactions
點選Download,ST3就會開始把整個網站的檔案抓回來到你開的資料夾裡面,這過程需要一些時間
最下方會顯示下載進度,等到完成後就可以在左側欄看到你所有的檔案,點擊任一一個檔案就會出現在右邊的視窗中,以方便進行編輯
到這邊ST3的開發環境就已經算是準備好了,你可以隨便修改一個檔案試試看,像是多一個空格或多一行,然後進行儲存(快捷鍵是ctrl+sorcmd+s),FTP就會開始自動上傳,如果你怕改錯想用手動上傳,可以把sftp-config.json裡面的upload_on_save改成false,然後修改完後在左側欄你修改的檔案上按右鍵,會看到upload的選項,點下去就會上傳。
用ST3的另外一個好處是它可以進行全站檔案的搜尋,假設今天你要找某段程式的某個部份,只要點選Find>FindinFiles,就可以輸入關鍵字進行所有檔案的搜尋,而且速度快到令人驚訝,找到你要的字串是在哪一個檔案後,就能方便修改或做其它處理了。
返回目錄
Topic1
建立子主題
關於WordPress子主題的教學非常多,主要概念就是假設你的佈景主題是用買的,或是下載不是你自己從無到有開發的佈景主題,那就可能會遇到需要更新的時候,理論上沒有修改裡面的程式的時候,你就可以放心的更新,
但假設我們今天要修改WooCommerce的欄位,就會需要把程式碼寫在佈景主題裡面,所以萬一有更新時,作者不知道你有修改過,他就會以他自己完成的版本來發送更新,這時更新下去的話,之前你的修改就消失無縱了,所以為了避免這個狀況,才有子主題這個機制存在。
下面步驟說明如何實作子主題:
假設你現在用的佈景主題是Storefront,新增一個空白資料夾叫做Storefront-child,這就是子主題的資料夾,雖然沒有硬性規定要取這樣的名字,但是為了好辨識通常會取跟現有主題有相關聯的名稱
使用ST3開啟你的網站資料夾,然後開啟新檔,在檔案中複製以下文字後將其貼入
/*
ThemeName:Storefontchild
Template:storefront
*/
@importurl("../storefront/style.css");
ThemeName:是在後台外觀>佈景主題列表中會顯示的名稱,為了好辨識,命名邏輯也是以與原本主題相關連
Templage:是指這子主題的老爸是誰,用父主題資料夾的名稱輸入
@importurl:這是匯入父主題的css檔,一套佈景主題最基本的檔案就是style.css,匯入之後就可以沿用父主題的css而不會造成版面爆走,如果你用的主題不是storefront,只要替換掉路徑的名稱就好,像是../mythemename/style.css
貼入後點選存檔,檔名為style.css,儲存位置在你的子主題資料夾裡面,也就是storefront-child裡面,儲存成功後SFTP就會自動上傳到主機
在後台的佈景主題找到你的子主題並且啟用它,這樣就算是完成了子主題的建立
有些佈景主題啟用子主題後,會發生版面錯亂或是找不到css無法正確載入的情況,這多半是這個主題的style.css是沒有寫任何東西的,所以就算import了style.css也會沒有用,開發者為了更有邏輯的組織css檔,會特別用資料夾去分類他的css檔案架構,因此會需要使用wp_register_script的函式才能正確載入css檔。
如果你遇到了子主題跑版的情形,請先看一下你使用的主題有沒有提供子主題檔,有的話就用他們所提供的子主題,通常你會發現這種類型的子主題資料夾裡除了style.css外,還會多一支funtion.php,而裡面通常就會寫像這樣的語法:
wp_register_style('html5blank',get_template_directory_uri().'/css/main.css',array(),null,'all');
這就代表它的主要css不是放在style.css裡面,而是放在主題目錄下css資料夾裡面的main.css檔,但因為WordPress規定一定要有style.css,所以它是不得不的存在。
至於function.php除了可以利用其它路徑載入檔案外,它還有什麼功能呢?基本上所有與WordPress溝通、使用hook機制(下面會提到)、控制外掛等目的,都是寫在這支檔案裡面,所以它可以說是佈景主題的核心程式,如果你有自己Google試著debug的時候,常常看到教學文都會需要把程式碼貼在這支檔案裡面,
而我們這篇文章的主題,修改WooCommerce的結帳欄位,也是要把程式寫在這支檔案裡面,父主題有自己的function.php而子主題當然也有,而且子主題會直接繼承父主題這支檔案的所有內容,所以回到ST3,新開一個空白的檔案,命名為funciton.php儲存在子主題資料夾中吧~
有了這兩個檔案後,我們的前置作業就算大功告成,接下進來進主題
更多關於子主題的設定細節,請參考WordPress子主題官方文件。
返回目錄
Topic2
WooCommercehook機制說明
在開始正式進入修改WooCommerce的結帳欄位之前,我們先介紹修改的邏輯。
有從上面看下來的朋友肯定會有一個疑問,為何我要修改的是WooCommerce這支外掛,而修改的程式卻是要寫在佈景主題裡面?問得非常好(謝謝),WordPress為了避免因為更新而造成修改被覆蓋,除了發展出父子主題的方式外,還有一種最常用的Hook機制,簡單說就是可以在主題裡面寫好程式碼,然後像掛衣服一樣掛在外掛上面,至於要怎麼掛、掛在哪裡,每支外掛都會有它自己的方式,想更深入了解Hook機制可以參考這篇專業文章。
WooCommerce在很多地方都有先放好「衣架」,在結帳頁面有哪些地方可以掛衣服可以參考下圖,當然,除了結帳頁外,WooCommerce還有很多其它頁面,所以當今天你想要掛某些程式在WooCommerce的某些頁面時,你只要去找那邊的衣架叫什麼名字,就可以很輕鬆的掛上你想要掛的程式。
紅色區域就是可以掛衣服的地方,WooCommerce有超多的地方可以掛,可以參考https://businessbloomer.com/woocommerce-visual-hook-guide-checkout-page/
假設你今天想要在「有優惠券嗎?按此輸入您的優惠碼」前加入一段紅色的促銷字,像是「今天結帳享有66折優惠喔~」,就看到最上面的衣架名稱叫做woocommerce_before_checkout_form,在子主題function.php的程式碼就可以這樣寫:
add_action('woocommerce_before_checkout_form','add_sale_word',10);
functionadd_sale_word(){
echo"
add_action('woocommerce_before_checkout_form','add_sale_word',10); add_action指的是準備開始一個掛衣服的動作,裡面第一個woocommerce_before_checkout_form參數還記得嗎?它就是衣架的名稱,而add_sale_word是要被掛上去的東西,以及最後一個10,這個10代表著這件衣服被掛上去的順序,如果我們想要比優惠券那段字更上面,只要把這10改成9看看,就能達成我們要的效果了。
至於add_sale_word裡面就是我們想做的事,在這邊我們使用echo,echo不是回聲,而是在php中輸出東西的語法,在這邊我們輸出一段html,用的是p標籤,並且給他一個style紅色,這樣就完成我們要的效果。
而當修改WooCommerce結帳欄位最常用到的衣架是woocommerce_billing_fields,而第一個範例移除不需要的欄位就是要把程式掛在這這個衣架上。
WooCommerce的結帳區塊分為「帳單資訊」與「運送資訊」,要針對哪一個欄位進行修改,只要找到這個欄位的英文名稱,做相對應的操作就好,以下是每個欄位的中英文名稱對照: 帳單資訊 billing_first_name–名字 billing_last_name–姓氏 billing_company–公司名稱 billing_address_1–門牌號碼與街道名稱 billing_address_2–公寓,套房,單位等(選填) billing_city–鄉鎮市 billing_postcode–郵遞區號 billing_country–國家 billing_state–縣/市 billing_email–電子郵件 billing_phone–聯絡電話 order_comments–訂單備註 運送資訊 shipping_first_name–名字 shipping_last_name–姓氏 shipping_company–公司名稱 shipping_address_1–門牌號碼與街道名稱 shipping_address_2–公寓,套房,單位等(選填) shipping_city–鄉鎮市 shipping_postcode–郵遞區號 shipping_country–國家 shipping_state–縣/市 shipping_email–電子郵件 shipping_phone–聯絡電話 Topic3 移除不需要的欄位 假設今天我們讓使用者結帳的時候不需要提供公司名稱這個資訊,就可以加入以下的程式碼: add_filter('woocommerce_billing_fields','remove_billing_company'); functionremove_billing_company($fields){ unset($fields['billing_company']); return$fields; } 使用unset這個方法來指定要移除哪一個欄位,中括弧內寫欄位的英文名稱就好,以此類推,要再多移除鄉鎮市欄位就再多複製一筆unset那行,然後把中括弧裡面的billing_companey替換成billing_city即可,注意要小心所有的引號、分號、括弧,只要少了任何一個,程式就會發生錯誤無法執行,請務必小心! Topic4 改變必填項目 上面我們從移除不需要的欄位的範例裡學到了如何指定我們要修改的欄位,而每一個欄位都有許多屬性來控制相關的設定,以下就常用屬性用途進行說明: type–欄位的類型,有文字(text)、多行文字欄位(textarea)、密碼(password)、下拉選單(select) label–欄位的名稱 placeholder–輸入框裡面的提示文字 class–提供給css的類別名稱 required–設定欄位是否為必填,是(true)、否(false) clear–如果發現攔位都集中在同一行,可以把這選項設為true來清除cssfloat label_class–提供給css的欄位名類別名稱 options–定義type為下拉選單欄位裡面的選項 priority–定義欄位的先後順序,值越小越前面 首先我們假設我們希望不一定要必填地址才能送出訂單,因為有提供超商取貨付款的金流方式,所以地址可以不用為必填欄位,這時候可以這樣寫: add_filter('woocommerce_billing_fields','custom_billing_address_1_required'); functioncustom_billing_address_1_required($fields){ $fields['billing_address_1']=array( 'required'=>false ); return$fields; } 把衣服掛在woocommerce_billing_fields這個衣架上,然後指定欄位名稱billing_address_1,在它的屬性下把required設為false,這樣地址欄位就會變成非必填的。
Topic5 改變欄位名稱 接下來,我想把聯絡電話的欄位名稱,改為更具體的名字:行動電話,一樣找到衣架woocommerce_billing_fields,指定欄位名,把它的屬性label改為「行動電話」,記得因為名稱是字串的形式,一定要加引號,而必填屬性為布林值,所以true或false不用加引號,程式碼範例如下: add_filter('woocommerce_billing_fields','custom_billing_phone_label'); functioncustom_billing_phone_label($fields){ $fields['billing_phone']=array( 'label'=>"行動電話" ); return$fields; } Topic6 改變欄位寬度 預設的姓名欄位是分成名跟姓兩欄,這不符合台灣人的使用習慣,我們慣用的是姓+名一個欄位就解決,然後改成滿版的寬度,整合上面曾經出現過的寫法,來試著寫出以下的結果。
1.移除名的欄位 2.把姓氏欄位名稱改成「您的大名」 3.把姓氏欄改成滿版寬度,原理是增加cssclass:“form-row-wide” 程式碼如下: add_filter('woocommerce_billing_fields','custom_name_field'); functioncustom_name_field($fields){ unset($fields['billing_first_name']); $fields['billing_last_name']=array( 'label'=>"您的大名", 'class'=>array('form-row-wide') ); return$fields; } Topic7 帶入現有會員資訊 有些會員資料在加入時就已經填寫,結帳時如果可以自動帶入就能更方便使用者減少輸入的欄位,增加購買機率。
延續上一個修改,我們把名字的欄位移除,只留下姓氏,但會員資料在填寫時是採用名+姓的方式,那WooCommerce在預設情況下「您的大名」欄位就只會自動帶入姓而沒有名,因為名被我們移除掉了。
所以我們要取得登入會員的名字,然後用javascript的方式把名跟姓合併後放入「您的大名」這個欄位。
我們會需要用到WordPress的API:wp_get_current_user,用它可以取得會員的各種資料,像是帳號名稱,或是我們需要的會員名字,詳細的說明請參考官方文件,程式設計的邏輯為: 1.判斷會員是已登入,如果有登入才會撈取會員姓氏 2.使用wp_get_current_user取得登入會員的資料 3.取得user_lastname 3.使用jQuery把名跟姓放進billing_last_name的值value裡面 add_filter('woocommerce_before_checkout_form','apply_username_field',10); functionapply_username_field(){ if(is_user_logged_in()){ $current_user=wp_get_current_user(); $lastname=$current_user->user_lastname; $output=' '; echo$output; } } 這邊用到的衣架是woocommerce_before_checkout_form,指的是把javascript放在結帳表單之前,然後使用echo的方式來輸出javascript,這邊要注意的是單引號跟雙引號不要搞混,單引號是php的內容,而雙引號是給javascript使用的,$lastname.$firstname中間的「.」是php連結兩個資料的寫法,這樣就能把姓跟名組合在一起。
Topic8 改變欄位順序 WooCommerce地址欄位預設是比照美國地區的習慣,是從小鄉鎮填到大地區,但台灣剛好是顛倒,所以我們要把地址相關的欄位,全部重新排序過,目標順序是郵遞區號、縣/市、鄉鎮市以及街道地址,這個修改需要注意的是,它的程式邏輯是會把所有欄位都進行排序後再輸出最後結果,所以與地址不相關的欄位也務必記得要列入排序的考量之中,程式邏輯如下: 1、先把需要的欄位存到$order裡面 2、指定每個欄位的優先順序(priority) 2017/08/025新版修改欄位順序寫法 根據在stackoverflow查到的資料表示,WooCoomerce3.0.4之後的版本不支援先前的寫法,在實驗過後調整為以下寫法,主要拆成兩部份,一個是設定基本資料欄位,另一個是控制地址相關欄位,本以為寫在同一支function就可以運作,但爬資料說似乎會受到商店國別的影響而被覆寫欄位順序,所以改分成兩支程式來覆寫。
add_filter("woocommerce_checkout_fields","new_order_fields"); functionnew_order_fields($fields){ $fields["billing"]["billing_last_name"]["priority"]=10; $fields["billing"]["billing_email"]["priority"]=20; $fields["billing"]["billing_phone"]["priority"]=30; $fields["billing"]["billing_country"]["priority"]=40; $fields["billing"]['billing_last_name']['class']=array('form-row-wide'); $fields["billing"]['billing_email']['class']=array('form-row-wide'); $fields["billing"]['billing_phone']['class']=array('form-row-wide'); return$fields; } 每個欄位都有自己的priority屬性,數字越小,排得越前面,所以這邊的排序關係跟他是被寫在誰的前面沒有關係,只要priority數字比其它人小,縱使被寫在最後一行依舊會出現在結帳頁中的第一個順位。
另外也不一定要用十進位,使用十進位是以防未來在某兩個欄位中間要插入其它欄位時,還有空間可以插入,而不用修改其它欄位的priority。
另外記得要注意的地方,billing_country這欄位一定要存在,不然會發生資料驗證無法通過的情況,不存在它會一直跳出「請填寫地址進行下一步」的錯誤訊息,縱使你已經填完所有地址資訊。
add_filter('woocommerce_default_address_fields','new_order_address_fields'); functionnew_order_address_fields($fields){ $fields["postcode"]["priority"]=50; $fields["state"]["priority"]=60; $fields["city"]["priority"]=70; $fields["address_1"]["priority"]=80; return$fields; } 地址相關的資訊用另一支程式來掛在另一個名為woocommerce_default_address_fields的衣架上,priority的部份接續上方的數值,這樣才能正確的設定地址欄位的順序。
Topic9 下拉選單帶入郵遞區號、縣市 當我們改好輸入地址的順序後,為了更方便訪客可以更快速的輸入地址資訊,我們加入下拉選單來讓訪客可以省下打字的時間,並且減少錯誤輸入的機會。
我們希望實現的效果如下: 1、郵遞區號輸入後會自動帶入縣/市地區,或是由縣/市欄位的選擇而動態載入郵遞區號 2、鄉鎮市欄位會隨著縣/市的選擇而動態變更,自動帶入該縣/市所屬之地區 3、偵測用戶裝置的地理位置,自動帶入縣市地區資料 地區資料的部份主要使用essoduke大大所開發維護的台灣地區資料清單,只要載入已經製做好的地區資料,就能在下拉選單中看到相對應的縣市,程式碼範例如下: add_filter("woocommerce_after_checkout_form","twzipcodefield"); functiontwzipcodefield(){ $output='
2017/08/07新增帳單地址與運送地址下拉選單功能 add_filter("woocommerce_after_checkout_form","twzipcodefield_shipping"); functiontwzipcodefield_shipping(){ $output='
Topic10 新增欄位 有時候行銷管道不是每個都採用線上的方式進行時,像是街上發的傳單、公車廣告,或是朋友的介紹,這些管道就比較難用追縱碼的方式來進行追縱,所以就可以在結帳時使用下拉選單的方式請訪客選擇,接下來我們要新增一個下拉選單的欄位叫做「您從何處得知我們?」,包含四個選項,然後在後台的訂單列表頁把這個結果顯示出來。
程式邏輯的部份會使用到三個衣架,分別是woocommerce_before_order_notes、woocommerce_checkout_update_order_meta、woocommerce_admin_order_data_after_billing_address。
1、新增一個下拉選單並新增選項後,把它放在訂單備註的前面 2、當訂單更新時,把這個欄位的值存到訂單的資料表中 3、把資料掛到後台的訂單明細之中 //新增下拉選單 add_action('woocommerce_before_order_notes','add_select_checkout_field'); functionadd_select_checkout_field($checkout){ woocommerce_form_field('channel',array( 'type'=>'select', 'class'=>array('form-row-wide'), 'label'=>'您從何處得知我們?', 'options'=>array( '公車廣告' =>'公車廣告', '街頭文宣' =>'街頭文宣', '友人告知' =>'友人告知', '網路廣告' =>'網路廣告' ) ),$checkout->get_value('channel')); } //儲存下拉選單的資料 add_action('woocommerce_checkout_update_order_meta','update_field_data'); functionupdate_field_data($order_id){ if($_POST['channel']){ update_post_meta($order_id,'channel',esc_attr($_POST['channel'])); } } //在後台訂單明細顯示資料 add_action('woocommerce_admin_order_data_after_billing_address','custom_order_meta',10,1); functioncustom_order_meta($order){ echo'
客戶來源:'.get_post_meta($order->id,'channel',true).'
'; } 這邊使用「’公車廣告’=>‘公車廣告’」這樣的寫法來定義下拉選單的內容,雖然看起來好像是一樣的東西寫兩次,但他們有不同的意義,第一個公車廣告是這個欄位所代表的值,也就是會在後台訂單明細中看到的結果,而第二個是使用者會看到的選項,因此只要能方便商店管理者以及使用者辨識,這兩邊長得不一樣也沒關係。至於這個衣架woocommerce_admin_order_data_after_billing_address是掛在如下圖的位置: 顯示在帳單資訊的最下方 Topic11 三聯式發票欄位 開立發票欄位也是常常用到的功能,我們將新增一個單選方塊,讓買家決定是要捐贈發票還是開立三聯式發票給公司報帳,當選擇三聯式發票後,會顯示公司抬頭與統一編號兩個欄位。
程式設計說明如下: 1、為了方便公司抬頭跟統編可以在一起顯示,所以先移除WooCommerce內建的公司名稱欄位 add_filter('woocommerce_billing_fields','remove_defalut_company_name'); functionremove_defalut_company_name($fields){ unset($fields['billing_company']); return$fields; } 2、新增三個欄位,分別是一個單選方塊(radio)與兩個文字輸入框(text) add_action('woocommerce_before_order_notes','add_invoice_type'); functionadd_invoice_type($checkout){ woocommerce_form_field('invoice_type',array( 'type'=>'radio', 'class'=>array('form-row-wide'), 'label'=>'是否捐贈發票', 'options'=>array( 'invoice_no' =>'捐贈發票至XXX', 'invoice_yes' =>'不捐贈發票', ) ),$checkout->get_value('invoice_type')); woocommerce_form_field('company_name',array( 'type'=>'text', 'class'=>array('form-row-wide'), 'label'=>'公司抬頭', ),$checkout->get_value('company_name')); woocommerce_form_field('company_id',array( 'type'=>'text', 'class'=>array('form-row-wide'), 'label'=>'統一編號', ),$checkout->get_value('company_id')); } 3、在每次提交訂單時,把我們自行新增的三個欄位的值存到資料庫 add_action('woocommerce_checkout_update_order_meta','update_invoice_meta'); functionupdate_invoice_meta($order_id){ if($_POST['invoice_type']){ update_post_meta($order_id,'invoice_type',esc_attr($_POST['invoice_type'])); update_post_meta($order_id,'company_name',esc_attr($_POST['company_name'])); update_post_meta($order_id,'company_id',esc_attr($_POST['company_id'])); } } 4、在後台顯示發票資訊,而只要當訂單需要三聯式發票時,才會顯示公司抬頭與統編的資料。
add_action('woocommerce_admin_order_data_after_shipping_address','custom_order_meta_invoice',10,1); functioncustom_order_meta_invoice($order){ if(get_post_meta($order->id,'invoice_type',true)=='invoice_yes'){ echo'
發票: 開立三聯式發票
'; echo'公司抬頭:'.get_post_meta($order->id,'company_name',true);
echo'
統一編號:'.get_post_meta($order->id,'company_id',true).'
發票: 捐贈發票至XXX
'; } } 5、使用JS控制前台公司抬頭與統編欄位的隱藏與顯示 add_filter("woocommerce_after_checkout_form","invoice_container"); functioninvoice_container(){ $output=' '; echo$output; } 最後記得將「捐贈發票至XXX」中的「XXX」修改為捐贈單位。完成後就可以在表單最下面看到如下圖的發票欄位。
預設不顯示公司抬頭與統編欄位 Topic12 預設顯示密碼欄位 如果網站有提供非會員結帳的功能,又希望讓用戶在結帳完成後同時能成為會員,勢必要能簡化加入會員的流程。
在預設情況下「建立帳號」是未勾選,並且輸入密碼欄位是被隱藏的,以下的程式範例可將勾選改成預設,並直接顯示密碼欄位: add_filter("woocommerce_after_checkout_form","show_password"); functionshow_password(){ $output=' '; echo$output; } Topic13 動態顯示運費 習慣上我們會以滿額免運費的方式來吸引顧客加購商品,但某些時候要運送的地區比較遠,縱使滿額還是需要顧客負擔運費,但運費部分可以提供優惠,像是「基本運費100元,消費滿1,000元運費優惠50元」這樣的條件,可以使用以下的語法來實現: functionods_set_shipping_method_conditional($rates){ $order_total=WC()->cart->get_subtotal(); if($order_total>=1000){ unset($rates['flat_rate:1']); }else{ unset($rates['flat_rate:2']); } return$rates; } add_filter('woocommerce_package_rates','ods_set_shipping_method_conditional',100); $order_totoal為購物車小計金額,當小計大於等於1000的時候,使用unset把flat_rate:1這個運費條件移除掉,如果未滿1000元,則把flat_rate:2移除掉。
在WooCommerce後台設定運費區域時,每種運送方式都會有一個唯一的value,而flat_rate:1跟flat_rate:2分別代表基本運費跟優惠運費,後台運費設定如下圖: 至於要如何找到該運送方式的value需要在前台開啟開發者工具或是檢查元素來進行檢視,理論上單一費率會是flat_rate開頭,冒號後面接的是第幾個運送方式,找尋value的方式請參考下圖: 找到value後就可以針對購物車金額來決定要顯示的運費方式。
返回目錄 Topic14 其它 業務邏輯百百種,這邊列舉出的項目算是比較常見的需求,但如果你是購物商城的站長,或是有在協助公司經營WooCommerce電子商務網站,遇到任何結帳欄位相關的問題都可以在下方留言,或是你也可以許願,像是欄位的填寫限制條件、樣式修改等等,不是「太複雜」的話我們都願意幫忙寫寫看,然後測試過後沒問題,一樣會在這邊分享出來給有相同需要的朋友,所以不用客氣儘管問,你我的問題能幫到更多的人! 158則留言 Jessica表示: 2022-03-1311:12:37 不知道過了這麼久有沒有回覆,我來並並運氣XD 請問有辦法可以在CHECKOUT頁面做出3層式下拉選單嗎?就像你上面的教學Topic9的「台灣地區資料清單」模式相近的?是不是都要先做出一個js才能引進頁面? 謝謝 回覆 oberon表示: 2022-03-1409:57:15 有的XD,但這個站的教學文章我停更了,最新的WordPress教學文章我都寫在這邊:https://oberonlai.blog/tw/ 關於你的問題沒錯,要在checkout頁加入任何互動效果都需要用JavaScript處理, 然後使用WooCommerce內建的JSEvent來觸發你的程式碼,不然會發生改了之後沒效果的問題:https://wordpress.stackexchange.com/questions/342148/list-of-js-events-in-the-woocommerce-frontend 回覆 kenjisrealm表示: 2021-03-1701:46:49 老師您好, 我按照一開始的流程操作連結FTP,但是讀取出來的內容裡面沒有顯示wordpresscontent等資料 連結完成後顯示如下: Initialfolderandcontents: “/” “/.bash_logout” “/.bashrc” “/.composer/” “/.openssh/” “/.profile” “/.ssh/” “/applications/” Validatingremotefolder“/”…….success 這樣是哪邊出了問題呢? 感謝老師! 回覆 TingMei表示: 2021-02-0520:51:27 您好,想請問國家選擇了國外(香港、澳門),如何把台灣的縣/市*以及鄉鎮市區*影藏呢 回覆 oberon表示: 2021-02-0810:10:28 您好,邏輯是判斷當選擇的國家非台灣時,停用縣市下拉選單的套件,這個我再找時間補上,謝謝你的留言! 回覆 廖郁翔表示: 2021-02-0414:16:52 您好,想詢問有沒有辦法在woocommerce的結帳欄位, 限制姓名只能夠填寫中文呢? 由於有時候有客人填寫英文名稱, 這樣會導致出貨困難, 物流的司機也會困擾, 想詢問看看您有沒有這方面的經驗, 期待您的回覆。
回覆 oberon表示: 2021-02-0510:35:28 理論上可以的,請參考這篇:https://ithelp.ithome.com.tw/questions/10190181 回覆 檸檬表示: 2020-12-0411:45:55 想請問通常初學者在面對woocommerce這麼多hooks時,要如何才能做到像您們知道要去找哪一支衣架? 回覆 oberon表示: 2020-12-0417:51:03 你好,我的習慣是要先知道要找哪個範本的Hook,然後根據我需要的位置或是時機用Google找關鍵字,像是搜尋:woocommercecheckoutpagebeforetitlehook 回覆 felicia表示: 2020-10-1402:23:25 您好請教我把st3設定好更改程式碼後存檔他下方會顯示上傳成功.. 可是網站上沒動靜我進到主機空間去看檔案也沒有更改沒有被覆蓋 可能的原因為何 回覆 oberon表示: 2020-10-1410:33:40 您好,應該是目錄的路徑remote_path指到非WordPress的資料夾了,先去主機空間根目錄找看看有沒有你上傳的檔案,然後修正路徑即可~ 回覆 felicia表示: 2020-10-1423:30:38 我試試感謝 回覆 周表示: 2020-10-0521:26:16 非常感謝你提供這麼棒的教學 小弟按照本教學在Topic0的12到13的步驟 出現如下圖的警示視窗與內容 https://imgur.com/Qz2uw6G https://imgur.com/7yOiEZi 是否可麻煩oberon幫我看一下是哪一段出現錯誤 在此感謝你 回覆 oberon表示: 2020-10-0611:29:08 不客氣!你的FTP連線資訊有正確嗎?可以的話先使用FileZilla軟體來確認連線正常,再把相關FTP資訊輸入到SublimeText裡面~ 回覆 周表示: 2020-10-0621:54:47 你好,因為才剛學習使用wordpress架設網站,可能會問一些很愚蠢的問題,請多包涵。
謝謝你的回覆。
今天又嘗試了一下,目前前進到TOPIC0的第18步驟 用filezilla軟體測試我的FTP應該是連得上的? https://imgur.com/hah9jH5 然後我第18步驟又跳出警示,應該是說我的路徑沒設好? https://imgur.com/gvKrkBa 請問我的這個”remote_path”要去哪裡找,原本以為是這個,不過試起來不行。
https://imgur.com/mYVoQ6l 是否可麻煩幫我看一下是哪裡出現錯誤 在此感謝你 回覆 oberon表示: 2020-10-0712:37:21 remote_path通常指的是資料夾路徑,一般來說是用相對路徑即可,你試看看remote_path:‘/’,這樣它就會進到主機網站的根目錄~ 回覆 周表示: 2020-10-0809:49:21 你好 感謝您的回覆,目前TOPIC0應該是完成了。
FTP路徑相關問題詢問過主機商的客服,也重新設定好了。
檔案已DOWNLOAD,確實花了很多時間。
TOPIC1也完成了。
建立子主題資料夾 ->建立style.css檔案 https://imgur.com/TUJaqx0 ->CRTL+S ->啟用子主題 ->”沒有”發生版面錯亂或是找不到css無法正確載入的情況 ->建立funtion.php檔案 ->在funtion.php檔案貼上TOPIC3:移除不需要提供公司名稱的程式碼 https://imgur.com/KCWVyr1 ->CRTL+S 再去商品網頁上確認 結帳頁面還是有公司名稱 https://imgur.com/cFYKboR 請問我是不是前面topic0&topic1有東西沒設定好,麻煩再幫我看一下 在此感謝你 oberon表示: 2020-10-1410:36:00 你的function.php這個檔案要有 iris表示: 2020-08-1712:59:11 老師您好,感謝您的文章幫助我很多,有個WooCommerce問題不知可否詢問您這邊~ 客戶查詢訂單頁面中(my-order),訂單編號跟View連結(要看訂單明細)按下去會連到客戶帳戶頁面(account),不知是哪裡沒有設定到?抱歉wordpre是自學,這二天上網查了許多無解,若是有打擾您非常不好意思。
謝謝 回覆 oberon表示: 2020-08-1715:51:46 不客氣!有幫助到你真是太好了! 關於你的問題有Demo網址可以讓我看一下嗎?如果你有照著WooCommerce內建的設定步驟來走應該是不會遇到這樣的問題,但也有可能是被其他外掛所影響,你可以先停用除了WooCoomerce以外的外掛來檢視是否正常,如果還是一樣,可以換回預設的佈景主題試試看~ 回覆 eunie表示: 2020-06-1115:17:16 您好,我想詢問為什麼我的網頁,結帳頁面Billingdetails,完全無法填寫。
另外,銀行匯款的帳號也顯示不出來。
上網爬文也找不到解答。
可否請你幫幫忙,謝謝! 網頁 https://tcatraveljapan.com/checkout/ 回覆 oberon表示: 2020-06-1115:50:35 您好,幫你做了一個截圖說明,你參考看看~https://cln.sh/n3a3aI 回覆 Nancy表示: 2020-02-1213:38:34 您好,謝謝您的分享~ 我做到前置的18,讀檔案出來都是 ConnectingtoFTPserver“uncleroast.com.tw”as“[email protected]”…….success Validatingremotefolder“/uncleroast.com.tw/public_html/”…failure(Foldernotfound) Initialfolderandcontents: “/” “/.htaccess” …… 我自己用FTP軟體登入進去有看到子資料夾,但如果要點進去子資料夾是顯示”無法取得目錄列表” 我是用siteground的FTP,可以請您救救我嗎?🙁 回覆 oberon表示: 2020-02-1216:09:34 Hello~ 你先用cPanel的檔案管理員去確認一下的資料夾名稱, 依照你提供的訊息看起來是沒有/uncleroast.com.tw/public_html/這個資料夾, 先看一下放wp-admin、wp-include這些資料夾是在哪個目錄底下, 然後路徑修改為該資料夾應該就行了~ 回覆 Nancy表示: 2020-02-1310:09:12 Hi,謝謝您耐心的回覆~ 我檢查過後,資料夾路徑是正確的,我用FileZilla也可以登入我的FTP且可上傳下載, 但還是一樣出現錯誤訊息 Validatingremotefolder“/uncleroast.com.tw/”…….failure(Foldernotfound) Initialfolderandcontents: “/” “/.htaccess” “/index.php” “/license.txt” …… 檢查我的語法如下,可以請您幫我是有哪邊錯誤嗎?麻煩您了>”< 還是我要重新安裝sublimeText呢? { //Thetabkeywillcyclethroughthesettingswhenfirstcreated //Visithttp://wbond.net/sublime_packages/sftp/settingsforhelp //sftp,ftporftps "type":"ftp", "save_before_upload":true, "upload_on_save":true, "sync_down_on_open":false, "sync_skip_deletes":false, "sync_same_age":true, "confirm_downloads":false, "confirm_sync":true, "confirm_overwrite_newer":false, "host":"uncleroast.com.tw", "user":"我的帳號", "password":"我的密碼", //"port":"21", "remote_path":"/uncleroast.com.tw/public_html/", "ignore_regexes":[ "\\.sublime-(project|workspace)","sftp-config(-alt\\d?)?\\.json", "sftp-settings\\.json","/venv/","\\.svn/","\\.hg/","\\.git/", "\\.bzr","_darcs","CVS","\\.DS_Store","Thumbs\\.db","desktop\\.ini" ], //"file_permissions":"664", //"dir_permissions":"775", //"extra_list_connections":0, "connect_timeout":30, //"keepalive":120, //"ftp_passive_mode":true, //"ftp_obey_passive_host":false, //"ssh_key_file":"~/.ssh/id_rsa", //"sftp_flags":["-F","/path/to/ssh_config"], //"preserve_modification_times":false, //"remote_time_offset_in_hours":0, //"remote_encoding":"utf-8", //"remote_locale":"C", //"allow_config_upload":false, } 回覆 oberon表示: 2020-02-1310:20:12 remote_path如果是改成“/public_html”的話呢? 回覆 techidiot表示: 2019-11-0617:17:50 請問如果想要在結帳時,客人可以選擇順豐智能櫃/順豐站的地址,該如何做?感謝大神!!T_T 回覆 oberon表示: 2019-11-0813:23:18 如果他們有提供API的話請你的工程師串接就可以了! 回覆 techidiot表示: 2019-11-2323:33:45 您好,我是來問【結帳時如何讓顧客選擇順豐智能櫃/順豐站的地址】的那個techidiot,我找了快一個月都找不到符合的plugin,今天竟然糊糊塗塗的找到了一個plugin〖CheckoutFieldEditorforWooCommerce〗可以做得到!!!狂喜中>”,‘msg’=>‘資料不正確的錯誤的請求’)); } $mobile=str_replace(array(‘‘,‘-‘),”,$_POST[‘mobile’]); $text=$_POST[‘text’]; if(strpos($mobile,’09’)==0&&strpos($mobile,’09’)!==false&&strlen($mobile)!=10){ wp_send_json_error(array(‘code’=>503,‘data’=>”,‘msg’=>‘手機格式錯誤’)); } $package=array( ‘username’=>‘帳號’, ‘password’=>‘密碼’, ‘dstaddr’=>$mobile, ‘smbody’=>$text, ‘CharsetURL’=>‘UTF8’ ); $url=‘https://smsapi.mitake.com.tw/api/mtk/SmSend?’.http_build_query($package,”,‘&’,PHP_QUERY_RFC3986); $args=array( ‘timeout’=>5, ‘redirection’=>5, ‘httpversion’=>‘1.1’, ‘user-agent’=>‘WordPress’, ‘blocking’=>true, ‘headers’=>array(), ‘cookies’=>array(), ‘body’=>null, ‘compress’=>false, ‘decompress’=>true, ‘sslverify’=>false, ‘stream’=>false, ‘filename’=>null, ); $response=wp_remote_get($url,$args); if(is_wp_error($response)){ $error_message=$response->get_error_message(); wp_send_json_error(array(‘code’=>504,‘data’=>”,‘msg’=>$error_message)); }else{ wp_send_json_success(array(‘code’=>200,‘data’=>$response)); } } add_action(‘wp_ajax_nopriv_mxp_mitake_sms_text_webhook’,‘mxp_mitake_sms_text_webhook’); 回覆 Rex表示: 2019-06-1823:06:40 目前測試如果跟RYWooCommerceTools物流結合, 在選擇超商取貨後,運送地址的下拉選單不會隱藏。
請問有什麼辦法可以解決呢 回覆 oberon表示: 2019-06-2009:09:16 Hello~這需要另外客制去針對運送方式做條件判斷然後顯示或隱藏地址下拉選單,相關的WCAPI可以參考https://docs.woocommerce.com/wc-apidocs/class-WC_Shipping.html 回覆 張小遠表示: 2019-06-1313:43:52 請問大大 WooCommerce我使用了您的下拉式地區自動帶入郵遞區號的代碼以及自動填入會員資料代碼 但是結帳欄位內下拉式地區不會自動帶入會員現有資料 請問這個要如何解決?? 回覆 oberon表示: 2019-06-2009:10:54 Hello~請問你指的結帳欄位是哪邊的結帳欄位?能截圖或是網址可以讓我確認嗎? 回覆 happypaul表示: 2019-04-2910:52:15 http://elderly-kingdom.com/?page_id=811 請問woocommerce怎減少結賬時國家內的國家多稱選擇 回覆 oberon表示: 2019-04-2918:33:52 Hello~不太確定您指的多稱選擇是什麼意思? 如果是要限制可運送的國家,可前往WooCommerce設定中的運送方式會有運送區域可以選擇,勾選你希望能送達的國家即可~ 回覆 JHIHSIAN表示: 2019-03-2118:30:18 您好!!我想了解一下WOOCOMMERCE如何傳接簡訊系統呢? 我使用的是三竹簡訊系統,想讓客戶可以除了EMAIL以外,手機簡訊也能收到訂單資訊 回覆 oberon表示: 2019-03-2120:00:49 您好,這應該要客製化開發了,或是可以跟三竹反應一下,請他們開發WooCommerce外掛XD 回覆 Jhihsian表示: 2019-03-1918:03:44 我想了解一下,我的woocommerce能否跟三竹簡訊系統做API串接呢? 想讓客戶不只email能收定訂單資訊,手機也想讓他收到訂單資訊 回覆 KenTong表示: 2019-02-2810:58:50 謝謝Oberon這麽好的文章, 我有一個需要是這樣的,在網站上有一類虛擬產品需要填入推薦人名字和電郵才可以購買,並我想在後台的order能看到。
在網上其他的產品都不用。
不知老師有沒有方向,我應要如何改? 回覆 oberon表示: 2019-03-0620:49:14 不客氣^^ 建議可以用產品類別來做區分,讓推薦人名字和電郵必填的條件寫在特定的商品分類上來處理, 實務上我沒這樣做過,也許還有其他更好的方法。
回覆 Enix表示: 2018-11-2111:44:59 您好,想請問連接FTP要上傳檔案,為什麼都會說我沒有權限上傳呢? 請問這個該如何修正呢?感謝 回覆 oberon表示: 2018-11-2210:43:55 您好,這代表你的remotepath指到的資料夾是無法寫入,它應該不是網站的根目錄資料夾,通常放網站的資料夾可能會是/public_html或是/httpdocs,萬一沒有這個資料夾你可能要問一下你的主機商,看你的網站根目錄是放在哪個資料夾底下~ 回覆 Enix表示: 2018-11-2214:54:03 好的,我在嘗試修改路徑看看,感謝您的回覆 回覆 Enix表示: 2018-11-2108:44:48 您好,想請問為什麼要連線FTP時都會出現以下訊息呢? Validatingremotefolder“/shinylife.com.tw/”..failure([WinError32]程序無法存取檔案,因為檔案正由另一個程序使用。
:‘c:\\users\\jttv\\appdata\\local\\temp\\sublime-sftp-offset-1542760470\\__sublime_sftp_offset’) Unabletodetermineremotetimeoffsetsince“/shinylife.com.tw/”isnotwritable.Pleasesetthe“remote_time_offset_in_hours”settinginsftp-config.jsonforsynccommandstoworkproperly. 連結這個FTP其他資料夾,就都不會有這個問題,想請問版大有辦法可以解決這個問題嗎?感謝您 回覆 brian表示: 2018-11-1423:07:03 下拉選單帶入郵遞區號、縣 這是個非常棒的功能,可惜是說我的商店取門市會跳外網在回來後,之前客戶填的被刷新。
cookie的做法有它難度在吔!敢問老師,有沒有更好的方式?例如設一個暫存欄位(zipcode),在將它取回呢? 還是很謝謝老師,大方的指導我們。
再次感謝 回覆 oberon表示: 2018-11-1612:28:48 不客氣,我也還在摸索中,關於已填資料被刷新我會再研究,等有找到具體可行的辦法我會再分享出來~ 回覆 陳宜德表示: 2018-11-0803:05:01 老師:我按照[帳單資訊]修改方式下去修改[運送到不同地方],都沒有變化,請問下面的程式碼,不知道哪裡有問題能否幫我看一下,謝謝你 add_filter(‘woocommerce_default_address_fields’,‘new_order_address_fields’); functionnew_order_address_fields($fields){ $fields[“shipping”][“shipping_first_name”][“priority”]=10; $fields[“shipping”][“shipping_email”][“priority”]=20; $fields[“shipping”][“shipping_phone”][“priority”]=30; $fields[“shipping”][“shipping_country”][“priority”]=40; $fields[“shipping”][“shipping_state”][“priority”]=50; $fields[“shipping”][“shipping_city”][“priority”]=60; $fields[“shipping”][“shipping_address_1”][“priority”]=70; $fields[“shipping”][“shipping_postcode”][“priority”]=80; return$fields; } 回覆 小皮編表示: 2018-10-2615:28:28 最近在學著自己弄購物網站,看到這篇才瞭解整個wordpress機制,真是有深度的文章 不過昨天一直連不上已為掛了XD 回覆 oberon表示: 2018-11-0211:57:11 謝謝你~剛好最近網站在搬家,不好意思讓你遇到造訪失敗>< 回覆 Sophy表示: 2018-10-2613:01:15 感謝大師教學,看了您的教學受益良多,實作上有一問題卡超久,想請教您,帳戶頁面刪除lastname欄位、更改placeholder、以及修改提醒文字,附圖給您 回覆 oberon表示: 2018-11-0212:00:56 不客氣,請問附圖在哪?沒看到@@ 回覆 Sophy表示: 2018-11-0512:47:48 大師您好,抱歉圖連結失效,欲修改的頁面 連結如下 https://www.brukess.com/account/edit-address/billing/ https://www.brukess.com/account/edit-address/shipping/ 使用hook修改欄位順序,無反應 https://www.brukess.com/checkout/ 結帳頁面可以修改順序,但無法修改長度 回覆 Leo表示: 2018-10-2214:29:53 您好,我目前在設定ST3開發環境,但是在步驟四貼入步驟三的碼後ST3沒有動作,接下來到步驟7也沒找到SFTP,是找到其他的SFTP程式,走到步驟18後看不到wp-admin、wp-content、wp-includes這三個資料夾,請問是哪邊出現問題呢? 最近想改結帳頁面還有商店頁行動裝置的商品呈現方式,真的對新手來說好複雜啊XD 回覆 oberon表示: 2018-11-0211:58:56 您好,先確認你的FTP是「SFTP」還是「FTP」,然後再確定根目錄的路徑是否有正確,需要的話我可以幫忙檢查~ 回覆 Enix表示: 2018-11-2108:26:55 您好,我的FTP設置完成了,但每一次要連線時都會出現以下訊息 ConnectingtoFTPserver“www.shinylife.com.tw”as“shinylifecomtw”..success Validatingremotefolder“/shinylife.com.tw/”..failure([WinError32]程序無法存取檔案,因為檔案正由另一個程序使用。
:‘c:\\users\\jttv\\appdata\\local\\temp\\sublime-sftp-offset-1542759817\\__sublime_sftp_offset’) Unabletodetermineremotetimeoffsetsince“/shinylife.com.tw/”isnotwritable.Pleasesetthe“remote_time_offset_in_hours”settinginsftp-config.jsonforsynccommandstoworkproperly. 請問該如何解決呢? 回覆 vic表示: 2018-09-2809:46:06 在購物車加入強制顯示密碼欄位後 add_filter(‘woocommerce_checkout_fields’,‘add_confirm_password_checkout_field’,10,1); functionadd_confirm_password_checkout_field($fields){ if(get_option(‘woocommerce_registration_generate_password’)!=‘no’) return$fields; $fields[‘account’][‘account_password’][‘class’]=array(‘form-row-first’); $fields[‘account’][‘account_password-2’]=array( ‘type’=>‘password’, ‘label’=>__(‘Passwordconfirmation’,‘woocommerce’), ‘required’=>true, ‘placeholder’=>_x(‘Confirmation’,‘placeholder’,‘woocommerce’), ‘class’=>array(‘form-row-last’), ‘label_class’=>array(‘hidden’) ); return$fields; } add_action(‘woocommerce_checkout_process’,‘confirm_password_checkout_validation’); functionconfirm_password_checkout_validation(){ if(!is_user_logged_in()&&(WC()->checkout->must_create_account||!empty($_POST[‘createaccount’]))){ if(strcmp($_POST[‘account_password’],$_POST[‘account_password-2’])!==0) wc_add_notice(__(“Passwordsdoesn’tmatch.”,“woocommerce”),‘error’); } } 之後原本在checkout頁面的老顧客登入與折價卷使用都不能用了 回覆 oberon表示: 2018-10-1112:45:28 您好~ 那可能先不要用這段Code,他沒有經過相關的測試~ 回覆 Eric表示: 2018-08-2316:44:31 您好我只要更改欄位名稱就會變成選填,請問程式該怎麼寫? add_filter(‘woocommerce_billing_fields’,‘custom_billing_first_name_label’); functioncustom_billing_first_name_label($fields){ $fields[‘billing_first_name’]=array( ‘label’=>”姓名” ); return$fields; } add_filter(‘woocommerce_billing_fields’,‘custom_billing_姓名_required’); functioncustom_billing_姓名_required($fields){ $fields[‘billing_姓名’]=array( ‘required’=>true ); return$fields; } 我這樣寫都無效。
回覆 oberon表示: 2018-08-3010:05:49 您好! WooCommerce3.4後的版本在非必填的欄位名稱上會自動加入「選填」的文字, 如果你要讓它必填,只要在array中多加一筆‘required’=>true就可以了, 但如果你要讓它為非必填但又不想讓「選填」的文字出現, 可以參考這篇的方法來把它移除—>https://stackoverflow.com/questions/50769727/remove-optional-text-from-conditional-checkout-fields-in-woocommerce-3-4 回覆 Fren表示: 2018-08-2313:04:10 您好,非常棒的文章, 謝謝您的整理。
請問關於三聯發票的欄位,是否有辦法在結帳頁面新增”發票的選項” 一般的結帳價格是未稅,在結帳時勾選如要開三聯發票後才啟動稅金計算器。
謝謝 回覆 oberon表示: 2018-08-3009:48:22 不客氣! 稅金計算的部份可能要參考Woocommerce的API來製作,邏輯應該是在勾選後用ajax去hooktax的api—>http://hookr.io/filters/woocommerce_calc_tax/ 回覆 wan表示: 2018-08-2215:26:34 老師您好: 如果我想在這上面加上物流選項,比如說黑貓的話,可行嗎>< 回覆 oberon表示: 2018-08-3009:43:18 您好~這部份可能要看你使用的金流服務有沒有支援黑貓物流,如果沒有的話可能就要換一家或是找人客製化開發了~ 回覆 wan表示: 2018-08-3009:49:01 好的謝謝老師 回覆 himalaya表示: 2018-08-1716:39:41 您好: 非常棒的教學 感謝老師 第19步驟flodersaction 我遇到st3抓ftp資料夾時的問題,請問如何處理 訊息如下 ConnectingtoFTPserver…………………………succsss Validatingremotefolder“/example/path/”..failure(Foldernotfound) Initialfolderandcontents: “/” “/.ftpquota” “/.htaccess” “/cgi-bin/” ………….. 回覆 oberon表示: 2018-08-2010:33:11 不客氣! 關於你的問題,應該是FTP的路徑有誤, “/example/path/”是範例,這邊應該要修改成你的路徑, 如果不知道要填什麼,可以填“/”就好, 你再試試看! 回覆 himalaya表示: 2018-08-2010:38:15 老師您好: 哈,我眼花了, 謝謝您 回覆 oberon表示: 2018-08-2010:44:22 不客氣! 回覆 Tracy表示: 2018-08-1410:25:25 你好, 請問有關三聯式發票欄位的問題… 單選方塊(radio)和文字之間‘捐贈發票至XXX’,及’不捐贈發票’,無法和版主板型一樣同行排列. 而變成上下排列! 請問是否該修改哪裡? 或者是因為我佈景主題不是Storefront的關係? 麻煩版主協助解惑一下,感激不盡! 回覆 oberon表示: 2018-08-1417:55:44 您好, 您的問題應該是屬於css的部份,如果有網址的話我們可以幫忙協助看一下~ 回覆 品佑表示: 2018-08-1013:57:58 您好,想請問top10新增欄位,有辦法新增填寫欄位嗎? 回覆 oberon表示: 2018-08-1317:43:56 您好~ 可以的,把type的地方改成text,然後option的地方刪掉,這樣就是變成填寫欄位而非下拉選單了。
回覆 Stonez表示: 2018-07-2717:34:43 你好,你的文章好棒! 有個建議:”在每次提交訂單時,把我們自行新增的三個欄位的值存到資料庫”,發票及公司抬頭應該要寫在account裡,這樣就不需要每次下單都重新填寫“發票及公司抬頭”. 回覆 oberon表示: 2018-07-3111:12:08 感謝您的好建議,找時間來補上! 回覆 Stonez表示: 2018-07-3119:41:28 感恩!:) 回覆 Gigi表示: 2018-07-2519:28:08 您好,我現在遇到一個非常大的問題,我的網站目前還算是測試版,想開店子商城所以下載了woocommerce,可是當我要從購物車到結帳頁面,頁面完全是空的….只顯示標題,完全沒辦法輸入什麼顧客資訊,最後checkout也沒辦法。
請問這問題是出在哪裡呢? 回覆 oberon表示: 2018-07-2711:19:53 你好~你可以先切換為預設的佈景主題看看,要使用WooCommerce佈景主題必須有支援,你可以先確認你目前使用的是否有支援~ 回覆 Becky表示: 2018-07-1300:10:08 您好,想請問一下,woocommercecheckout帳單資訊文字想要做更改是divclasstext這個部分的 要從哪裡修改? 回覆 oberon表示: 2018-07-1311:00:06 您好,可以試試這一篇的解決辦法—>https://stackoverflow.com/questions/44419189/woocommerce-3-0-change-billing-details-to-say-shipping-details-on-checkout 回覆 becky表示: 2018-07-2611:09:04 非常感謝您 回覆 oberon表示: 2018-07-2711:20:18 不客氣~希望有幫上你的忙^^ 回覆 陳小A表示: 2018-07-0611:01:50 感謝提供非常實用的文章, 我這邊有遇到個小問題,因為出貨有設定幾個集貨倉庫的點可以讓客戶自行取貨,所以我用了您的Topic10的方法,新增了欄位讓顧客選擇取貨地點,但我想讓這欄位的出現條件是顧客在運送方式選擇”自行取貨”才會出現,有甚麼方法可以做到呢? 感謝您 回覆 oberon表示: 2018-07-1310:56:39 不客氣^^ 如果你會使用javascript的話,可以先將取貨地點的欄位先隱藏起來,然後取得運送方式目前的值,當值為自行取貨時,再顯示取貨地點的欄位。
回覆 jeremy表示: 2018-05-2114:08:57 非常實用,不過我按照您的去改了欄位順序城市地區地址怎麼樣都改不了怎麼辦呢? 回覆 oberon表示: 2018-05-2211:31:54 你好~可能先確認你的程式有沒有貼對地方,或是有沒有遺漏的,都沒問題的話再確認下你的WooCommerce版本是不是最新版的,它的寫法有變動過 回覆 samx表示: 2018-05-1806:17:02 謝謝您花這麼多時間分享! 回覆 oberon表示: 2018-05-1817:31:15 不客氣!希望對您有幫助! 回覆 Edmond表示: 2018-04-1813:41:07 我的設定是這樣的: 1.運送目的地:強制運送至客戶帳單地址(客戶只需要輸入一個地址) 2.運送方式,我有兩種.1.寄出(客人要填地址)2.自行取貨(客人不用址地址) 我想unsetbillingfield,當客人選擇自行取貨?請問我該怎樣做?求救~ 回覆 oberon表示: 2018-04-1912:13:20 您好, 這樣的情況我通常會用javascript來處理,先去判斷運送方式的下拉選單選到哪一個,然後再是否顯示地址欄位, 邏輯類似文中「新增三聯式發票欄位」這個方式, 具體的的寫法可以參考這邊—>https://stackoverflow.com/questions/10659097/jquery-get-selected-option-from-dropdown 回覆 Amo表示: 2018-03-2818:50:35 您好: 最近又依照這篇文章修改了欄位,實在很受用,再次說聲謝謝。
想請問,該如何讓新增的欄位,在後台編輯時也可以進行修改? (目前進入訂單,進行帳單編輯時,新增的欄位無法進行編輯) 回覆 oberon表示: 2018-03-3013:01:31 可以試著參考這一篇的說明—>https://stackoverflow.com/questions/45833977/woocommerce-admin-order-edit-save-post 回覆 amo表示: 2018-03-3013:14:14 謝謝,我來研究研究~ 回覆 陳宜德表示: 2018-03-1714:26:28 oberon非常感謝你提供這麼棒的教學 小弟按照本教學[姓氏欄位修改]的方式另行在修改 運送到不同地方的姓氏欄位遇到錯誤的訊息,是否可麻煩oberon幫我看 一下是哪一段出現錯誤,在此感謝你 網址:https://guyi.tw/checkout/ //運送資訊–姓氏欄位修改 add_filter(‘woocommerce_shipping_fields’,‘custom_name_field’); functioncustom_name_field($fields){ unset($fields[‘shipping_first_name’]); $fields[‘shipping_last_name’]=array( ‘label’=>”您的大名”, ‘required’=>true, ‘class’=>array(‘form-row-wide’) ); return$fields; } 回覆 oberon表示: 2018-03-2021:35:09 不客氣,請問是遇到什麼樣的錯誤訊息?有具體的錯誤說明嗎? 回覆 David表示: 2018-03-0918:34:35 您好,很感謝您的分享獲益良多,有一個問題請教: 關於縣市鄉鎮市下拉選單,再次購買時下拉選單並沒有帶進對應鄉鎮資料, 未選縣市等依然可以成功送出訂單, 訂單成功畫面下方呈現是之前訂單的縣市資料。
我的測試 https://www.mamiselect.com/shop/ 回覆 oberon表示: 2018-03-1013:05:17 您好: 您的再次購買時指的是已經結帳完成後再跑一次購買流程嗎?我剛有測試買了兩筆,都能正常選擇下拉選單,不太明白您的狀況? 回覆 David表示: 2018-03-1020:34:26 表達得不好,就是繼續購買不用選擇縣市/區, Enter也可以送出訂單, 但是縣市鄉鎮市欄位停在‘縣市’’鄉鎮市區‘並未選擇, 不會有提出要輸入縣市/區的提示。
系統有帶入資料到縣市區欄位當中display:none, 下拉的countryindex沒有定位到。
回覆 oberon表示: 2018-03-2021:38:25 您好,還是不太明白您指的繼續購買的意思,能拍一段影片示範嗎? 回覆 harrychao表示: 2018-03-0800:25:11 這真的太完整詳細了感謝,不過想問說因為woocommerce並沒有自取這個選項,如果想在運送方式增加自取選項並可以選幾個既有的地點的話,該如何完成呢? 回覆 oberon表示: 2018-03-1012:58:36 不客氣,wc記得有自取功能,請參考截圖: 回覆 小甜甜表示: 2018-02-0516:06:46 老師您好我照您這樣修改增加了欄位 會員也填了這些欄位 請問這些欄位結果在後台訂單也會看到會員填的欄位內容嗎? 回覆 oberon表示: 2018-02-0516:10:24 您好~理論上是,如果是原本預設就有的欄位,在訂單就會看的到,如果是自行新增的欄位,除了在前台要新增外,後台的部份還需要使用hook把欄位掛進訂單的顯示資訊中,可以參考「新增欄位」的那個例子~ 回覆 Amos表示: 2018-02-0500:45:43 感謝大大,您的這篇教學真的是太美妙太功德無量了 想請問:Topic9的縣市&鄉鎮市區&郵遞區號連動功能,有沒有辦法也應用在「我的帳號」內的地址修改儲存中呢? 回覆 oberon表示: 2018-02-0511:33:27 謝謝支持啦!下拉選單應用在「我的帳號」邏輯跟結帳頁一樣,只要找到用在帳號頁的hook,以及用檢查元素找到地址欄位的ID,替換之後就可以了~ 回覆 Amos表示: 2018-02-0512:32:47 唉唉可能我資質駑鈍,半夜持續試了好幾個小時,把想得到可能要替換的hook和form.woocommerce-checkout那個地方都自己試試看了,還是搞不出來…XD 另外還有發現一個問題,由於這段代碼會偵測使用者位置自動應用在鄉鎮市和郵遞區號,假如我在我的帳號儲存的帳單地址是「106台北市大安區和平東路XX號」,而我某天是在高雄市苓雅區上網站買東西,結帳頁面預填的帳單資訊會變成「802高雄市苓雅區和平東路XX號」囧。
可能要加個判斷式若已有儲存地址就不套用偵測到的資訊,或是能否另外提供無自動偵測版本? 還是感謝oberon大無私提供如此令人驚艷的縣市/鄉鎮市/郵遞區號連動功能!若不考慮我的帳號頁面的以上問題,它在結帳頁面的表現對台灣顧客的填單體驗有大幅的提升! 回覆 oberon表示: 2018-02-0516:15:30 1、推測您可能是jQuery的selector沒有指到正確的dom元素上,如果是hook的問題可以先檢查您新增的JavaScript有沒有被正確的掛載到「我的帳號頁」。
2、無自動偵測版本可以把“detect”:function(coords){updateValue();}這段拿掉就好,可以參考他們的說明文件—>https://code.essoduke.org/twzipcode/ 3、不客氣,希望能幫到有在使用WooCommerce的朋友!^^ 回覆 Amos表示: 2018-02-0519:42:45 感謝回應 1、有關selector、dom元素、hook這些的,我可能還要研究一下Javascript和WC的原理才能明白正確的用法。
不然就只能期待大大釋出代碼供複製貼上了XD 2、把“detect”:function(coords){updateValue();}這段拿掉後確實就不會自動偵測了! 3、敬祝網站服務生意蒸蒸日上~~ herb表示: 2018-01-2323:07:18 您好,如果是未登入的新顧客,結帳時才新增帳戶的 後台可以開啟結帳時註冊的選項 在前台就會顯示一個核取的項目”建立帳號?” 但這樣不是用戶要自己再核取一次? 可不可以直接就將新建帳號的密碼欄位顯示就好?避免用戶忘了核取。
回覆 oberon表示: 2018-01-2411:01:25 已更新在第十二點裡面囉~您再試試看 https://hellowp.cc/woocommerce-custom-checkout-filed/#topic12 回覆 allen表示: 2018-01-1410:35:42 HI~ 想請教一個問題,就是當顧客選擇超商取貨付款選項時,可以同時隱藏寫地址;反之選擇郵寄或宅配時,則顯示填寫地址。
有這方面資訊可以參考?感恩! 例如:(演示:https://demo.woocloud.io/ecpay-shipping-pro/checkout/) 回覆 oberon表示: 2018-01-1511:37:50 您好! 這需要前端程式中的JavaScript來實現,邏輯是取得顧客當下的選擇方式,取得值後來判斷要顯示地址還是隱藏。
可以參考這篇裡面的方式—>https://stackoverflow.com/questions/15839169/how-to-get-value-of-selected-radio-button 或是使用jQuery也可以—>https://stackoverflow.com/questions/596351/how-can-i-know-which-radio-button-is-selected-via-jquery 回覆 Rita表示: 2018-01-1112:00:45 非常感謝您的教學分享,非常受用! 跟著您的教學說明操作,都可以達到效果,也可以透過教學真的學到簡單的修改邏輯,真的很棒 其中Topic6說到欄位的屬性增加時,我實作的時候需要再加上”,”分隔才有效果,供參考 說的地方如下(您的大名後面要再加,) $fields[‘billing_last_name’]=array( ‘label’=>”您的大名”, ‘class’=>array(‘form-row-wide’) ); 回覆 oberon表示: 2018-01-1213:07:04 抱歉遺漏了> 回覆 LIN表示: 2018-01-0722:01:30 您好 謝謝您的分享,這個分享十分受用。
我依據您的分享,做了一些修改,但遇到了一點障礙,想向您請教。
修改checkout欄位,想要達到的目標共有兩個 1.conditionalfields 2.後臺能夠對customfield的部分做編輯 遇到的問題 請問是否有方法插入radiobutton的conditionalfield在shippinginformation的部分,目前試了一下,但發現他沒辦法動@@ 目前的程式碼如下 //修改checkoutshippingfield add_action(‘woocommerce_before_checkout_shipping_form’,‘add_shipping_type’); functionadd_shipping_type($checkout){ woocommerce_form_field(‘shipping_type’,array( ‘type’=>‘radio’, ‘class’=>array(‘form-row-wide’), ‘label’=>‘收件方式’, ‘options’=>array( ‘shipping_1’ =>‘全家店到店’, ‘shipping_2’ =>‘指定地址’, ‘shipping_3’=>‘自行取貨’, ) ),$checkout->get_value(‘shipping_type’)); } add_filter(‘woocommerce_shipping_fields’,‘custom_name_field_2’); functioncustom_name_field_2($fields){ $fields[‘shipping_first_name’]=array( ‘label’=>”取件者*” ); $fields[‘shipping_last_name’]=array( ‘label’=>”手機號碼*” ); $fields[‘shipping_company’]=array( ‘label’=>”店名*” ); $fields[‘shipping_city’]=array( ‘label’=>”服務編號*” ); $fields[‘shipping_address_1’]=array( ‘label’=>”收件地址*” ); $fields[‘shipping_address_2’]=array( ‘label’=>”預計來訪時間*” ); return$fields; } add_filter(‘woocommerce_shipping_fields’,‘remove_shipping_company’); functionremove_shipping_company($fields){ unset($fields[‘shipping_country’]); unset($fields[‘shipping_state’]); return$fields; } add_filter(“woocommerce_shipping_fields”,“shipping_container”); functionshipping_container(){ $output=‘ label.radio{display:inline-block;margin-right:1rem;} var$=jQuery.noConflict(); $(document).ready(function(){ $(“input[name=invoice_type]”).on(“change”,function(){ if($(“#shipping_type_shipping_1”).is(“:checked”)){ $(“#shipping_first_name_field,#shipping_last_name_field,#shipping_city_field,#shipping_company_field”).fadeIn(); }else{ $(“##shipping_first_name_field,#shipping_last_name_field,#shipping_city_field,#shipping_company_field”).fadeOut(); } if($(“#shipping_type_shipping_2”).is(“:checked”)){ $(“#shipping_postcode_field,#shipping_address_1_field”).fadeIn(); }else{ $(“#shipping_postcode_field,#shipping_address_1_field”).fadeOut(); } if($(“#shipping_type_shipping_3”).is(“:checked”)){ $(“#shipping_address_2_field”).fadeIn(); }else{ $(“#shipping_address_2_field”).fadeOut(); } }) }); ‘; echo$output; } 期待您的回覆及幫助 謝謝您 LIN 回覆 oberon表示: 2018-01-0810:44:03 您好! 先看看Console裡面有沒有出錯,有Demo網址嗎?有的話我可以幫你看一下~ 回覆 LIN表示: 2018-01-0811:05:58 您好 感謝您的回覆 以下是網址 https://www.tgeea.org.tw/checkout/ 目前遇到的難題是 1.左邊的收據選單在網頁載入時會把所有用javascript隱藏的表格顯示出來,但radiobutton點選後,可以正常運作 2.右邊的shippingfield,用javascript隱藏後,點選radiobutton,但表格跑不出來 有需要的話,我也可以私訊後台帳密給您 期待您的回覆 LIN 回覆 oberon表示: 2018-01-0812:05:41 1、用css先把隱藏的表格藏起來,大概是這樣寫—>#company_name_1_field,#company_name_2_field,#company_name_3_field{display:none;} 2、shippingfield我從程式碼裡面看就只有收件地址跟備註欄位而已,沒看到有什麼表格,是有少東西嗎? 回覆 LIN表示: 2018-01-0812:10:42 我把shippingfield中的corefield改名字 然後想用如同invoice一樣的方法來達到conditionalfields的目標 但是,javascript在前台完全跑不出東西 oberon表示: 2018-01-0910:51:10 這可能要幫你完整檢查一下PHP了,我們有提供程式檢修服務,以時薪計價,有需要的話可以跟我們說! MG表示: 2017-10-2518:32:34 運送地址這部份真的幫了大忙! 非常感謝! 另外不好意思想請教一下! 若我想在結帳時檢查某種類商品的個數是不是10的倍數並提醒的話,請問這有辦法可以做到嗎? 回覆 oberon表示: 2017-10-2522:20:06 不客氣! 判斷商品個數是不是10的倍數要用javascript額外寫條件來判斷了,基本邏輯就是當改變個數的input時,去取得目前的數字然後除以十,if沒有餘數的話再執行你要的動作。
回覆 努力向上的新手表示: 2017-09-2018:59:13 版大您好!我要安裝SublimeText3的時候在第16步驟的FTP路徑不知道要填什麼?我使用的是虛擬主機,請問我該如何查我的FTP路徑? 回覆 oberon表示: 2017-09-2110:59:04 你好! 通常虛擬主機你在申請繳費完成後,都會提供給你一封主機開通信,裡面會有登入主機管理後台的帳號密碼跟FTP資訊,你可能要翻一下你的信箱,或是寫信去問客服看他們有沒有提供FTP。
回覆 Ian表示: 2017-08-2203:04:12 您好, 在”我的帳號”(/my-account/edit-account/)中,要輸入名字與姓氏欄位,也就是first_name與last_name,以中文來看位置是要相反的,在新註冊帳號中,要新增帳戶詳細資料時,發現這個問題。
請問要在哪裡進行修改呢?感激不盡。
謝謝您。
回覆 Ian表示: 2017-08-2203:05:44 不好意思,補上一張示意圖https://goo.gl/p2C8nF 回覆 oberon表示: 2017-08-2215:39:26 你好! 理論上一樣是改變欄位順序後然後把function掛到這個woocommerce_edit_account_form衣架上面去,但沒實際寫過,你可能要試試看~ 回覆 Ian表示: 2017-08-2323:41:39 感謝回覆,我再試試看。
謝謝您。
回覆 AMO表示: 2017-08-1812:29:13 請問,關於發票捐贈,該如何規劃呢? 想法是: 1.於結帳頁面中帳單資訊區塊增加一組單選按鈕,分別為——–“捐贈發票至XXX”,”不捐贈發票” 2.點選-“捐贈發票至XXX”,則繼續動作 3.點選-“不捐贈發票”,則顯示”公司抬頭”與”統一編號”欄位 回覆 oberon表示: 2017-08-1821:52:45 你好: 邏輯是先新增自訂欄位是否捐贈發票的單選方塊,然後再增加一個來文字欄位來放統一編號,最後用js來判斷是否顯示公司抬頭與統一編號,這個滿實用的,我找時間來補上~ 回覆 oberon表示: 2017-08-2822:02:01 已將發票欄位實作在文章中,你再試試看合不合用! https://hellowp.cc/woocommerce-custom-checkout-filed/#topic11 回覆 AMO表示: 2017-08-2900:42:04 謝謝,真是太棒了! 回覆 nick表示: 2017-08-1214:00:38 請教一下@@ 按照教學貼入這段文字後 echo”style=’color:red;’>今天結帳享有66折優惠喔~”; 結果只出現了 黑色文字的style=’color:red;’>今天結帳享有66折優惠喔~ 請問有其他寫法,或者是我哪個步驟遺漏了呢@@ – 感謝版主撰寫這篇,讓初學者對於基本概念有進一步的了解~感謝` 回覆 oberon表示: 2017-08-1414:31:14 抱歉,我程式寫錯了,應該是要 echo“
回覆 Robert表示: 2017-08-1418:07:47 會把這部分完整嗎?^^ 回覆 oberon表示: 2017-08-1511:46:43 不知道ㄟ,要看緣份了,哈! 回覆 Robert表示: 2017-08-1511:49:39 如果可以完成就太完美了!還是感謝您的分享 jerryli表示: 2017-08-1017:26:10 忘了附上網站 http://ifuturetw.com/ 請大神救救我啊 回覆 oberon表示: 2017-08-1017:56:25 理解了,一般情況下點圖片是會連結商品頁沒錯,但從程式碼看商品圖並未有商品頁的連結,反而是有一些加入暫存清單、商品比較相關的按鈕,看能否把相關外掛先停用看看,另外也可以找看看這套主題內是否有相關的設定項。
回覆 jerryli表示: 2017-08-1109:15:19 Hellooberon~先感謝您撥空看我的網站回復我的留言~!! 主題的部份是MetroStore是跟wooCommerce有連動的主題 裡面並沒有相關的設定選項可以選擇~找了很久@@ 有試著到主題的functions.php去尋找相關程式碼~可是功力太淺了 ~”~ PS.外掛wooCommerce如果停掉的話~就沒有購物車功能了@@ 回覆 oberon表示: 2017-08-1110:30:33 1、停用我指的是WooCommerce週邊的外掛,像是addwishlist、compareproduct之類的,因為我看到程式裡面有相關的字眼,推測說是不是這些外掛造成的問題。
2、你的產品列表頁裡面的商品圖是可以正常連到內容頁,所以應該是這個主題它有客製化過商品列表而造成無法直接點圖片進內容頁,可以試著跟主題開發商反應看看,不然就是要請人幫忙改寫了。
回覆 jerryli表示: 2017-08-1416:39:55 謝謝您的幫忙~ 最後改用另外一個主題來建置了~原主題找時間在來改寫看看吧~!! JERRYLI表示: 2017-08-1017:24:48 oberon你好: 目前在woocommerce碰到了一點問題 就是在網站首頁放置商店後發現了很不人性化的操作 商品展示圖片將滑鼠移置上方後會跳出【加入購物車】 有試過打開目錄模式~但實際上是希望 可以直接點擊商品圖片後進到商品介紹的頁面~ 新手上路搞了好久~>”< 不知道有沒有辦法解決這個問題….. 回覆 oberon表示: 2017-08-1017:28:12 HelloJerry~ 請問有網址嗎?不太明白字面上的意思,可能看到網站比較能理解… 回覆 ivan表示: 2017-08-0709:43:55 這篇太棒了!大推很實用! 再請教文中,”下拉選單帶入郵遞區號、縣市”,運送地址的部份要怎麼能使用一樣的功能? 回覆 oberon表示: 2017-08-0710:46:35 感謝大推啊:D 運送地址我沒寫,我再找時間補上Orz 回覆 oberon表示: 2017-08-1017:57:27 運送地址的部份補上了,你再看看能否使用~ 回覆 ivan表示: 2017-08-1018:16:40 太棒了! 回覆 Zpppdog表示: 2017-07-2719:53:22 好好睡三天三夜吧。
呵。
回覆 oberon表示: 2017-07-2719:58:34 三天三夜的時間可以再寫另外一篇了XD 回覆 oberon表示: 2017-07-2714:35:54 花了一個多禮拜的時間終於整理完了,先幫自己推一下!XD 回覆 發佈留言取消回覆發佈留言必須填寫的電子郵件地址不會公開。
必填欄位標示為*留言顯示名稱* 電子郵件地址* 個人網站網址 Notifymeviae-mailifanyoneanswersmycomment. 用電子郵件通知我後續的迴響。
新文章使用電子郵件通知我。
Δ 這個網站採用Akismet服務減少垃圾留言。
進一步了解Akismet如何處理網站訪客的留言資料。
WordPress教學 2018/06/17WordPress網站管理神器–Plesk教學 2017/12/01如何將FBMessengerCustomerChatPlugin加入WordPress網站 2017/11/09WordPress文章下方增加LINESocialPlugins 2017/09/15WordPress佈景主題CSS客製化(陸續新增) 2017/08/11WordPress藝廊燈箱效果 2017/07/27WooCommerce結帳欄位客製大全(陸續新增) 2017/07/17WordPress圖片遮罩顯示內容 2017/06/23使用WordPress架站,打造專屬你的餐廳網站(一)架站前置作業 2017/06/23使用WordPress架站,打造專屬你的餐廳網站(二)網站基本設定 2017/06/22使用WordPress架站,打造專屬你的餐廳網站(三)建立網站內容 服務介紹 WordPress版型 WordPress教學 聯絡我們 ©2022Hellowp.Allrightsreserved.聯絡信箱:[email protected]
延伸文章資訊
- 1WooCommerce 調整結帳欄位-Flexible Checkout Fields外掛教學
等等,可以在這裡選擇你想要的格式;如果買家輸入的資訊不符合,網頁上就會出現錯誤訊息,請買家重新填寫。 這邊提供了一些常用的資料格式驗證,如果想要有其他更多的格式 ...
- 2php - woocommerce自訂- woocommerce請填寫地址進行下一步
php - woocommerce自訂- woocommerce請填寫地址進行下一步. woocommerce更改結算和購物車頁面的價格(2).
- 3WooCommerce 必要欄位問題I | 信長の野望
在安裝完WordPress及WooCommerce後, 常會出現下圖之必填欄位, 特別是州(State)在中文地址裡會讓人不知該怎麼填。爬文了很久, 才發現網路上有些文章寫的位置根本新版 ...
- 4WooCommerce 結帳欄位客製大全(陸續新增) | Hellowp
另外記得要注意的地方,billing_country 這欄位一定要存在,不然會發生資料驗證無法通過的情況,不存在它會一直跳出「請填寫地址進行下一步」的錯誤 ...
- 5php - woocommerce請填寫地址進行下一步 - Code Examples
php - woocommerce請填寫地址進行下一步- woocommerce運送到不同的地址 ... 我一直在研究和調整我的自定義WordPress主題,並重寫WooCommerce模板,現...