独立站怎么搭建?WordPress + WooCommerce跨境电商建站完整教程

独立站怎么搭建?WordPress + WooCommerce跨境电商建站完整教程

想做跨境电商,却不想一直依赖亚马逊、eBay 等第三方平台?或者你已经有自己的产品和供应链,希望建立一个真正属于自己的品牌网站,那么搭建跨境电商独立站,就是一个值得考虑的方向。

很多中国卖家第一次接触独立站建站,都会有类似的疑问:搭建一个电商网站需要懂代码吗?没有技术基础能不能自己建站?WordPress 可以做跨境电商吗?如何添加商品、设置国际运费,以及接入 PayPal、Stripe 等海外收款工具?

其实,现在搭建一个专业的跨境电商网站,已经没有想象中那么复杂。

通过 WordPress + WooCommerce + Blocksy + Elementor 这套工具,即使你完全不会编程,也可以通过可视化编辑器和现成的网站模板,一步步创建自己的在线商城。

本篇教程将从域名、主机、WordPress 安装开始,详细介绍 WooCommerce 电商插件的设置方法,包括商品上架、多规格产品、购物车、国际配送、销售税、在线收款、订单管理以及网站页面设计。

无论你准备销售服装、电子产品、宠物用品、家具、箱包,还是其他跨境电商产品,都可以参考这套建站流程。

一、搭建跨境电商独立站需要准备哪些工具?

正式开始之前,我们先把需要用到的建站工具整理好。下面这些工具基本可以满足一个 WordPress 电商网站从搭建到上线的主要需求。

1. Kinsta:适合电商独立站和高流量网站的 WordPress 主机

推荐给:准备长期运营跨境电商独立站、B2B 外贸网站,以及重视网站速度和稳定性的卖家。

Kinsta 是一家专注于 WordPress 托管的网站主机服务商,提供专门针对 WordPress 和 WooCommerce 网站的托管环境。

相比普通展示型网站,电商网站需要处理购物车、客户账户、订单和在线付款等动态操作,因此对服务器性能、稳定性以及缓存配置都有更高要求。

Kinsta 提供 CDN、边缘缓存、自动备份、网站监控以及测试环境等功能,并针对 WooCommerce 的购物车、结账和账户等页面设置缓存排除规则,有助于减少动态页面缓存引发的问题。

➜ 点击访问 Kinsta,查看 WordPress 电商主机套餐

推广链接:https://bit.ly/4xqDO52

2. Hostinger:适合预算有限的独立站新手

如果你第一次做 WordPress 网站,暂时没有太多订单,也不准备一开始就投入较高的网站托管费用,可以考虑 Hostinger。

Hostinger 提供不同价位的网站托管套餐,部分套餐支持 WordPress 快速安装,适合用于新手练习、初创独立站和流量较小的网站。

➜ 点击访问 Hostinger,查看新手建站主机

推广链接:https://bit.ly/3BysRqP

3. SiteGround:专业 WordPress 托管主机

SiteGround 也是值得考虑的 WordPress 主机服务商,提供 WordPress 网站托管、缓存优化、安全保护以及相关管理功能。

对于希望在网站易用性、性能与维护功能之间取得平衡的卖家,可以将 SiteGround 纳入比较范围。

➜ 点击访问 SiteGround,查看 WordPress 主机方案

推广链接:https://bit.ly/4yv1xSu

4. Blocksy:WordPress 电商网站主题

网站主题决定了独立站的整体外观,比如首页布局、导航菜单、商品展示、购物车图标和移动端页面样式。

Blocksy 是一款适用于 WordPress 的轻量化主题,可以配合 WooCommerce 使用,并提供多种网站布局与模板。

它有免费版本,也有提供额外功能的付费版本。对于初次搭建电商网站的卖家,可以先从免费版开始。

➜ 点击下载 Blocksy WordPress 电商主题

推广链接:https://bit.ly/4xxE7L5

5. Elementor Pro:可视化页面设计工具

Elementor 是 WordPress 上常用的可视化页面构建器,可以通过拖拽组件的方式编辑网站。

比如修改首页文字、替换商品图片、添加按钮、设计品牌介绍页面,以及调整网站在手机和平板上的布局。

Elementor 有免费版和 Pro 付费版。普通页面设计可以先使用免费版;如果需要更多高级组件、动态内容和专业设计功能,可以考虑 Elementor Pro。

➜ 点击访问 Elementor Pro,查看页面设计功能

推广链接:https://bit.ly/4cuQ8IF

二、WordPress 和 WooCommerce 是什么?为什么适合中国卖家?

开始操作之前,我们先了解一下这两个工具之间的关系。

WordPress 是什么?

WordPress 是一套开源的网站内容管理系统,也叫 CMS。

你可以把它理解成网站的基础程序。安装 WordPress 后,就可以创建页面、发布博客文章、上传图片、管理导航菜单,还可以通过主题和插件扩展网站功能。

WordPress 本身可以免费下载使用,但独立运营网站通常仍然需要支付域名、主机,以及部分付费插件的费用。

WooCommerce 是什么?

WooCommerce 是专门用于 WordPress 的电商插件。

一个刚安装好的 WordPress 网站,主要具备内容管理和页面展示能力。安装并配置 WooCommerce 后,就可以增加商品管理、购物车、结账、订单、优惠券、库存等电商功能。

例如,一个销售运动服装的跨境独立站,可以通过 WooCommerce 实现不同颜色、不同尺码的商品选择,并设置对应的价格与库存。

买家选择商品后,可以加入购物车、填写收货地址、选择配送方式,并通过已经配置好的支付渠道完成付款。

WordPress + WooCommerce 与 Shopify 有什么不同?

Shopify 是提供托管服务的电商平台,而 WordPress + WooCommerce 更偏向自主搭建和管理。

Shopify 的优势在于电商功能整合程度较高,比较适合希望减少技术维护工作的卖家。

WordPress + WooCommerce 的优势则在于网站设计自由度、插件扩展能力,以及内容和网站技术环境的自主控制程度。

不过,使用 WooCommerce 并不意味着没有成本。你仍然需要管理主机、更新插件、维护网站安全,并处理支付和税务等业务问题。

对于希望长期建设品牌、经营内容营销、积累自然搜索流量的卖家,WordPress + WooCommerce 是值得考虑的建站方案。

三、第一步:购买网站主机并安装 WordPress

无论你准备创建电商网站、企业官网还是博客,都需要解决两个基础问题:网站放在哪里,以及用户通过什么网址访问。

域名相当于网站的地址,例如 yourbrand.com。

网站主机则负责存储网站程序、页面、商品图片和数据库,让访客可以通过互联网访问网站。

为了演示完整的跨境电商建站流程,下面主要以 Kinsta 作为 WordPress 主机来介绍操作步骤。

1. 注册 Kinsta 主机账户

首先打开 Kinsta:

➜ Kinsta WordPress 主机注册入口

https://bit.ly/4xqDO52

进入网站后,点击价格或套餐页面,就可以查看不同的 WordPress 托管方案。

一般来说,刚开始做独立站,不一定需要购买配置最高的主机。

如果网站刚刚起步,商品数量不多、流量也比较小,可以先选择满足当前需求的套餐;以后随着访客数量和订单量增加,再评估是否升级。

选择套餐时,建议重点查看网站数量、存储空间、访客或带宽额度、备份、安全功能以及超额使用费用。

具体价格、是否提供试用以及付款规则,以 Kinsta 当前官网显示为准。

2. 创建 WordPress 网站

购买主机后,登录 Kinsta 的管理后台 MyKinsta。

找到创建网站的功能,选择安装 WordPress。

接下来,根据页面提示填写网站相关信息。

网站项目名称: 可以填写方便自己识别的英文名称。这主要用于后台管理,不一定是访客最终看到的品牌名称。

服务器位置: 根据目标客户所在地区选择。例如主要面向美国市场,就优先考虑适合北美访客的位置;如果主要面向东南亚市场,可以考虑亚洲地区的数据中心。

管理员用户名: 这是以后登录 WordPress 后台使用的账户名称。建议不要直接使用容易被猜测的默认用户名。

管理员密码: 设置一个强密码,并妥善保存。

管理员邮箱: 用于接收网站通知、账户信息和密码重置邮件。

网站标题: 可以先填写品牌名称,以后仍然可以修改。

网站语言: 如果你更习惯中文操作,可以先选择简体中文作为后台语言。

填写完成后,提交安装。系统创建完成后,就可以进入 WordPress 管理后台。

3. 登录 WordPress 后台

WordPress 网站的后台通常可以通过以下地址访问:

https://你的域名/wp-admin

如果暂时还没有绑定正式域名,可以先通过主机提供的临时网站地址进入后台。

登录成功后,左侧会看到 WordPress 的主要功能菜单。

其中,“文章”用于发布博客,“媒体”用于管理图片和其他媒体文件,“页面”用于创建首页、关于我们、联系我们等内容,“外观”用于管理网站主题,“插件”用于扩展功能,而“设置”则用于调整网站的基础选项。

建议先进入“设置”中的“常规”,填写网站标题、管理员邮箱以及网站时区等信息。

对于面向美国客户的英文独立站,网站前台语言、货币和时区需要根据实际运营需求设置,不一定要和后台管理语言相同。

四、第二步:安装 Elementor 页面编辑器

WordPress 默认提供页面编辑功能,但如果你希望像搭积木一样设计页面,Elementor 会更加直观。

1. 下载 Elementor

进入 Elementor 网站:

➜ Elementor 下载及 Pro 版本入口

https://bit.ly/4cuQ8IF

如果只是初次学习,可以先使用 Elementor 免费版。

在 WordPress 后台找到:

插件 → 安装新插件

搜索 Elementor,找到对应插件,点击安装并启用。

如果你已经下载了插件 ZIP 文件,也可以使用“上传插件”功能,选择 ZIP 文件完成安装。

安装后,如果出现初始设置向导,可以根据自己的需求完成设置,或者暂时跳过,等到设计网站页面时再调整。

2. Elementor 能做什么?

Elementor 的主要优势,就是让没有编程基础的新手也能直接编辑页面。

例如,你可以通过它替换首页展示图片,修改网站文字,设置按钮跳转链接,调整页面背景、边距和宽度,还可以加入视频、商品分类入口以及品牌介绍等内容。

后面导入网站模板之后,我们会使用 Elementor 来修改首页。

需要注意,Elementor 主要负责页面设计,真正的商品、库存和订单管理仍然由 WooCommerce 负责。

五、第三步:安装 Blocksy 电商主题

接下来,我们需要给 WordPress 安装一个适合电子商务网站的主题。

这次使用的是 Blocksy。

➜ 下载 Blocksy 电商主题

https://bit.ly/4xxE7L5

1. 安装 Blocksy

进入 WordPress 后台,找到:

外观 → 主题 → 安装主题

可以直接搜索 Blocksy 安装,也可以点击“上传主题”,选择提前下载好的主题安装包。

安装完成后,点击“启用”。

主题启用后,系统可能提示安装配套的 Blocksy Companion 插件。

这个插件主要用于扩展 Blocksy 的功能、管理模板以及其他辅助设置,可以按照提示安装。

2. 为什么选择 Blocksy?

对跨境电商独立站来说,网站的第一印象非常重要。

如果客户打开网站以后,发现页面混乱、商品图片不清晰,或者手机访问体验很差,就可能影响他们继续浏览和购买的意愿。

Blocksy 提供较丰富的布局和外观设置,可以配合 WooCommerce 调整商品目录、商品详情页、页眉、页脚以及移动端布局。

而且,Blocksy 提供现成的网站模板,新手不需要从空白页面开始设计。

只需要找到适合自己行业的模板,再把里面的演示图片、文字和商品替换成自己的内容,就能够明显减少建站时间。

六、第四步:安装 WooCommerce,把普通网站变成电商商城

前面我们已经安装了 WordPress、Elementor 和 Blocksy。

但是现在的网站还没有完整的电商功能。

接下来就要安装本次教程最重要的插件:WooCommerce。

1. 安装 WooCommerce

进入 WordPress 后台:

插件 → 安装新插件

在搜索框输入 WooCommerce。

找到 WooCommerce 插件,点击“立即安装”,然后启用。

安装成功后,WordPress 后台会增加商品、电商设置、订单、营销和数据分析等相关功能。

2. WooCommerce 初始设置

初次启用 WooCommerce 时,系统可能会显示店铺配置向导。

这里需要设置店铺经营地区、业务信息、销售目标以及相关电商选项。

如果还没有准备好全部资料,可以先完成必要配置,以后再返回设置页面修改。

3. 安装其他实用插件

为了让独立站更加完整,还可以根据需要安装一些辅助插件。

Variation Swatches 类插件: 用于改善可变商品的规格选择界面。例如,将衣服的颜色显示成颜色块,把 S、M、L 尺码显示成按钮,而不是普通的下拉菜单。

WPForms: 用于创建联系我们表单,让访客填写姓名、邮箱和咨询内容。

安装插件的方法基本相同,都是进入 WordPress 的插件页面,搜索插件名称,确认开发者与兼容性后安装启用。

不建议一次性安装大量不必要的插件,因为插件越多,后期维护、更新和兼容性管理通常就越复杂。

七、第五步:设置 WooCommerce 店铺信息、货币和税费

完成插件安装后,先不要急着设计首页。

对于跨境电商网站来说,商品销售国家、结算货币、运费和支付规则必须提前规划好。

进入:

WooCommerce → 设置 → 常规

1. 设置店铺经营地址

填写真实的店铺或经营主体地址,包括国家、地区以及相关联系信息。

这里填写的不是目标客户的地址,而是与你实际经营业务相匹配的信息。

如果你在中国经营跨境电商,就需要根据自己的真实经营主体及 WooCommerce 的设置要求填写。

2. 设置销售国家

WooCommerce 允许商家选择向所有国家销售,或者只向指定国家和地区销售。

比如你的主要目标客户在美国,可以将销售区域设置为美国。

如果同时做美国、英国、加拿大等市场,也可以添加相应国家。

建议初期只开放自己能够实际配送和提供售后服务的地区,避免客户从无法履约的国家下单。

3. 设置网站结算货币

如果主要销售到美国,可以把 WooCommerce 的商店货币设置为:

USD — 美元

这样商品价格就可以美元显示,比较符合美国消费者的购物习惯。

如果经营多个国家,还可以根据实际需要研究多货币插件,不过要注意展示货币与支付服务商实际结算货币可能不同。

4. 启用优惠券

在常规设置中,可以根据需要启用优惠券功能。

以后开展促销活动时,就可以创建满减券、固定金额优惠券或百分比折扣券。

例如,新用户首单优惠10%,或者针对特定商品分类开展促销活动。

5. 设置销售税

跨境电商与普通国内电商不同,面对不同国家和地区,可能涉及不同的税务规定。

在 WooCommerce 中,可以启用税率和税额计算功能,并根据需要配置标准税率及其他税率类别。

例如,销售到美国时,不同州及不同交易情况可能适用不同的销售税规则。

但需要特别注意,并不是所有销往美国的订单都必须统一收取销售税,也不能随意套用网上查询到的税率。

是否需要注册、申报和代收销售税,可能与经营主体、销售地区、商品类型、经济关联门槛以及当地税法有关。

WooCommerce 负责按照你设置的规则进行计算,并不能代替税务判断。正式经营前,建议向熟悉相关市场的专业税务人员确认。

完成设置后,点击保存更改。

八、第六步:设置跨境电商国际运费

运费设置是跨境电商独立站非常重要的一部分。

比如一件 T 恤和一台大型家电,商品重量、体积、物流渠道都不同,如果使用同一种收费方式,可能导致运费计算不合理。

WooCommerce 主要通过配送区域、配送方式和配送类别来管理运费。

1. 创建配送区域

进入:

WooCommerce → 设置 → 配送 → 配送区域

点击添加配送区域。

例如创建一个名为 United States 的配送区域,并选择美国作为覆盖范围。

如果你主要面向美国市场,还可以根据需要进一步划分不同州或邮政编码区域。

以后拓展英国、加拿大或澳大利亚市场时,也可以分别创建配送区域。

2. 添加配送方式

创建配送区域后,可以为该区域添加配送方式。

常见的方式包括统一费率配送、免费配送以及本地自提。

假设你准备向美国客户收取固定运费,可以选择统一费率,设置一个基础配送费用。

如果你想开展满额包邮活动,也可以添加免费配送方式。

例如设置:

订单金额满99美元,可以选择免费配送。

需要注意,如果一个配送区域同时启用了免费配送和统一费率配送,具体显示哪些配送选项,还取决于 WooCommerce 当前设置。希望达到门槛后只显示免费配送,需要进一步检查相关隐藏选项或配送规则。

3. 创建不同商品的配送类别

如果你卖的商品比较多,可以建立不同的配送类别。

例如:

Clothing(服装):T 恤、运动服、裤子等商品。

Electronics(电子产品):耳机、手表、手机配件等商品。

Heavy Items(大件商品):家具、大型设备等商品。

在 WooCommerce 的配送类别中创建这些分类,然后分别将商品分配进去。

需要说明的是,创建配送类别本身不会自动产生运费,还需要在配送区域的具体配送方式中设置对应费用。

4. 按商品数量收取运费

假设你希望每件服装收取1美元配送费,可以在适用的统一费率配送设置中,针对服装配送类别填写:

1 * [qty]

其中 [qty] 表示属于该配送类别的商品数量。

例如客户购买5件适用该规则的衣服,按数量计算的这部分运费就是5美元。

如果电子产品每件收费5美元,可以使用:

5 * [qty]

如果只填写固定数字 5,而没有使用数量变量,通常表示该配送类别按固定费用计算,而不是每件商品都增加5美元。

但最终配送金额仍然可能受到基础运费、其他配送类别及计算类型的影响。

这些规则可以根据你的实际物流报价进行设置,不需要完全照搬示例。

九、第七步:接入 PayPal 和 Stripe,让海外买家在线付款

电商网站搭建得再好,如果客户没有办法顺利付款,也无法完成真正的销售。

对于面向欧美市场的跨境电商独立站,PayPal 和 Stripe 都是值得了解的支付服务。

1. PayPal 收款

PayPal 是国际在线支付服务之一,在多个跨境电商市场都有应用。

买家可以通过适用的 PayPal 支付方式完成付款,而商家则可以在符合账户及地区要求的情况下接收款项。

如果你计划把 PayPal 作为独立站的正式商家收款工具,通常应考虑使用符合条件的 PayPal 商业账户。

需要注意,PayPal 个人账户并非完全不能收款,但正式商家结账集成、可使用的支付产品和功能权限,可能与商业账户不同。

2. Stripe 收款

Stripe 提供在线支付基础设施,可以帮助符合条件的商家接受信用卡、借记卡以及所在地区支持的其他支付方式。

对于面向美国市场的 WooCommerce 商城,Stripe 是一种常见的支付集成选择。

中国大陆卖家尤其需要注意 Stripe 的账户注册条件。

Stripe 的账户开通地区有明确限制,并不是所有中国大陆经营主体都可以直接申请常规 Stripe 商户账户。

部分跨境卖家会考虑通过美国公司或其他受支持地区的真实经营主体申请 Stripe,但注册海外公司不等于自动获得 Stripe 收款资格。

平台仍可能审核公司文件、实际经营情况、控制人身份、银行账户以及网站业务等资料。

3. 中国卖家如何注册美国公司?

如果你准备长期做跨境电商,并且希望了解美国 LLC 公司注册流程,可以参考我之前制作的美国公司注册教程。

教程介绍了如何选择注册州、使用注册代理、提交美国公司注册资料,以及了解后续经营和申请企业服务的基本流程。

➜ 观看美国公司注册完整视频教程

如果你准备通过专业注册代理办理美国公司,也可以了解 Northwest Registered Agent。

Northwest 提供美国公司注册代理及相关企业服务,适合希望由专业平台协助处理注册流程的卖家。

➜ 点击访问 Northwest 美国公司注册平台

https://bit.ly/45fPEnB

在注册公司之前,还需要综合考虑注册费用、年度维护、报税义务、代理服务以及支付平台审核条件。

不要仅仅为了获得一个 Stripe 账户就盲目注册美国公司。

4. WooCommerce 如何连接 PayPal?

假设你已经拥有符合要求的 PayPal 账户,就可以开始配置支付插件。

进入 WordPress 后台:

插件 → 安装新插件

搜索适合 WooCommerce 的 PayPal 支付插件。

本教程演示的是 Payment Plugins 提供的 PayPal 支付网关类插件。由于插件名称和界面可能更新,安装时应核对插件开发者、更新记录及与当前 WooCommerce 版本的兼容情况。

安装并启用插件后,进入:

WooCommerce → 设置 → 支付

找到对应的 PayPal 支付方式,点击启用和管理。

按照插件提示,连接你的 PayPal 账户,并完成必要的授权与设置。

通常可以先使用测试或沙盒环境验证流程,确认正常后,再按照平台要求启用正式收款环境。

5. WooCommerce 如何连接 Stripe?

Stripe 的操作方式与 PayPal 类似。

进入 WordPress 后台的插件安装页面,搜索适用于 WooCommerce 的 Stripe 支付插件。

可以根据自己的需要选择官方提供的支付插件,或者经过核实的第三方集成插件。

本教程采用的是 Payment Plugins 提供的 Stripe 支付网关类插件。

安装启用后,进入 WooCommerce 的支付设置,找到 Stripe,点击管理或相关 API 设置。

根据插件提供的连接流程登录 Stripe,选择正确的账户并完成授权。

部分插件可以通过账户授权自动完成必要的连接配置,不需要商家手动复制所有 API 密钥。

然后根据实际需要选择测试模式或正式模式,保存设置。

完成后,建议用测试环境模拟支付一次,确认订单能正常生成,支付状态也能够正确同步。

6. 可以接入支付宝和微信支付吗?

部分 Stripe 集成方案在符合条件的情况下,可以提供支付宝、微信支付等支付方式。

但是否能够使用,取决于 Stripe 账户所在国家或地区、支持的支付方式、账户审核、插件功能及实际业务情况。

不能因为 WooCommerce 后台出现支付宝或微信支付选项,就认为所有商家都可以直接启用。

应该先在 Stripe 后台确认支付方式资格,并完成相关配置及测试。

十、第八步:设置 WooCommerce 客户账户和隐私选项

完成支付配置后,还需要调整客户账户功能。

进入:

WooCommerce → 设置 → 账户和隐私

这里主要管理访客结账、账户注册、账户创建和隐私相关设置。

例如,你可以允许客户在结账过程中创建账户,也可以根据业务需要开放游客结账。

游客结账可以减少部分买家的注册步骤,而账户注册则有助于客户查看历史订单、管理个人信息。

如果网站面向海外消费者,还应该准备清晰的隐私政策、退款退货政策、配送政策及服务条款。

另外,要确保网站启用了 HTTPS,并且结账页正常使用安全连接。

网站的具体隐私和消费者保护要求,还需要根据目标市场适用的法律判断。

十一、第九步:在 WooCommerce 上架商品

接下来,我们正式给独立站添加商品。

WooCommerce 支持多种商品类型,新手最先需要掌握的是简单商品和可变商品。

1. 创建简单商品(Simple Product)

简单商品适合没有复杂规格选择的产品。

例如只有一个型号的电子设备、一本书或者单一款式的家居用品。

进入:

产品 → 添加新产品

首先填写商品标题。

如果主要面向美国市场,建议使用清晰、自然的英文商品名称,并适当包含消费者会搜索的关键词。

然后在商品描述中介绍产品的特点、材质、功能、使用场景以及其他重要信息。

接下来,在商品数据区域选择“简单商品”。

你可以填写正常售价和促销价格。

例如:

正常售价:$599

促销价格:$399

启用适当的促销展示后,网站可以显示原价和优惠价。

不过,正式经营时应确保原价、折扣和促销信息真实,符合销售地区的广告及消费者保护规定。

2. 设置 SKU 和库存

SKU 是 Stock Keeping Unit 的缩写,通常翻译为库存单位或库存管理编码。

简单理解,就是每一个商品或商品规格的识别编号。

例如,一件黑色 M 码的 T 恤和一件白色 L 码的 T 恤,可以使用不同的 SKU。

这样在管理库存、打包和发货时,就不容易弄混。

在商品库存设置中,可以填写 SKU、库存数量以及是否跟踪库存。

如果启用库存管理,WooCommerce 就可以根据实际订单情况更新对应的库存数量。

还可以根据需要设置是否允许缺货预订,以及是否限制单笔订单购买数量。

3. 设置商品重量和配送类别

如果销售的是实体商品,通常还需要填写重量、尺寸等物流相关信息。

这些信息可能影响物流成本和运费规则。

例如,之前已经建立了电子产品配送类别,那么在对应商品的配送设置中,就可以把商品分配到该类别。

这样结账时就能够结合配送规则计算运费。

4. 上传商品图片

一张清晰、专业的商品图片,对于电商网站非常重要。

在商品编辑页面中,可以设置主要商品图片以及商品图库。

主图主要用于商品列表和商品详情展示,图库则可以上传不同角度、细节和使用场景的图片。

例如销售服装,可以展示正面、背面、面料细节,以及穿着效果。

建议统一图片比例,适当压缩文件大小,并为重要商品图片填写有意义的替代文本(Alt Text),兼顾用户体验与图片搜索理解。

5. 设置商品分类

如果销售多种类型的产品,建议创建清晰的商品分类。

例如一个运动服装商城,可以设置:

Men’s Clothing、Women’s Clothing、Sportswear、Accessories 等分类。

商品分类不仅可以让客户更方便地找到产品,也有助于构建清晰的网站导航结构。

设置完成后,点击发布,再打开商品页面检查实际显示效果。

十二、第十步:创建不同颜色、不同尺寸的可变商品

对于服装、鞋子、包包、手表等产品,往往需要提供多种规格。

例如一件 T 恤可能有黑色、白色、蓝色三种颜色,每种颜色又包含 S、M、L、XL 等尺码。

这时候就应该使用 WooCommerce 的可变商品(Variable Product)。

1. 创建商品属性

进入 WordPress 后台:

产品 → 属性

首先创建颜色属性:

Color

然后创建尺码属性:

Size

创建完成后,进入对应属性的配置页面,添加具体选项。

例如颜色可以设置为 Red、Black、White。

尺码可以设置为 S、M、L、XL。

如果安装了合适的商品规格展示插件,还可以把颜色显示为色块,把尺寸显示成独立按钮。

2. 创建可变商品

返回商品页面,点击添加新产品。

填写产品名称和描述后,在商品数据中选择:

Variable Product(可变商品)

接下来进入属性设置,添加刚才创建的颜色和尺码。

根据你的实际产品选择对应的属性值,并将需要用于商品变体的属性配置好。

然后进入变体设置区域,生成或手动创建商品变体。

系统就可以根据属性组合创建不同的商品规格。

3. 为不同规格设置价格和库存

假设某款手表有黑色和白色两个版本。

你可以给黑色手表设置一个价格,再给白色手表设置另一个价格。

还可以分别上传黑色和白色商品图片,填写不同的 SKU、库存数量及其他必要信息。

如果同时使用颜色和尺码,那么每个实际销售的规格组合都应该有相应的配置。

这样客户在商品详情页选择不同颜色或尺寸时,页面就可以根据你的设置显示对应的图片、价格和库存状态。

最后保存变体并发布商品。

十三、第十一步:导入 Blocksy 网站模板,快速设计独立站首页

前面我们已经完成了商品、运费和支付相关设置。

但此时网站外观可能还是默认样式。

接下来,就要让它真正变成一个专业的跨境电商商城。

1. 进入 Blocksy 模板库

进入 WordPress 后台,找到 Blocksy 的相关管理入口。

打开 Starter Sites 或网站模板功能。

在模板列表中,可以按照网站类型或免费、付费版本进行筛选。

如果做的是电商网站,优先查看支持 WooCommerce 的商城模板。

根据自己的产品类型选择风格,例如电子产品、服装、家居或其他零售类模板。

2. 预览并导入模板

找到喜欢的模板后,先点击预览。

重点检查首页布局、商品列表、导航菜单、商品详情页以及手机端效果。

确认合适之后,再选择导入。

如果模板支持选择页面构建器,可以根据之前安装的工具选择 Elementor。

导入过程中,通常可以选择是否导入演示内容、页面、媒体和相关配置。

具体选项以当前版本的导入向导为准。

特别提醒:如果网站已经有真实商品、订单或正式运营数据,导入整站模板前务必先备份。

部分导入选项可能覆盖既有设置或增加演示内容,不建议在正式运营中的网站直接进行未经测试的整站导入。

3. 删除不需要的演示商品

模板导入完成后,可能会自动带入一些演示商品。

如果这些商品只是模板示例,就需要删除或者替换。

进入:

产品 → 所有产品

找到演示商品,按需要逐个删除,或者使用批量操作移到回收站。

操作时一定要区分演示商品和你自己已经创建的真实商品,避免误删。

十四、第十二步:使用 Elementor 修改网站首页

模板导入成功后,网站通常已经有了基本的首页结构。

接下来不需要重新设计整套页面,只要把原来的演示内容替换成自己的品牌内容即可。

1. 修改首页文字和按钮

打开网站首页,在管理员登录状态下,选择使用 Elementor 编辑。

进入编辑器后,可以直接点击需要修改的内容。

例如首页展示的产品标题、介绍文字、按钮名称等。

选中对应组件后,在编辑器中修改文字即可。

如果页面里有 Shop Now 或 Buy Now 之类的按钮,还需要确认按钮链接是否正确。

可以进入 WooCommerce 商品列表,复制对应商品的页面链接,再回到 Elementor,把链接填写到按钮设置中。

这样客户点击按钮后,就会进入指定的商品详情页。

2. 更换首页商品图片和背景

如果模板使用了演示图片,需要把它替换成自己的产品照片。

在 Elementor 中选中需要修改的图片组件或背景容器。

如果是普通图片组件,可以直接选择替换图片。

如果是背景图片,需要进入对应容器或区块的样式设置,在背景选项中替换。

这里要注意,有时候点击了页面上的图片,却没有出现背景设置,可能是因为选中了内部组件,而不是承载背景的外层容器。

可以通过 Elementor 的结构导航功能,找到对应的容器后再调整。

3. 调整图片尺寸和显示方式

商品图片替换后,可能会出现图片太大、太小或局部被裁切的情况。

可以根据页面布局调整图片尺寸、位置以及背景显示方式。

常见的背景显示方式包括 Cover(覆盖)和 Contain(包含)。

Cover 通常可以让背景铺满整个区域,但可能裁切部分图片。

Contain 则尽量保留整张图片,但可能在区域中留下空白。

选择哪一种,取决于具体图片和设计需求。

4. 设置首页商品分类入口

如果首页包含不同的产品分类,例如 Clothing、Electronics 和 Accessories,可以让这些分类分别跳转到对应的商品分类页面。

首先进入:

产品 → 分类

找到对应分类,复制分类页面的链接。

然后回到 Elementor,选中首页的对应分类按钮或文字,把链接替换进去。

这样客户点击分类后,就可以查看该分类下的全部商品。

5. 设置精选商品和热销商品

很多电商网站都会在首页展示 Featured Products(精选商品)、Best Selling Products(热销商品)或 New Arrivals(新品)等内容。

部分模板使用 WooCommerce 的商品区块或短代码来展示这些商品。

如果模板使用短代码,可以根据实际需要调整展示数量和排序规则。

例如:

[products limit="6" columns="3"]

这个短代码可以在支持 WooCommerce 短代码的内容区域中,尝试显示最多6个商品,每行3个。

如果需要展示精选商品,可以使用:

[products limit="6" columns="3" visibility="featured"]

如果需要按销量排序,可以使用:

[products limit="6" columns="3" orderby="popularity"]

需要注意,不同模板和 WooCommerce 版本可能采用商品区块、短代码或者专门的页面组件,具体设置方式并不完全一样。

修改完成后,记得保存或发布页面,并检查前台展示是否正确。

十五、第十三步:设计独立站的其他重要页面

一个真正用于销售产品的跨境电商网站,不应该只有首页和商品页面。

还应该让消费者能够了解你的品牌,找到联系方式,并明确购物和售后规则。

1. About Us:关于我们

关于我们页面主要用来介绍品牌和企业背景。

例如品牌创立的原因、主要销售什么产品、产品特点、团队背景,以及品牌希望为客户提供什么价值。

如果你是有自己工厂的中国跨境卖家,也可以在适当情况下介绍工厂实力、质量控制和产品生产过程。

真实、清晰的品牌信息,通常比大量空泛的宣传语更有说服力。

2. Contact Us:联系我们

联系我们页面可以提供电子邮箱、客服渠道和其他适用的联系信息。

前面安装的 WPForms 就可以用于创建联系表单。

通过表单,客户可以填写自己的姓名、邮箱及咨询内容,然后提交给网站管理员。

设置完成后,还要测试表单通知邮件是否能够正常收到。

3. Blog:博客

WordPress 的内容管理功能是它的优势之一。

对于希望通过 Google SEO 获得自然搜索流量的独立站卖家,可以考虑长期经营博客内容。

例如一个销售运动服装的网站,可以围绕运动穿搭、服装尺码选择、产品材质、训练服装选购等主题创作文章。

文章可以自然地推荐相关商品,并链接到商品详情页或分类页。

但是不要为了增加关键词而批量发布内容空洞的文章,应该优先回答用户真实关心的问题。

4. 配送、退货和隐私页面

正式上线前,建议根据业务和适用法律准备 Shipping Policy(配送政策)、Return & Refund Policy(退货退款政策)、Privacy Policy(隐私政策)以及 Terms & Conditions(服务条款)。

这些页面可以向客户说明配送范围、预计运输时间、退货条件、退款方式,以及网站如何处理客户个人信息。

十六、第十四步:调整 Blocksy 商品展示、页眉和页脚

除了通过 Elementor 编辑具体页面,我们还可以通过 Blocksy 的主题设置调整整个网站的外观。

在支持该功能的 WordPress 后台中,可以通过:

外观 → 自定义

进入相关设置页面。

不同版本的 Blocksy 可能会对设置位置和界面进行调整。

1. 修改网站 LOGO 和导航菜单

在页眉设置中,可以替换品牌 LOGO,调整导航菜单,并根据需要显示搜索、账户和购物车等入口。

对于跨境独立站来说,建议让客户能够比较容易地找到商品、购物车、账户页面和客服信息。

如果网站面向英语消费者,导航文字也应该使用自然、清晰的英文表达。

2. 修改网站整体宽度

在布局设置中,可以调整网站内容的最大宽度。

例如,某些网站可以使用约1200像素的内容宽度作为设计起点。

但这不是所有网站都必须遵守的固定标准,最终还需要根据模板设计和实际设备显示效果进行调整。

3. 修改商品归档页面

商品归档页面就是商店或商品分类列表页面。

通过 Blocksy 的 WooCommerce 相关设置,可以调整商品展示布局、列数、商品卡片样式以及侧边栏等选项。

例如电脑端一行显示3个或4个商品,而手机端使用更加适合小屏幕的布局。

不要只检查电脑效果,还要切换到平板和手机预览。

4. 修改单个商品详情页

打开单个商品页面的布局设置后,可以根据主题支持的功能调整内容宽度、图片布局、商品信息区域等。

部分版本还支持显示支付方式说明、商品附加信息以及其他与购物相关的内容。

建议把商品标题、价格、规格、库存状态和购买按钮放在比较容易注意到的位置,避免过多装饰元素影响购物体验。

5. 添加商品筛选功能

如果你的独立站商品比较多,商品筛选功能会非常实用。

例如客户可以按照商品分类、价格范围或其他属性筛选商品。

在支持经典小工具的主题布局中,可以进入:

外观 → 小工具

找到 WooCommerce 相关侧边栏区域,添加可用的商品搜索、分类、价格筛选或其他组件。

如果使用的是新版商品筛选区块,则应通过 WooCommerce 提供的对应区块和模板设置实现。

具体能添加哪些筛选功能,取决于当前主题、WooCommerce 版本及已安装的扩展。

6. 设置网站页脚

页脚通常位于网站最底部,主要用于放置网站导航与重要信息。

例如品牌介绍、联系我们、客户账户、配送政策、退款政策以及隐私政策等。

修改页脚时,不仅要更改文字,还应该检查每个链接是否指向正确的页面。

完成后点击发布,并在前台实际测试。

十七、第十五步:测试客户下单和 WooCommerce 订单管理

到这里,网站主要功能已经基本配置完成。

不过,正式上线前,还有一个非常重要的步骤:模拟客户下单。

1. 使用无痕窗口测试购物流程

建议打开浏览器无痕窗口,以普通客户身份访问网站。

选择一个已经发布的商品,进入商品详情页,选择相关规格,然后添加到购物车。

再进入购物车,查看商品数量、价格和配送费用。

确认没有问题后,进入结账页面,填写测试使用的客户信息。

如果启用了支付网关的测试模式,就可以按照支付服务商提供的测试流程模拟付款。

本教程视频演示中也曾使用货到付款作为订单流程测试方式。

不过,跨境电商正式运营时,不应为了测试方便而长期保留自己实际上无法履行的付款方式。

2. 查看后台订单

测试下单完成后,返回 WordPress 后台。

找到:

WooCommerce → 订单

或者在当前后台版本对应的订单管理入口中,查看新生成的订单。

打开订单,可以查看客户信息、购买商品、订单金额、配送方式、付款状态及其他相关内容。

3. 管理订单状态

WooCommerce 提供不同的订单状态,用于管理付款和履约流程。

例如待付款、处理中、已完成、已取消或已退款等状态。

卖家需要根据实际支付确认、发货进度及业务规则处理订单。

特别注意,不要因为测试中可以手动把订单改成“已完成”,就把这种操作当成真实订单的收款确认方式。

真实订单应该先核实支付状态,再按照物流和售后流程完成履约。

如果你使用第三方物流或海外仓,后期还可以研究对应的订单履约集成方案。

十八、第十六步:购买域名并绑定到 Kinsta

网站页面和电商功能都做好后,最后还需要使用自己的正式域名。

如果你之前已经购买了域名,就不需要重新注册,只需要把现有域名解析到网站主机。

如果还没有域名,可以通过域名注册商购买,例如 Namecheap。

官方网站:https://www.namecheap.com/

1. 注册跨境电商品牌域名

进入域名注册商网站,在搜索框输入你想使用的品牌名称。

例如 yourbrand.com。

如果该域名尚未被注册,就可以根据页面提示加入购物车购买。

对于主要面向欧美市场的独立站,如果合适的 .com 域名仍然可用,可以优先考虑。

选择域名时,建议尽量简短、容易记忆、方便拼写,并避免侵犯他人的品牌或商标权利。

域名费用一般根据后缀、注册商、首年优惠和续费价格而变化,通常按照年收取,而不是所有域名都按月收费。

填写注册人资料时,应提供真实、准确的信息,并按要求完成邮箱验证。

2. 在 Kinsta 添加域名

注册完成后,登录 MyKinsta。

打开对应网站的管理页面,找到 Domains(域名)设置。

点击 Add Domain(添加域名)。

输入刚刚购买的域名,并根据需要添加带 www 的域名形式。

如果没有特殊需求,一般不必额外启用通配符域名设置。

3. 配置 DNS 解析

域名添加以后,Kinsta 会根据所选绑定方式提供需要配置的 DNS 记录。

这些记录可能包括 A、CNAME 或 TXT 等类型。

简单理解:

A 记录: 通常用于把域名指向对应的 IPv4 地址。

CNAME 记录: 用于将一个主机名指向另一个主机名。

TXT 记录: 可以用于域名所有权验证或其他配置。

Kinsta 当前提供不同的域名连接流程,所需记录并不一定相同。

因此,不应该直接照抄其他网站提供的 IP 地址或记录值。

正确方法是打开 Kinsta 当前为你的网站显示的 DNS 配置要求,然后到域名实际使用的 DNS 服务商后台,逐条添加相应记录。

4. 在 Namecheap 添加 DNS 记录

如果你的域名使用 Namecheap 的 DNS 管理,可以进入账户中的域名管理页面,找到相应域名,再进入 Advanced DNS 等相关设置。

根据 Kinsta 提供的记录类型,依次填写 Host、Value 或目标地址等信息。

每添加一条记录,都要仔细检查是否与 Kinsta 提供的内容一致。

如果此前已经存在冲突的记录,应先确认用途再修改,避免影响正在使用的网站或企业邮箱。

DNS 记录保存后,可能需要一段时间才能完成解析和验证。

5. 设置主域名和 HTTPS

当 Kinsta 检测到域名解析正确后,就可以按照后台提示设置主域名。

例如,你可以决定让网站主要使用:

或

两种形式可以通过适当配置实现统一跳转。

接下来,还需要确认网站 SSL 证书已经正确启用,并检查 HTTPS 访问。

HTTPS 可以为浏览器与网站之间的通信提供加密保护,是电商网站的重要基础安全措施之一。

完成这些配置后,再打开正式域名,就应该能够访问你搭建的 WordPress 电商网站。

十九、独立站正式上线前,还应该做好哪些 SEO 优化?

前面介绍的主要是技术搭建流程。

但对于真正想通过跨境电商独立站长期销售产品的中国卖家来说,网站上线只是第一步。

如果希望以后通过 Google 搜索获得潜在客户,还需要做好基础 SEO。

1. 设置清晰的网站固定链接

进入 WordPress 的固定链接设置,选择适合网站结构的 URL 形式。

商品页面建议使用简短、具有描述性的英文链接,尽量避免复杂、没有意义的参数。

如果已有网站被搜索引擎收录,修改固定链接时需要考虑重定向,避免造成原有页面失效。

2. 优化商品标题和描述

商品标题应该准确说明产品是什么,并自然包含用户可能搜索的相关词语。

例如,销售女士运动服装时,可以结合实际商品特点使用 Sports Leggings、Yoga Pants 等词语。

但不能为了 SEO,把大量无关关键词堆积到商品标题里。

商品描述也应该介绍消费者真正关心的信息,比如面料、尺码、颜色、使用场景和保养方式。

3. 优化网站加载速度

网站速度会受到主机性能、图片大小、插件数量、页面脚本、缓存及访问者网络环境等因素影响。

对于面向美国或欧洲的独立站,如果服务器位置、CDN 和缓存配置合理,通常能够改善部分访问场景下的加载体验。

这也是为什么在前面的建站工具中,比较推荐对 WordPress 和 WooCommerce 有专门优化的主机。

如果你准备长期经营独立站,特别是商品数量较多、客户主要来自海外,或者对网站稳定性要求较高,可以重点了解 Kinsta。

➜ 查看 Kinsta 高性能 WordPress / WooCommerce 主机

https://bit.ly/4xqDO52

如果预算有限,则可以先对比:

Hostinger:https://bit.ly/3BysRqP

SiteGround:https://bit.ly/4yv1xSu

最终根据你的订单量、访问规模、功能需求和预算选择即可。

4. 做好移动端购物体验

很多海外消费者会通过手机浏览电商网站。

因此,建议重点测试手机端的商品图片、规格选择、加入购物车按钮和结账流程。

如果客户需要不断放大页面、横向滚动,或者很难找到购买按钮,就应该调整移动端布局。

Blocksy 和 Elementor 都提供一定程度的响应式布局设置,可以帮助你针对不同设备优化页面。

5. 使用 Google Search Console

网站正式上线后,可以将域名添加到 Google Search Console。

官方网站:https://search.google.com/search-console/about

通过它可以了解网站在 Google 搜索中的表现,包括哪些页面获得了曝光、用户通过哪些搜索词找到网站,以及是否存在部分页面索引问题。

配合网站内容更新和商品页面优化,可以逐步完善独立站的自然搜索表现。

需要注意,安装 WordPress 或使用某款主机,并不意味着网站会自动获得较好的 Google 排名。SEO 仍然需要持续积累内容、优化页面和改善用户体验。

二十、中国卖家做跨境电商独立站,常见问题解答

1. WordPress 搭建跨境电商独立站需要会代码吗?

通常不需要。

通过 WordPress、WooCommerce、Blocksy 和 Elementor,可以在不编写代码的情况下完成大多数基础电商网站功能。

但如果需要非常复杂的产品定制、会员规则、特殊运费或第三方系统对接,仍然可能需要专业开发人员协助。

2. WooCommerce 是免费的吗?

WooCommerce 核心插件可以免费使用。

但完整网站可能涉及域名、主机、付费主题、插件、交易手续费及后续维护成本。

因此,“插件免费”不等于“网站运营完全免费”。

3. 中国卖家能用 WooCommerce 做美国市场吗?

可以。

WooCommerce 本身可以用于搭建面向美国消费者的独立电商网站。

但实际销售还需要考虑商品合规、国际物流、税务、售后政策和支付渠道等问题。

网站能够搭建成功,不代表所有跨境经营条件都已经满足。

4. WooCommerce 可以接 PayPal 和 Stripe 吗?

可以通过相应的支付插件进行集成。

不过,商家必须先具备符合对应服务商要求的账户和业务资格,并完成授权及收款配置。

不同国家或地区的账户,可用功能可能存在差异。

5. 没有美国公司可以做跨境独立站吗?

可以搭建和运营跨境独立站,但具体能够使用哪些收款工具、物流服务,以及涉及哪些法律和税务要求,需要根据实际经营主体判断。

并不是所有卖家都必须先注册美国公司。

如果你确实准备通过美国主体开展业务,可以先了解相关注册和维护要求。

美国公司注册教程:https://www.youtube.com/watch?v=B_kCNiQ3Icw

Northwest 注册平台:https://bit.ly/45fPEnB

6. WordPress 独立站适合哪些行业?

WordPress + WooCommerce 可以用于很多类型的零售电商网站,例如服装、箱包、宠物用品、电子配件、家居、运动用品等。

此外,WordPress 还可以用于 B2B 企业官网、外贸询盘网站、品牌展示网站,以及结合内容营销的商业网站。

具体适不适合,需要综合考虑商品属性、网站功能、订单规模及技术维护能力。

7. 新手选择 Kinsta、Hostinger 还是 SiteGround?

如果你主要是学习建站、测试产品或者刚开始经营,通常会更重视预算和操作便利性,可以先比较 Hostinger 和 SiteGround 的合适套餐。

如果你准备长期建设品牌网站,希望获得专门的 WordPress 托管、备份、缓存和站点管理功能,也可以考虑 Kinsta。

但任何主机都不能保证网站永远不会宕机,或者在所有访问场景下都具有相同的速度。

建议根据自己的实际业务量进行选择,而不是只看宣传参数。

二十一、总结:从零搭建跨境电商独立站,其实没有想象中那么难

看到这里,我们已经完整介绍了使用 WordPress + WooCommerce 搭建跨境电商独立站的主要流程。

从一开始选择域名和网站主机,到安装 WordPress、WooCommerce、Blocksy、Elementor,再到创建商品、设置不同规格、配置运费和税费、连接 PayPal 与 Stripe、设计商城页面,以及最后测试订单并绑定正式域名,基本覆盖了一个新手独立站从创建到上线需要了解的重要环节。

当然,一个真正能够赚钱的跨境电商独立站,并不只是把网站搭建出来那么简单。

后面还需要研究选品、定价、供应链、支付成功率、国际物流、售后服务,以及 Google SEO 和其他流量获取渠道。

但建立一个属于自己的电商网站,是开始品牌独立运营的重要一步。

如果你也准备搭建自己的 WordPress 跨境电商独立站,下面这些就是本教程用到的主要工具和相关资源。

WordPress 跨境电商独立站建站资源汇总

Kinsta — 高性能 WordPress 主机,适合 WooCommerce、电商独立站及高流量网站

➜ 点击访问 Kinsta 主机

https://bit.ly/4xqDO52

Blocksy — WordPress 电商网站主题

➜ 点击下载 Blocksy 主题

https://bit.ly/4xxE7L5

Elementor Pro — WordPress 可视化页面构建器

➜ 点击访问 Elementor Pro

https://bit.ly/4cuQ8IF

Hostinger — 高性价比 WordPress 主机,适合新手建站

➜ 点击访问 Hostinger

https://bit.ly/3BysRqP

SiteGround — 专业 WordPress 托管服务

➜ 点击访问 SiteGround

https://bit.ly/4yv1xSu

Northwest — 美国 LLC 公司注册及注册代理服务

➜ 点击访问 Northwest

https://bit.ly/45fPEnB

美国公司注册教程 — 了解非美国居民如何注册美国公司

➜ 观看美国公司注册完整视频教程

独立站搭建遇到问题?欢迎加入有风的知识星球

如果你正在学习 WordPress 建站、跨境电商独立站、美国公司注册,或者准备研究海外收款与网站运营,可以加入我的知识星球,一起交流建站经验。

无论是 WordPress 主机选择、WooCommerce 电商设置,还是如何规划自己的跨境独立站,都可以在圈子里交流讨论。

➜ 点击加入有风的知识星球,交流跨境电商与独立站建站经验

https://t.zsxq.com/16QP9JP8b

希望这篇教程能够帮助你把跨境电商独立站真正搭建起来。

不要因为自己不懂代码,就觉得做网站是一件很困难的事情。先把基础功能搭建好,再根据客户反馈和实际订单不断优化网站,通常比一开始就追求所有高级功能更加实际。

联盟推广说明: 本文部分工具链接属于联盟推广链接。如果你通过这些链接购买符合条件的产品或服务,我可能获得一定佣金,但通常不会因此额外增加你的购买费用。请根据自己的需求、预算和平台最新条款选择合适的服务。