wordpress建站教程：woocommerce調用自定義屬性的方法

繼續分享wordpress建站教程。之前遇到一個wordpress外貿建站需求，客戶需要給網站添加一個manufaturer制作商頁面，參考的樣式比較復雜我沒做出來，不過想到了一個簡單的低配版本，還湊合使用，這里記錄一下實現過程。

步驟一：添加屬性

進入wordpress建站后臺，打開產品-屬性，添加新屬性，填寫名稱，然后【啟用歸檔】。

接下來點開添加的【Manufaturer】屬性，然后添加一些子項目。

最后我們還需要添加一些產品，并添加【Manufaturer】屬性，指定對應的子項目。

步驟二：安裝Product Attributes Shortcode插件

接下來我們需要用到一個產品屬性短代碼插件Product Attributes Shortcode。

插件可以在wordpress建站后臺搜索安裝，也可以通過下面鏈接下載安裝。

Product Attributes Shortcode

https://wordpress.org/plugins/wcpas-product-attributes-shortcode/

Product Attributes Shortcode插件安裝后我們可以通過下面的兩個短代碼來調用，第一個只調用屬性，第二個可以額外顯示項目個數。

[wcpas_product_attributes attribute="X"]

[wcpas_product_attributes attribute="X" archive_links="0" show_counts="1"]

注意：X為屬性名稱的slug別名，你換為你自己的就可以了。

步驟三：調用屬性

接下來我們需要新建一個頁面，可以使用古騰堡編輯器，也可以使用Elementor等編輯器， 制作好頁面內容，然后添加一個短代碼模塊，填寫上面的短代碼即可，比如我們添加的是【Manufaturer】屬性，那么在attribute后面填寫manufaturer即可。

[wcpas_product_attributes attribute="manufaturer" archive_links="0" show_counts="1"]

默認情況下調用的屬性值是豎著排列的，這樣太占空間，我們可以通過下面的CSS來修改為橫向排列。

.wcpas-product-attributes li {
    line-height: var(--porto-body-lh);
    display: inline-block;
    padding: 0;
}
ul {
    padding: 0;
}

.wcpas-product-attributes a {
    margin-left: 10px;
    color: #444;
    font-size: 18px
}

CSS代碼可以添加到網站自定義-額外CSS中。

最終添加的效果如上圖所示。當我們的產品中添加了其它Manufaturer子屬性時，這里會自動更新。