如何使主题支持 Woocommerce - JavaScript 编程网

在互联网上 WooCommerce 是世界上最受欢迎的开源电子商务解决方案。

WooCommerce 平台是免费的、灵活的平台，并借助全球社区发展壮大。开源自由意味着您完全永久拥有商店的内容和数据。

无论您是要开展业务、进行在线实体零售，还是为客户开发站点，都可以使用 WooCommerce 打造将内容与商务紧密结合的商店。使用适合您品牌和行业的主题创建漂亮、显眼的店面。

与托管的电子商务解决方案不同，WooCommerce 可以自由导出所有内容，也可以将站点迁移到所选的任何平台。

开发人员可以使用 WooCommerce 创建、定制和扩展商店，以符合客户端的确切规格，并通过扩展程序或自定义解决方案增强功能。

BuildWith 的统计数据显示，WooCommerce 正在驱动着全球近 35％在线商店。

安装好 Woocommerce 插件以后，默认情况下，Woocommerce 就会基于主题的文章和页面模板生成商店的相关页面。但是这样通常不能满足我们的需要，这时候就需要修改我们的主题适配 Woocommerce 了。

首先在 functions.php 声明对 Woocommerce 的支持：

add_action( 'after_setup_theme', 'woocommerce_support' );
function woocommerce_support() {
    add_theme_support( 'woocommerce' );
    add_theme_support( 'wc-product-gallery-zoom' ); // 支持产品详情页的JS
    add_theme_support( 'wc-product-gallery-lightbox' );
    add_theme_support( 'wc-product-gallery-slider' );
}

然后在主题根目录创建一个文件夹 woocommerce，按照自己的需要吧 /plugins/woocommerce/templates 的文件复制到 /wp-content/themes/当前主题/woocommerce 下，即可在功能上覆盖 woocommerce 的页面。

商品详情页举例，如果要覆盖 /wp-content/plugins/woocommerce/templates/single-product.php，需要创建 /wp-content/themes/当前主题/woocommerce/single-product.php

如果遇到 CSS 样式未能生效，官方建议是在外层 div 添加类 woocommerce。

参考：

https://github.com/woocommerce/woocommerce/issues/2739

https://cn.wordpress.org/plugins/woocommerce/

https://trends.builtwith.com/shop

声明：本站所有文章和图片，如无特殊说明，均为原创发布。商业转载请联系作者获得授权，非商业转载请注明出处。