Kiwi在設(shè)計(jì)網(wǎng)站時(shí)一般都推薦客戶采用woocommerce自帶的Product 模板來(lái)發(fā)布產(chǎn)品，它具有固定的格式，并且界面很好看，也符合SEO的設(shè)計(jì)規(guī)則，哪怕是新手只需要按照教程按部就班的填寫產(chǎn)品信息，一樣可以做出漂亮的產(chǎn)品頁(yè)面。此外，由于其具有開(kāi)源性，你也可以通過(guò)添加某些插件，給你的產(chǎn)品頁(yè)面增加一些額外的功能。
一、什么是WooCommerce？
WooCommerce是一款WordPress網(wǎng)站的電子商務(wù)插件，也可以理解為是WordPress網(wǎng)站的電子商務(wù)系統(tǒng)。WordPress網(wǎng)站安裝WooCommerce后，可以使用戶能夠在網(wǎng)站上創(chuàng)建和管理在線商店。它的主要功能包括產(chǎn)品發(fā)布、庫(kù)存管理、線上支付收款、運(yùn)輸發(fā)貨、產(chǎn)品數(shù)據(jù)分析、營(yíng)銷等等一系列完整的電子商務(wù)功能。
二、安裝Woocommerce及相關(guān)插件
Woocommerce是一個(gè)開(kāi)源插件，任何Wordpress主題都可以下載這個(gè)插件。這個(gè)插件本身是用于電商網(wǎng)站的，這里我們用在外貿(mào)B2B網(wǎng)站上面還需要加一些功能，所以需要同時(shí)下載Woocommerce及功能補(bǔ)充插件。插件如下：
- WooCommerce
- Custom Product Tabs for WooCommerce
1、安裝WooCommerce
進(jìn)入WordPress網(wǎng)站后臺(tái)點(diǎn)擊安裝新插件,在搜索框輸入關(guān)鍵字WooCommerce，然后點(diǎn)擊立即安裝，安裝后點(diǎn)擊啟用插件。
首次安裝需要對(duì)WooCommerce進(jìn)行設(shè)置，點(diǎn)擊設(shè)置我的商店。
接下來(lái)，依次填寫你的商店名稱、行業(yè)、地址和郵箱，勾選加入，最后點(diǎn)繼續(xù)。
根據(jù)你的個(gè)人偏好和需求選擇是否需要安裝如下插件，然后點(diǎn)擊繼續(xù)。
來(lái)到如下頁(yè)面后，如果你是B2C網(wǎng)站，跟著向?qū)崾局鹨辉O(shè)置完成就行。如果你是B2B網(wǎng)站，那么可以直接忽略這個(gè)設(shè)置步驟。
2、安裝Custom Product Tabs for WooCommerce
Custom Product Tabs for WooCommerce是一款補(bǔ)充產(chǎn)品Tab的插件。Woocommerce默認(rèn)的產(chǎn)品Tab只有一個(gè)，如果我們想多加幾個(gè)產(chǎn)品參數(shù)，那就不夠了。要么我們就需要把所有的產(chǎn)品參數(shù)都放到一個(gè)tab里面，那樣又會(huì)造成頁(yè)面過(guò)長(zhǎng)。綜合考慮，我們需要Custom Product Tabs for WooCommerce這樣一款增加產(chǎn)品Tab的插件。
一般Kiwi建的外貿(mào)網(wǎng)站已經(jīng)默認(rèn)配置好了這兩個(gè)插件，如果你在發(fā)布產(chǎn)品時(shí)候發(fā)下無(wú)法找到相關(guān)功能，可以在網(wǎng)站后臺(tái)的插件市場(chǎng)搜索安裝并激活這2個(gè)插件就好了。
注意：兩個(gè)插件都要安裝并激活才行： woocommerce 和 Custom Product Tabs for WooCommerce。
三、發(fā)布產(chǎn)品
插件安裝成功之后，我們可以在網(wǎng)站后臺(tái)找到Product的菜單，然后點(diǎn)擊，這樣就進(jìn)入到你的產(chǎn)品頁(yè)了，你所有的產(chǎn)品都在這里。你可以選擇對(duì)某項(xiàng)產(chǎn)品進(jìn)行編輯，也可以選擇發(fā)布添加新產(chǎn)品。發(fā)布新產(chǎn)品點(diǎn)擊Add Products就可以，左側(cè)欄和產(chǎn)品上面都有，看下圖標(biāo)示。
1、產(chǎn)品發(fā)布界面第一版
點(diǎn)擊Add new product，然后你會(huì)看到產(chǎn)品發(fā)布界面的第一個(gè)版面，這里包括產(chǎn)品名稱，產(chǎn)品tab1（一般放主要參數(shù)），產(chǎn)品目錄。
產(chǎn)品名稱盡量精簡(jiǎn)，不要發(fā)重復(fù)的產(chǎn)品，一般產(chǎn)品關(guān)鍵字加上性能就可以了，不需要像阿里那樣加那么多花里胡哨的形容詞。
產(chǎn)品tab1，這里放產(chǎn)品的主要參數(shù)，你發(fā)的內(nèi)容會(huì)出現(xiàn)在產(chǎn)品頁(yè)面的這個(gè)位置。
產(chǎn)品分類，你的產(chǎn)品屬于什么分類，就直接在右邊分類欄勾選即可。
2、產(chǎn)品發(fā)布界面第二版
第二版則包括產(chǎn)品的簡(jiǎn)要描述，產(chǎn)品tags和產(chǎn)品圖片。
3、產(chǎn)品發(fā)布界面第三版
產(chǎn)品發(fā)布界面第三版包括兩個(gè)部分，Inventory和Custom Tabs，Inventory是放產(chǎn)品型號(hào)的地方，custom tabs則是增加產(chǎn)品Tabs的地方。這個(gè)Custom Tabs就是由Custom Product Tabs for WooCommerce這個(gè)插件帶來(lái)的功能，沒(méi)裝這個(gè)插件這個(gè)功能是沒(méi)有的。
產(chǎn)品發(fā)布完成之后，下面會(huì)自動(dòng)出現(xiàn)一欄Related Products，會(huì)把統(tǒng)一分類下面的產(chǎn)品顯示在這里。這也是我覺(jué)得Woocommerce的產(chǎn)品適合SEO優(yōu)化的地方。如果跟很多人一樣用Portfolio去發(fā)布產(chǎn)品，這一塊就需要人為去設(shè)置，而且界面還不美觀。
四、產(chǎn)品基礎(chǔ)SEO優(yōu)化
產(chǎn)品內(nèi)容發(fā)布之后，為了讓我們的產(chǎn)品可用在谷歌上獲得排名，我們需要對(duì)產(chǎn)品頁(yè)面進(jìn)行一個(gè)基礎(chǔ)的SEO設(shè)置，也就是對(duì)該文章頁(yè)面TDK進(jìn)行設(shè)置。這個(gè)TDK是需要整站設(shè)置的，具體可看這篇教程：如何給外貿(mào)B2B網(wǎng)站寫網(wǎng)頁(yè)三要素？
我們把產(chǎn)品頁(yè)面拉到最底部，有一個(gè)[Yoast SEO]設(shè)置區(qū)，點(diǎn)擊右側(cè)的下拉符號(hào)，就可以看到基礎(chǔ)SEO設(shè)置的地方。
- 基礎(chǔ)SEO設(shè)置包括三個(gè)部分：關(guān)鍵詞，SEO標(biāo)題和描述
- 關(guān)鍵詞：就是你要用這個(gè)產(chǎn)品排名的關(guān)鍵詞
- SEO 標(biāo)題：就是你要給搜索引擎收錄的產(chǎn)品標(biāo)題，這個(gè)可以是跟產(chǎn)品標(biāo)題一樣，也可以是不一樣。如果標(biāo)題寫得好，一般就直接是標(biāo)題就行，如果標(biāo)題意思不全，就會(huì)再加上一句話。
- 描述：相當(dāng)于是這個(gè)產(chǎn)品的一兩句話的總結(jié)語(yǔ)，快速告訴讀者你個(gè)產(chǎn)品的特性
五、網(wǎng)站前臺(tái)設(shè)置產(chǎn)品總頁(yè)面
如果想要在網(wǎng)站前臺(tái)設(shè)置一個(gè)頁(yè)面來(lái)展示所有產(chǎn)品，可以通過(guò)以下兩種方法來(lái)實(shí)現(xiàn)：
1、將shop頁(yè)面鏈接添加到導(dǎo)航菜單
安裝WooCommerce后會(huì)自動(dòng)生成一個(gè)商品頁(yè)面，將商品頁(yè)面的鏈接復(fù)制。
如下圖所示：點(diǎn)擊外觀下的菜單>>選擇主菜單>>點(diǎn)擊自定義鏈接，輸入復(fù)制的商品頁(yè)面鏈接和顯示在前臺(tái)產(chǎn)品頁(yè)面的名稱，然后點(diǎn)擊添加至菜單，可以拖拽調(diào)整頁(yè)面顯示的順序，最后點(diǎn)擊保存菜單。
2、WooCommerce設(shè)置前臺(tái)產(chǎn)品頁(yè)面
點(diǎn)擊WooCommerce設(shè)置，選擇剛剛創(chuàng)建的Product作為商店頁(yè)面保存即可。
六、產(chǎn)品頁(yè)面補(bǔ)充功能
有時(shí)候我們也需要弄一些補(bǔ)充功能，以滿足我們個(gè)人對(duì)產(chǎn)品頁(yè)面的需求。這里Kiwi把客戶常用到的一些功能列舉到這里，有需要的小伙伴可以自行選擇。
1、添加彈出表單按鈕功能
有的小伙伴喜歡在產(chǎn)品圖片的右邊加入一個(gè)詢盤按鈕，可以讓客戶很方便的找到發(fā)詢盤的地方，如下圖所示。
由于自帶的woocommerce的產(chǎn)品模板是沒(méi)有這個(gè)功能的，我們需要添加這個(gè)功能就需要添加代碼。這里我把代碼復(fù)制在下面，有需要的小伙伴直接復(fù)制即可：
[fusion_button link=”” text_transform=”none” title=”” target=”_self” link_attributes=”” alignment=”left” modal=”inquiry” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” color=”default” button_gradient_top_color=”” button_gradient_bottom_color=”” button_gradient_top_color_hover=”” button_gradient_bottom_color_hover=”” accent_color=”” accent_hover_color=”” type=”” bevel_color=”” border_width=”” size=”” stretch=”default” shape=”” icon=”” icon_position=”left” icon_divider=”no” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]Inquiry Now[/fusion_button][fusion_modal name=”inquiry” title=”Your inquiry will be replied in 24 hours” size=”large” background=”” border_color=”” show_footer=”yes” class=”” id=””][contact-form-7 id=”99″ title=”Contact us”][/fusion_modal]
這里注意下，你需要把代碼里面的表單代碼[contact-form-7 id=”99″ title=”Contact us”]換成你自己的表單代碼，要不然可能表單就不能用了。
2、視頻彈出功能
你也可以在產(chǎn)品圖片的右側(cè)加一個(gè)視頻彈出功能，這樣客戶想要看下這個(gè)產(chǎn)品的視頻的時(shí)候，就可以點(diǎn)擊觀看了。
具體代碼如下：
[fusion_modal_text_link name=”video” class=”” id=””] 這里插入產(chǎn)品圖[/fusion_modal_text_link][fusion_modal name=”video” title=”Watch our video here ” size=”large” background=”” border_color=”” show_footer=”yes” class=”” id=””] 這里插入視頻[/fusion_modal]
3、插入頁(yè)面banner圖片
正常情況下，產(chǎn)品頁(yè)面是沒(méi)有banner的，但是如果你想要給這個(gè)頁(yè)面加一個(gè)banner，也可以加。我們把產(chǎn)品后臺(tái)拉到最底部，找到Page Title Bar, 我們要添加的banner就在這里。按照如下圖所示的設(shè)置對(duì)自己的page title bar進(jìn)行設(shè)置。
4、圖片熱點(diǎn)功能
對(duì)于像機(jī)械產(chǎn)品這樣有點(diǎn)復(fù)雜的產(chǎn)品，有時(shí)候就會(huì)需要熱點(diǎn)圖片去講解局部的功能。這里只需要在你想要展示功能的地方加上熱點(diǎn)圖片的代碼即可。Kiwi一般建議把代碼放在product tab1這個(gè)位置，這里位置大，比較好展示。
至于如何使用熱點(diǎn)圖片功能，可以參考這篇教程：[Avada網(wǎng)站如何使用熱點(diǎn)圖片（Image Hotspot) 功能？]
好了，利用Woocommerce插件給外貿(mào)B2B網(wǎng)站發(fā)產(chǎn)品這篇教程就寫到這里，對(duì)于外貿(mào)B2B網(wǎng)站來(lái)說(shuō)，這些功能就夠了，太復(fù)雜了也不太好。Woocommerce產(chǎn)品界面很友好，操作又簡(jiǎn)單，再次建議外貿(mào)小伙伴可以嘗試下這個(gè)功能。
七、WooCommerce產(chǎn)品管理常見(jiàn)問(wèn)題解答
以下是很多外貿(mào)朋友在使用Woocommerce發(fā)布產(chǎn)品時(shí)遇到的一些問(wèn)題：
1、如何關(guān)閉產(chǎn)品頁(yè)面評(píng)論功能？
在WooCommerce 的設(shè)置中找到Reviews設(shè)置區(qū)塊，然后取消選中“啟用產(chǎn)品評(píng)論”即可。
2、如何管理產(chǎn)品分類
在產(chǎn)品>>分類的設(shè)置中，可以新增和刪除產(chǎn)品分類，也可以修改產(chǎn)品分類的名稱。
3、上傳到網(wǎng)站上的圖片很模糊怎么辦？
上傳到網(wǎng)站上的圖片很模糊，大概率是圖片的尺寸沒(méi)有選擇正確，在上傳圖片時(shí)，要注意媒體庫(kù)右下角的圖片尺寸要選擇全尺寸，選擇小尺寸或縮略圖就會(huì)導(dǎo)致上傳的圖片很模糊。
八、總結(jié)
Woocommerce 是目前Kiwi發(fā)現(xiàn)最適合發(fā)布產(chǎn)品的一個(gè)插件，它的功能完善，界面美觀，最重要的是操作簡(jiǎn)單，新手也能分分鐘學(xué)會(huì)操作。曾經(jīng)有個(gè)小伙伴找人建了網(wǎng)站之后，對(duì)方就是用Portfolio發(fā)的產(chǎn)品，她拿到產(chǎn)品之后根本不會(huì)發(fā)，她的產(chǎn)品又多，后來(lái)弄得談起打理網(wǎng)站都有心理陰影了。換成Woocommerce之后就徹底解決了外貿(mào)B2B網(wǎng)站發(fā)產(chǎn)品難的問(wèn)題。
