本页面是WooCommerce教程的合集，覆盖WooCommerce开店所需要的主要功能教程，譬如：安装WooCommerce；添加产品分类、标签、属性；添加简单产品与可变产品；配置产品运费；配置Paypal支付；配置优惠券。
使用WooCommerce经营自己的跨境电商商店的好处是：不需要依赖于任何第三方平台（譬如亚马逊、Shopify），这极大降低了封店的危险。
同时，WooCommerce是一款免费开源的软件，只需要肯学，你便可以自己在网上开店啦。
此外，如果你的网店不需要销售功能，只是想管理产品、收客户的询盘，那么使用WooCoomerce也完全可以实现，这正是我擅长B2B外贸建站的部分，推荐阅读建站教程：
安装WooCommerce插件
适合WooCommerce的主题
Blocksy主题 – 易用、小而美的精致WordPress主题
正版分销：99元/1个站点/终生
你是不是一直想找一个既实用又好看，还超快速的 WordPress 主题呀？可是挑主题可真不容易，市面上那么多选择，都让人眼花缭乱。不过，别担心，我们找到了 Blocksy 主题，它可能正好是你需要的那个。
Kadence主题 – 最好的免费WordPress主题
正版分销：159元/1个站点/终生
你是否在寻找免费主题中最好的？并且既好用、又速度快。然而，大部分免费主题，要么不好用、要么功能少。但是，Kadence当之无愧是最好的免费主题，在所有免费的WordPress主题中，它所提供的功能超出了预期。
产品管理
如何在WooCommerce中管理产品类别、标签和属性
在使用WordPress进行外贸建站时，如果你的产品类目和产品较多，那使用WooCommerce来管理产品是提高效率的最佳选择，本篇是WooCommerce教程系列之一，将详细讲解如何在WooCommerce中管理产品分类、标签和属性。 产品类别 产品类别是对具有相似功能的产品进行分组的主要方法。如果你需要，还可以添加子类别。 例如，如果你是销售服装的，则可能添加产品类别：“ T恤”，“帽衫”和“…
如何用WooCommerce管理和添加产品
在使用WordPress进行外贸网站建设时，如果你的产品较多，那使用WooCommerce来管理产品是提高效率的最佳选择，本篇是WooCommerce教程系列之一，将详细讲解如何在WooCommerce中添加和管理产品。
WooCommerce如何添加可变产品
如果你的外贸网站建设的是零售商城，你很大可能会用到WooCommerce的可变产品，它是WooCommerce中的一种产品类型，允许你提供产品的一组变体，并控制每个变体的价格、库存、图像等。它们可以用于像衬衫、鞋子、口红这样的产品，你可以提供大号、中号和小号以及不同的颜色，下图是一个鞋子商品的展示示例，本篇是WooCommerce教程系列之一，将详细讲解如何在WooCommerce中添加可变产品。…
如何为WooCommerce可变产品属性启用色板选项
我们在外贸网站建设时，如果搭建的是零售商城，譬如出售鞋子、衣服，那么一定会用到可变产品色板选项功能，让你的客户可以直观的选择尺码、颜色、样式等等。本篇教程讲解如何使用插件Variation Swatches for WooCommerce实现产品色板功能。
WooCommerce如何设置与添加可下载产品
在使用WordPress建站时，如果你销售实物的同时还提供电子文件，譬如卖实体书的同时还提供电子书，又或是像我一样销售主题、插件、模板，那就能用上WooCommerce的可下载产品功能了。本篇是WooCommerce教程系列之一，将详细介绍WooCommerce如何设置与添加可下载产品。 可下载产品的功能设置 进入： WooCommerce > Settings > Prod…
如何从速卖通（AliExpress）快速导入产品到WooCommerce商店
在外贸建站中，如果你做的是B2C dropshiping外贸独立站，那这款一键导入速卖通商品到你的WooCommerce商店的插件就非常棒了，它的名字是Aliexpress dropshipping for Woocommerce by theShark。 这个插件免费版可以每月导入160个产品，每周导入50个产品，如果要导入不限量产品，就购买付费版吧。 首先，请你到网站后台安装插件界面，输入wo…
制作产品列表和详情页模板
下方的教程主要针对的是无购物的情况，当然你学了他，也能同理的制作购物类型的产品模板。
如何用Elementor制作woocommerce产品列表【视频】
本文是B2B外贸建站教程的内容之一，我将逐步介绍如何使用Elementor Pro制作woocommerce产品列表模板，下面进入正题。 视频教程 2021/4/12更新视频教程 注意：视频中用于产品搜索的插件，现在已经更名叫做：FiboSearch – Ajax Search for WooCommerce https://www.bilibili.com/video/BV1Yp4y1r7So/…
如何用Elementor制作woocommerce产品详情页（视频实例）
本文将逐步介绍如何使用Elementor pro制作woocommerce产品详情页模板，下面进入正题。 2021/5更新详细的视频教程 https://www.bilibili.com/video/BV1et4y1J7Qi/ 下方是2021年写的简单版图文教程 点击菜单：模板》添加新模板，选择模板类型为single product，输入模板名称，譬如single product 点击“创建模板”…
如何用ACF给产品详情和产品列表添加自定义字段（实例）
使用ACF（advanced custom fields）插件可以为woocommerce的产品分类、产品增加自定义字段，譬如视频、QA等等，叠加运用Elementor Pro的模板功能，就可以制作进阶的产品列表页、产品详情页了。 给产品详情页增加自定义字段 首先，请安装ACF（advanced custom fields）插件，并启用，按照下述步骤添加字段。 进入 字段 》 新建 添加字段组名称…
如何用Elementor Pro设计WooCommerce产品分类和产品标签侧边栏的样式
WooCommerce产品分类和产品标签侧边栏的样式是跟随主题设计的，通常没有设计样式功能。如下图所示，它是我用Hello Elementor主题+ Elementor Pro制作的产品列表模板，在左侧的侧边栏里包含了产品分类和产品标签。接下来，我们就讲如何用Elementor Pro来将样式设置为下图所示的模样。 首先，我们用视频讲解如何设计产品分类的样式 然后，针对产品分类的custom cs…
制作产品询盘表单
如何用Elementor Pro的Form元素制作联系表单【视频】
本视频介绍如何用Elementor Pro付费版制作联系表单，如果你没打算购买Elementor Pro，可以考虑用Ninja Forms或者Fluent Forms插件来制作联系表单。 下方是视频教程，如果分辨率不佳，请在视频的设置中选择清晰度。 https://www.bilibili.com/video/BV1Rp4y1t72q/
如何用Elementor Pro制作弹出式产品询盘表单
思路：用Elementor Pro制作产品详情页模板（single product）和询盘表单弹出层（popup），在产品详情页模板上添加一个询盘按钮，将按钮链接设置为dynamic调用popup即可。 注意，不要将Ninjaform、Wpforms、contact form7制作的表单放到Elementor的Popup中，会出错：无法显示表单或无法提交表单。 2021/5/12更新，最新的ele…
如何给WooCommerce产品页面添加询盘表单标签页
默认Woocommerce产品页面是没有询盘联系表单的，用免费插件Custom Product Tabs for WooCommerce可以给产品页面添加询盘联系表单标签页。 下图是添加完询盘表单标签页的最终效果，这是我在Astra外贸建站教程中的示例。 教程思路：用插件Custom Product Tabs for WooCommerce添加一个标签页，其中放入用Ninja forms制作的联系…
如何给Elementor的表单添加反垃圾验证（Google reCAPTCHA）
在使用ELementor制作询盘表单/联系表单时，为了避免频繁收到垃圾询盘/邮件，我们可以给表单添加Google reCAPTCHA V3进行反垃圾验证，这样以来，当网页里包含表单时，会自动加载reCAPTCHA进行无感知验证，能大幅度减少垃圾询盘邮件，也不会给用户添加负担：譬如点击验证码或验证图片等等。 按照这篇教程添加谷歌反垃圾验证后，在表单所在页面的左下角/右下角/表单提交按钮上方，就能看到…
支付设置
运费配置
如何配置WooCommerce运费费率表Table Rate Shipping
本篇教程是针对Woocommerce的付费插件Table Rate Shipping（运费费率表）的，我们在进行B2C的购物型外贸网站建设时，可以使用到它配置复杂的运费计算规则。如果运费规则简单，那可以使用WooCommerce自带的功能配置运费。 运费费率表插件能够创建复杂的、适用于全球配送范围的运费规则。 您可以根据产品的配送区域，配置多个运费费率表，也可以针对每个地区设置多个运费费率表，还可…
如何在WooCommerce中设置运费（免费功能）
这篇WooCommerce教程，我们使用WooCommerce自带的免费的运费配置功能来讲解如何设置运费。基本思路是：1.设置配送区域，2.向这些配送区域添加配送方法，3.在配送方法中添加运费费率。你可以按需创建多个配送区域，并为每个配送区域添加多种配送方法和运费费率。 免费的运费配置功能是有限的，如果本文无法满足的你的运费配置需求，可以查看付费运费插件的配置教程：如何配置WooCommerce运…
订单管理
优惠券
其他
如何隐藏WooCommerce购物车页面中的价格、总计等列
本文讲述：如何用自定义css，隐藏WooCommerce购物车（cart）页面的产品表中的某些列，譬如隐藏价格列（Price）、总计列（Subtotal）。 请进入WordPress网站后台的菜单：外观>>自定义>>额外CSS，并添加如下CSS，来实现上图的需求。 /* 下方的数字4代表第4列的Price，6代表第6列的subtotal，请按需设置数值；如果你需要删除多列，…
如何使用WooCommerce的12个小工具（Widgets）
WooCommerce小工具可以让你在WordPress外贸建站时，添加不同产品功能到页面上，譬如展示最新产品、产品分类、搜索产品、产品价格筛选等等。 如下图所示，这些小工具位于WordPress后台的外观》小工具页面中，你可以将它们添加到网站主题设定的区域中。下图中右侧的主侧边栏、页面小工具区域1等便是区域，网站主题是指你安装并启用的WordPress主题，不同主题提供的区域有所不同，并且不同主…
WooCommerce简码【实例讲解】
WooCommerce简码（shortcode）可以让我们将产品、购物车等内容加入到页面或者文章中。我们在外贸建站时，可以直接通过Elementor Pro的Product元素块来配置产品的展示，但如果元素块或是免费主题无法提供所需的产品配置呢？尤其针对免费建站，那学习WooCommerce简码能让你自定义所需的产品展示，譬如在网站首页，以tab标签的形式展示不同类目的产品。 此外，如果你使用Wo…
常用代码段
对于一些零散的小需求，可以使用Code snippet插件添加代码段来解决，这样就可以少用一些插件了。
WooCommerce：在编辑订单页面，为账单地址、配送地址、邮箱、电话添加一键复制文案的功能
我有一位B2C跨境电商零售站的建站客户，在运营时，有一个小需求：希望能在WooCommerce的订单详情页面中，能够将Billing（账单地址）、Shipping（配送地址）显示在一行中，这样方便复制到自己的ERP系统中进行管理。 考虑到最终目的是为了复制，那么添加一键复制账单地址、配送地址的功能就可以了，顺带给邮箱和电话也添加一键复制的功能。于是，下图便是最终的效果啦，它是怎么实现的呢？不需要借…
WooCommerce：如何实现自定义连续订单号
WooCommerce的订单号为什么不是连续的? 如何用插件或代码实现自定义连续的订单号呢？譬如：NO-1001，接下来，我们进入正题。 为什么WooCommerce中的订单ID（订单号）不是连续的？ 在 WooCommerce 中，订单 ID 不是连续的，是因为它们是基于 WordPress 数据库中的 "posts" 数据表来生成的，这个表包含了许多其他类型的Post（如文章、页面、自定义Po…
WooCommerce：如何降低注册账号时的密码强度
在使用WooCommerce制作电商独立站时，如果你设定的是允许客户注册时填写密码，那么，在填写密码时，会要求客户使用强密码，要求是12位的字符串，得有字母、数字、特殊字符。如果觉得这个要求太严苛，可以通过以下的代码段来降低注册账号时的密码强度要求。 首先，请安装Code Snippet插件 然后，添加一个新的snippet，代码类型是function(php)，将下方代码复制进去，保存即可。 这…
WooCommerce: 如何删除 “Default Sorting/默认排序” 下拉选项
如果WooCommerce的产品排序功能对你而言是没用的（即下图中的default sorting下拉选项），你可能想把它从页面上删除。 接下来这个PHP 代码段简直比CSS还简单清爽，你只需要把我的代码段添加到Code Snippet插件中。 WooCommerce: 隐藏 “Default Sorting” 下拉选项 PHP Snippet 1: 从woocomm…
WooCommerce：如何给产品列表的“默认排序”删除、重命名、添加的排序选项
我们之前已经说过：如何完全删除 WooCommerce 商店、产品列表页面中显示的“默认排序”下拉选项。 但是，有时你可能只需要删除默认选项中的一个，或者重命名这些选项，甚至是添加新的排序选项。像往常一样，多亏了 WooCommerce 挂钩和过滤器，几行 PHP 代码就可以实现这个目标。 删除、重命名或添加选项到 WooCommerce“默认排序”下拉列表 PHP 代码段 #1：在WooComm…
WooCommerce: 在后台寻找没有重量的产品
如果你的运费取决于产品的重量，可能也会出现忘记给某些产品添加重量的情况，这样一来，在WooCommerce结账页面上，运费可能就要被少算了。 因此，我们看看如何在WordPress仪表板>产品列表上展示一个通知，列出没有重量的产品，以及提供快速编辑它们的链接，就像下图这样。 这是自定义通知，展示有没有重量的产品列表。现在可以点击每个链接，直接编辑每个产品。 PHP Snippet:…
WooCommerce: 如何在商店中先展示有货商品
我们已经学到如何在WooCommerce Shop页面的 "默认排序 "下拉菜单中添加一个自定义的 "产品排序 "选项。 然而，我所面临的任务是根据一个自定义的 "元键/Metakey "来显示商品。现在，如果你不知道 "元键/Metakey "是什么，不用太担心。例如，"_stock_status "是其中的一个键，因此你可以根据这个键对产品进行排序，而不是根据产品名称、日期、价格等等。 因此，…
WooCommerce：在购物车页面上显示产品库存
我们已经讲过如何在商店页面上显示产品的库存数量和状态，今天我们将对购物车页面做类似的事情，以便我们可以直观地向购物客户显示产品的库存状态和数量。（见下图） 请注意：为了使代码段起作用，您必须在WooCommerce设置中启用“库存管理/stock management”，并且购物车中的每个产品都必须选中“管理库存/managing stock”，如果允许缺货下单，则必须选中“允许但通知客户”，否则…
WooCommerce：在购物车和结算页面显示所购产品总重量
在使用WooCommerce的跨境电商独立站中，如果你想在购物车和结算页面向客户展示它所加购的产品的总重量，那么，可以在Code snippet插件中插入下面的php代码段，不需要任何额外插件就能实现这个功能，真棒棒~ 代码如下： add_action( 'woocommerce_before_checkout_form', 'bbloomer_print_cart_weight' ); add_…
WooCommerce：在商店页面上显示库存状态/数量
在本教程中，我的目标是在WooCommerce商店、产品列表页面中，在每个产品下方展示“库存数量或状态”。 这跟在单个产品页面显示的库存是完全一样的，请前往/wp-admin/admin.php?page=wc-settings&tab=products§ion=inventory“设置库存显示格式”。 WooCommerce：在商店页面上展示库存数量 PHP 代码段：在…
WooCommerce：在结帐页面上显示产品图片
WooCommerce 结账页面的订单审查部分显示了产品名称、数量和费用，但没有产品图像，产品图像对于识别/区分相似产品或产品变体非常有用。 这个简单的代码段将帮助你在订单审查页面中展示产品的特色图片。 通过添加下面的PHP代码段，您可以在结帐页面中的产品名称快速显示产品特色图片 PHP代码段：添加产品特色图片到woocommerce的结帐页面的订单审核表中 请注意，下面的片段将生成一个尺寸为50…
WooCommerce：在后台按库存对产品进行排序
我们已经学过了如何将前台的产品按有货在先和无货在后进行排序，但对于后台的管理员和商店经理来说，如何做到完全相同呢？ 有时商店存在大量 "已售/无货 "的产品，产品表看起来乱乱的（有货和无货穿插混合），本文介绍的方法可以实现：当访问产品列表时，即：/wp-admin/edit.php?post_type=product，所有产品将按库存状态（有货->无货）排序。 一旦下面的代码段被激活，WooCom…
如何解决WooCommerce产品标签筛选显示数量不全、无法排序的问题
我遇到一个问题：在WooCommerce产品列表的侧边栏中，Product tags标签云的tags显示不全，后台有50多个标签，但实际只展示了40多个，由于我是代码手残党，所以找大佬要到了解决方案： 首先，安装code snippet插件，然后，添加如下代码段，其中$args['number'] = 100中的100即为显示的标签数量上限，请按需修改这个数值。 //Register tag cl…
如何在WooCommerce产品列表中展示变体产品的最低价格
我们在用WooCommerce进行外贸建站时，如果销售的某产品存在多种属性且价格不同，那么在产品列表和产品详情中查看到该产品价格将会是一个区间，格式是：最低价~最高价。如果你希望在产品列表页中仅展示产品的最低价，而在产品详情页还保持区间价展示，那么下面这段代码就能够实现你的需求。 首先，请安装Code Snippet插件 然后，添加一个snippet，将下方代码复制进去 // Show only…
