My Site — Stay Hungry, Stay Foolish.

Just Keep Finding What I Love.

安裝 WordPress 購物商城外掛–WooCommerce

Posted by Jackey on 2013/12/20

WordPress實在是一個簡單實用的部落格架站軟體外,也提供了不少方便的外掛。最近有朋友想利用網頁提供商品說明,就找了幾個 WordPress 上 eCommerce 相關的外掛,最後選定 WooCommerce。

目前還沒完全熟悉它的功能,以下先簡單介紹一下的安裝及設定過程。

1. 首先,於 WordPress 的[控制台] –> [外掛] –> [安裝外掛] 中,搜尋 「woocommerce」

image

2. 從搜尋結果中找到到名稱為 「WooCommerce – excelling eCommerce」的外掛,點選[立刻安裝]。

image

3.系統自動完成安裝完成後。再點選[啟用外掛],將 WooCommerce 啟用

image

4.啟用後,控制台的清單中會增加 WooCommerce 的選項,及相關提示。

image

於提示中點選 [Install WooCommerce Pages],讓系統自動安裝 WooCommerce 需要的一些頁面設定。

image

5.出現如下的提示,表示已經完成 WooCommerce 的基本安裝。

此後可開始做您的”購物商城” 設定。由於目前我還沒規劃”購物商城”的架構內容,所以先做幾個簡單設定。先由此畫面點選 [設定]。

image

6. 進入設定畫面,可先將 所在地區(Base Location) 及 幣別 (Currency) 變更為 “台灣”及”Taiwan New Dollars (NT$)。其他部分先不動。再點選 [儲存修改]。

image

image

7. 以上就完成 WooCommerce 的基本架設。再看一下網頁有哪些變化。可以看到原先功能欄中多了”Shop”、”帳號設定”、”結帳”及”購物車”這幾個功能。

image

8. 點進去看一下頁面,下面三個頁面分別是 Shop、帳號設定及購物車頁面。

你可能會發現,”Shop”這個功能頁面有”走經”(台語)的現象。若有發生此現象,表示所選擇的佈景(theme)與 WooCommerce 有些不合。其實 WooCommerce 已經有提示可能會有這個問題;讓我們回到控制台。

image

image

image

9. 你會發現控制台的頁面中可能還有下面這個提示,指示若佈景發生問題,可以點選 [Theme Intergration Guide]。

image

10.點選後會將頁面導到 WooCommerce 網站的說明,如下。

image

image

image

簡單說就是要在佈景中新增個 “woocommerce.php”的檔案,檔案的內容是將 “page.php”的內容稍加修改。

11. 下面就簡單說明修改內容:在控制台中點選 [外觀] –> [主題編輯器],於選擇程式清單中點選 [頁面模板 (page.php)]。

image

image

12. 建立一個新的 woocommerce.php的檔案,將page.php的內容貼到 woocommerce.php 中。

然後修改  woocommerce.php 的內容。將有 have_posts() 的迴圈程式,改為 woocommerce_content()。

我使用的佈景是:

將  <?php while ( have_posts() ) : the_post(); ?><?php endwhile; // end of the loop. ?> 的程式碼,改為 <?php woocommerce_content(); ?>

參考下面畫面:

修改前 (原 page.php 內容)

image

修改後 woocommerce.php

image

13. 然後再將 woocommerce.php 上傳到佈景程式的位置,通常是:你的wordpress網站/wp-content/themes/你的佈景目錄/woocommerce.php.

檔案上傳後,就可以在控制台的 [外觀] –> [主題編輯器]的清單中看到 woocommerce.php。

image

image

14.再回到網站查看。 Shop 的頁面正常了。

image

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *