Posted on

独立站配置起来-商品页

商品页配置


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



4,立即购买按钮 buy now , Quick add to cart / checkout

首页可以先学习一下原理,参考 (kinsta.com)

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



5,Add to wish 、心愿单 (Wishlist)

以上安装的插件已经带有这个功能,可以参考利用:
https://cn.wordpress.org/plugins/woo-tools/#description (推荐)



6,最近浏览 (Recently Viewed)


系统自带有这个功能,可以参考:WooCommerce: Recently Viewed Products (Shortcode) (businessbloomer.com)
$_COOKIE['woocommerce_recently_viewed'] // 主要是利用这个




7,捆绑商品,give away, gift:

无法单独售卖的捆绑商品,和主商品捆绑销售。自动加入购物车,免费。
TODO




8,产品页促销 (Cross Selling / upselling)

管理后台可以设置:




9,【丰富的编辑器内容模板】Amazon A+ Content Templates



方法: 动态修改 后台编辑器初始化模板样式,参考:wordpress进阶教程(三十八):wordpress后台编辑器分区域编辑 | wordpress主题定制-阿树工作室 (ashuwp.com)




10,【商品描述功能页】 Adding a custom tab to the product page

参考插件: WooCommerce Custom Product Tabs Lite – WordPress plugin | WordPress.org




11,社交分享功能

Jetpack 插件自带




12,SEO 结构化数据

具体内容参考: (google.com)




13,怎样做 Magento 的 configurable product

Configurable product 对应 就是 woocommerce 的 Variable product , 它们的不同在于,variable product 不分 独立的sku,不分独立的库存管理。
但是,现在的woocommerce 的variable product 也可以 独立 管理库存和sku管理,所以用. variable product 代替就可以。