# 商品頁配置
*****
## 1,去掉sidebar,fullwidth全寬度顯示
我這個小冊子展示的都是簡單直接的方法,不是標準方法,但是能夠展示意思和原理第一。
方法:直接在single-product.php 模板文件 添加css:
```
<style>
.left-sidebar .content-area {
? ? width: 93.9130434783%;
}
</style>
```
*****
*****
## 2,Swatches選項功能

推薦2個插件:
https://cn.wordpress.org/plugins/woo-tools/#description (推薦)
https://wordpress.org/plugins/woo-variation-swatches (如上)
https://www.wpdaxue.com/woocommerce-variation-swatches-plugins.html
后臺配置屬性的圖片/ 顏色 ,就可以在頁面swatches作為選項:

*****
*****
## 3,強化評論功能[Photo reviews]

推薦插件: [Photo Reviews for WooCommerce – WordPress plugin | WordPress.org](https://wordpress.org/plugins/woo-photo-reviews/)
*****
*****
## 4,立即購買按鈕 buy now , Quick add to cart / checkout
首頁可以先學習一下原理,參考 [ (kinsta.com)](https://kinsta.com/blog/woocommerce-checkout/)
```
To create and add a direct checkout link in WooCommerce, you can use the following
簡單商品URL:?exampledomain.com//checkout/?add-to-cart=ID.
帶變體商品URL:?https://woocommerce.liang/index.php/checkout/?add-to-cart=191&variation_id=193
```
推薦插件簡單實現增加立即購買按鈕功能,代碼簡單可以參考:[Buy Now Button for WooCommerce – WordPress plugin | WordPress.org](https://wordpress.org/plugins/buy-now-button-for-woocommerce/)
*****
*****
## 5,Add to wish 、心愿單 (Wishlist)
以上安裝的插件已經帶有這個功能,可以參考利用:
https://cn.wordpress.org/plugins/woo-tools/#description (推薦)
*****
*****
## 6,最近瀏覽 (Recently Viewed)

系統自帶有這個功能,可以參考:[WooCommerce: Recently Viewed Products (Shortcode) (businessbloomer.com)](https://www.businessbloomer.com/woocommerce-recently-viewed-products-shortcode/)
`$_COOKIE['woocommerce_recently_viewed']` // 主要是利用這個
*****
*****
*****
## 7,捆綁商品,give away, gift:
無法單獨售賣的捆綁商品,和主商品捆綁銷售。自動加入購物車,免費。
TODO
*****
*****
*****
## 8,產品頁促銷 (Cross Selling / upselling)
管理后臺可以設置:

*****
*****
*****
## 9,【豐富的編輯器內容模板】Amazon A+ Content Templates


方法: 動態修改 后臺編輯器初始化模板樣式,參考:[wordpress進階教程(三十八):wordpress后臺編輯器分區域編輯 | wordpress主題定制-阿樹工作室 (ashuwp.com)](https://www.ashuwp.com/courses/highgrade/601.html)
*****
*****
*****
## 10,【商品描述功能頁】 Adding a custom tab to the product page
參考插件: [WooCommerce Custom Product Tabs Lite – WordPress plugin | WordPress.org](https://wordpress.org/plugins/woocommerce-custom-product-tabs-lite/)

*****
*****
*****
## 11,社交分享功能
Jetpack 插件自帶
*****
*****
*****
## 12,SEO 結構化數據
具體內容參考: [ (google.com)](https://developers.google.com/search/docs/advanced/structured-data/product)
*****
*****
*****
## 13,怎樣做 Magento 的 configurable product
Configurable product 對應 就是 woocommerce 的 Variable product , 它們的不同在于,variable product 不分 獨立的sku,不分獨立的庫存管理。
但是,現在的woocommerce 的variable product 也可以 獨立 管理庫存和sku管理,所以用. variable product 代替就可以。
