WordPress外贸商城网店网站搭建教程！一年最低只要500多块

大家好，我是有风，在这段视频中，我将教大家如何使用WordPress创建一个专业且美观的电商网站。

在设计这个网站时，我借鉴了世界上一些顶级电商网站的设计和功能，比如亚马逊、Flipkart、沃尔玛和淘宝、速卖通、阿里巴巴等。

我们将要创建的网站具备许多高级的功能，包括内置弹出窗口生成器、先进的Mega菜单(超级菜单)、自定义配送选项、直接购买按钮、客户帮助中心、愿望清单功能、产品对比功能、自动跟踪、等多个强大的功能。并且，这个网站完全适配移动设备和平板，还经过SEO设置优化，帮助你在Google搜索结果中获得更好的排名。

►向有风咨询，加入我的知识星球圈子：
➜https://t.zsxq.com/16QP9JP8b

有风用到的AI工具
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
►hostinger 网站主机域名
➜https://bit.ly/47UlunQ

►Motta 电商主题
➜https://1.envato.market/rQ9B95

►阿里云.中国网站服务器租用
➜https://bit.ly/3V1GiGY

►elementor
➜https://bit.ly/3wzeqQH

►stripe 支付收款
➜https://stripe.com/zh-hk

►本期视频文字脚本
➜https://aiyoufeng.com/wordpress-woo

►stripe企业开户教程
https://www.youtube.com/watch?v=B_kCNiQ3Icw

►stripe个人开启教程
https://www.youtube.com/watch?v=3lXG8NMp3MA

► 图标下载
➜ https://flowbite.com/icons/
➜https://www.svgrepo.com/

► 本期用到的素材
➜https://drive.google.com/drive/folders/1rP6Fw1qHX53E4K4ykm5oCB54yR9sh8sQ?usp=sharing

►ColorZill 屏幕取色器
➜https://chromewebstore.google.com/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=en

►Shopify 3天免费试用，首月仅需1美元
➜ https://bit.ly/3Xq89AJ

►邮件营销GetResponse
➜https://bit.ly/3RmFRoG

► leonardo AI生成图片
➜https://bit.ly/3yTr0LO

►chatGPT
➜https://chatgpt.com/
➜升级到GPT4会员教程：https://www.youtube.com/watch?v=64SkKkPTAg4

► midjourney AI生成图片
➜https://www.midjourney.com/

► midjourney+ChatGPT 账号合租平台、账号购买
➜https://nf.video/C1dxn

► 办一张国外银行卡
➜https://wildcard.com.cn/i/19YC7OIQ

你不需要任何技术或编程知识，只需简单的拖放操作就能完成整个网站的搭建。在开始创建之前，我先给大家快速的展示下网站，这就是我们在这段视频中要制作的网站。

首先，顶部有一个网站头部，我们提供了10到12种不同的预设头部样式，如果你不喜欢默认的头部样式，可以选择其他的设计。接下来是搜索栏，用户只需输入一两个字母，系统就会自动推荐相关的结果。这是一个实时搜索功能。接着是我的账户页面和愿望清单页面。

左侧有一个分类菜单，如果你有多个类别，可以在这里创建类似的菜单，我们还将学习如何创建Mega菜单（超级菜单）。接下来是一个轮播广告，我会教大家如何创建这些美观的轮播滑块。下拉页面后，我们可以看到一些横幅广告，这些广告可以用来展示不同的产品类别。

我们还有一个产品轮播展示，在这里，打折产品的销售倒计时显示得非常直观。用户可以将产品加入购物车，成功加入后会弹出一个提示框，并推荐类似产品。用户还可以将产品加入愿望清单，或者进行产品对比。

接下来，我们打开一个单一产品页面，比如一台笔记本电脑。通过这段视频中的步骤，你可以为任何类型的产品创建一个电商网站，无论是电子产品、美妆、家电还是时尚服饰等。你还可以为产品设置自定义标签，显示产品的评论数量、价格等信息。如果是多个SKU产品，比如笔记本的不同处理器选项，选择不同的配置后价格也会相应变化。

如果你不想经过购物车页面，可以直接点击“立即购买”按钮，直接跳转到结算页面。在结算页面中，你可以选择支付方式，比如网上银行、信用卡、PayPal等，还可以使用优惠券。我们也会教你如何创建这些优惠券，如何设置不同的配送和税费，比如对不同城市设置不同的快递费。

在产品页面的底部，你还可以添加一些额外的标签，例如“免费配送，3天内到货”等自定义信息。还有产品描述部分，你可以随意设计描述内容，也可以在描述中上传视频或图片。此外，产品评论、额外信息、退货政策等都可以通过自定义选项添加。

这个网站还支持非常强大的过滤功能，比如按照品牌、评分或者折扣来筛选产品。我还会教你如何创建弹出窗口，比如在新窗口中展示优惠信息的弹窗，用户可以输入优惠码获得折扣。

最后，网站还有一个非常重要的功能——帮助中心。我们会为客户创建一个文档页面，让他们可以查询订单取消、包裹跟踪等信息。此外，我还会展示如何创建博客页面、关于我们页面、联系我们页面以及订单追踪页面。客户可以通过账户页面查看他们的订单详情，包括订单日期、订单号、运费、支付方式等。

总之，这个网站的功能非常丰富，如果你喜欢这个网站，想要自己动手创建，记得把本期视频看完，如果你在观看过程中有任何疑问或建议，请在评论区留言。

2、主机和域名购买

现在，让我们开始创建这个网站。无论你要创建的是电商网站、简单博客、企业网站、会员网站还是其他类型的网站，首先需要两样基本的东西：域名和主机账户。

域名简单来说就是你的网站名称或网址。例如：https://aiyoufeng.com/这些都是不同的域名。当别人想访问你的网站时，只需在浏览器地址栏输入这个域名即可进入你的网站。

其次，最重要的就是主机。主机其实就是一个服务器或计算机，你的网站的所有内容，包括页面、产品、数据库等，都会保存在这个服务器上。这个服务器需要全天候24小时运行，这样无论用户在何时何地访问你的网站，网站都能正常展示。因此，主机对于你的网站至关重要，因为网站的速度、性能、用户体验、搜索排名甚至安全性都与主机密切相关。

如果你选择一个好的主机，网站的速度和性能都会很棒，用户体验也会更好，网站的安全性也更高，不容易遭受攻击或入侵，搜索引擎排名也会有所提升。反之，如果选择了劣质主机，所有的这些效果都会大打折扣。

市面上有成千上万的主机服务商，但真正值得选择的并不多。我测试下来国外不错的就有hostinger”，你可以点击视频描述中的链接，访问我们使用的主机服务——Hostinger。

我们选择的是Hostinger的托管WordPress主机，这是专门为使用WordPress搭建网站而优化的主机。

除了价格实惠，它也是市场上性能最好的一款主机服务，并且受到了WordPress官方推荐。

在Hostinger页面上，你会看到它在TrustPilot上有很高的评分和好评。此外，还有三个不同的套餐可供选择：Premium、Business 和 Cloud Startup云计算初创企业。如果你想省时省力，我建议你直接选择最实惠的Business套餐，点击选择套餐按钮，开始创建网站。

选择Business套餐后，你可以在同一主机上创建多达100个网站。比如今天你创建了一个电商网站，明天想为朋友、客户或自己再创建一个博客或另一个电商网站，你都不需要购买额外的主机。

该套餐还包括200 GB NVMe 存储空间，这对于多个网站来说已经足够多了。而且NVMe存储是目前最快的存储方式，能大大提升网站的加载速度。此外，你还可以免费获得域名、预建模板和主题、SSL证书以及更多与WordPress相关的功能。

接下来，你只需选择主机的购买时长，建议至少选择两年或四年的方案，这样可以享受更多的折扣和优惠。创建账户后，选择适合你的支付方式，例如信用卡、PayPal、支付宝等，完成付款即可。

3、安装wordpress

4、wordpress基本设置 A、首页预览 B、如何进后台 C、后台清理整洁干挣 D、文章、媒体等左边功能简介绍下 E、设置>通用允许注册及改网站名，固定链接 F、回hostinger可以再装100个网站

4、安装插件

A、elementor

5、安装主题 motta 多供应商和市场 WordPress 主题下载

这个链接已经在视频描述中提供，这是我们将使用的主题：Motta 主题。性价比非常高。

这是一个高级主题，需要购买。目前售价仅为39。不过，不用担心，这只是一次性付款，不需要持续订阅。一旦支付了$39，你可以终身使用这个主题，未来的所有更新、设计和新功能也都将免费获得，不需要再额外支付任何费用。

另外，你还会获得6个月的免费技术支持。从购买主题的那天开始的6个月内，如果你在安装或使用中遇到任何问题，都可以提交工单，他们会帮助解决。而不用担心遇到技术问题。

购买流程非常简单，点击“加入购物车”按钮，完成购买后，在网站的右上角会看到你的用户名。将鼠标悬停在用户名上，点击“下载”，在下载页面选择第二个选项：“可安装的WordPress文件”。然后你会下载一个ZIP文件，这就是我们接下来要上传到你的网站的主题文件。

接下来，你需要回到WordPress的后台管理界面，依次点击“外观”-> “添加新主题”-> “上传主题”，选择刚刚下载的ZIP文件，点击“安装”，最后点击“激活”。激活后，系统会提示你安装一些必要的插件，你只需按照提示操作即可。

5、安装所有必须插件，并激活

A、首页预览看看

B、后台刷新看看

6、woo设置

A、可以将你的网站转化为电商网站，先设下地址 B、产品>• **General：Enable taxes 启用税收 C、产品>• **Size Guide尺码指南：Guide Display>By clicking on a button， Button Position>Beside the Size attribute (for variable products only) 尺寸属性旁边（仅适用于可变产品也就是多SKU）

D、Product Tabs 产品标签启用

E、TAX>Additional tax classes把这个框拉大，加入美国的话就是销售税（Sales Tax）， google搜usa Sales Tax，查看各州税率。 https://taxfoundation.org/data/all/state/2024-sales-taxes/

把Sales Tax 7%加进去，销售税（Sales Tax），保存

F、点到Sales Tax 7%，设置美国的税收：国家代码US，Rate %为7%，Tax name为Sales Tax 7%，Shipping勾去掉。

G、**Shipping快递运输>Add zone，**Zone name为美国阿拉斯加，Zone regions为Alaska, United States (US)

左下角保存Save changes，

Add shipping method增加快递方式：包邮Free shipping

再点左上角：Classes>Add shipping class：电子产品，再加一个大家电。

Shipping zones ：Add zone：美国其他地区，这次运费选Flat rate，

格式为15 * [qty]，

再设一个满200包邮。

7、Payment付款方式

A、安装插件：Payment Plugins for PayPal WooCommerce

https://stripe.com/global 支持国家

https://www.youtube.com/watch?v=B_kCNiQ3Icw stripe企业开户教程

https://www.youtube.com/watch?v=3lXG8NMp3MA stripe个人开启教程

B、启用插件，连接到账号

C、到stripe里面去申请微信和支付宝权限

8、帐户和隐私

A、前面4个打勾

9、高级

A、增加一个Order Tracking Page 页面，命为为Order Tracking 订单查询

B、google搜：woocommerce shortcodes

https://woocommerce.com/document/woocommerce-shortcodes/

C、复制 [woocommerce_order_tracking]，页面插入简码放进去。

D、回到高级，把页面选进去

10、产品上架

A、左边产品

B、单SKU产品

设置标题，常规：单个产品原价，促销价。库存：SKU写型号，库存管理勾上，数量100 配送：

C、右边上传图片

GPT提示：我准备用midjourney这个AI图片生成平台生成产品图片，要求产品背景和白底，你现在扮演专业的ai图片prompt提示词生成大师，请根据我的主题帮我生成5个不同的promt

分类（平板电脑）及标签，品牌

发布预览下

D、为产品页启用elementor.

要想让产品页更好看，得用到elementor.

左边Elementor>设置>文章类型全部勾上

11、回到产品页

刷新，用elementor编辑。

A、新增一个向下的容器，拖入 motta heading，输入文字：Windy Pro，字号38，粗细600.

B、拖入网格在下面，改成2列1行。

C、第一个行拖入文本框，字体默认，字号24，粗500，行高32，改颜色为黑并保存为全局颜色方便下次调用。发布

D、更改全局颜色：左上角站点设置>全局字体全部改为默许。

E、右边也拖入文本框，字号16，粗400，行高32，颜色用刚才一样的颜色。

F、增加右容器，里面再拖入一个下容器，复制一个容器得到两个并列一行。左边拖入图片。

右边也拖入图片并复制一个，然后显示为原图，样式宽度为80%。

G、**More information，**增加下容器，拖入文本框，文字复制进来，选中容器高级外距左右20%

H、更改移动端，手机高级外距0。

12、多sku产品

A、产品>属性:

硬盘容量、启用归档。并配置类别：500G，1TB 处理器、启用归档。并配置类别：英特尔 I5，I7，I9等。

B、上架“

标题：有风笔记本电脑 Go，12.4 英寸触摸屏，酷睿 i5 冰蓝色

产品数据：可变产品。常规：税收可以加。库存：SKU为 Laptop001. 配送：填上数据。

属性：选处理器，属性值I5、I7、I9，保存，硬盘容量同样设置。变量：生成变体，增加价格，设置默认展示产品。右边信息补充完，类目，标签，图片等。发布预览下。

C、标题上的小标：新品，更改地址产品数据>高级>Custom Badge Text。

D、产品分类加图片，brands类别加图片

E、Product Tabs：增加 Shipping & Returns

内容框下面：Tabs Settings ，可以设置显示的位置。

13、增加优惠券

A、营销>优惠券

14、首页制作

A，新建页面为首页，下拉Hide Page Header 勾上，预览看看。

B、设置>阅读设为首页。

C、页面：首页>编辑： Category Menu Display 改为one page load. 首页为自动加载超级菜单。

15、首页：使用elemantor编辑。

A、轮播图：容器为两列，

右边拖入motta slides，删除两个，留一个， title为：时下最热， subtitle为新品NEW。 description为：产品直发，一件也包邮. 按纽链接：搜 shop.,按纽文字为马上购买。背景图设置：backgroud，复制一个更改背景。样式：边框圆角为3.

样式>content：宽度为300，文字颜色都改为白。按纽颜色：Primary butter>extra options，背景改为白色。加上轮播按纽：样式>slider options, arrows位置为右下，dots位置为左。更改手机：arrows的item options的尺寸和宽度改为0.让其不显示。更改手机：dots的Vertical Spacing: 垂直间距,Horizontal Spacing: 水平间距都改为16。更改手机：宽度200，content间距为18 20 18 20。手机：轮播图顶上的容器隐藏：高级>响应式>在手机纵向隐藏。手机：轮播图容器>高级外距为内距全为0.

B、4个图标

增加容器为网格：3列，左边列数改为4. 拖入 motta icon box到第一列。下载图标： https://flowbite.com/icons/https://www.svgrepo.com/ 顺丰包邮，订单满99元。图标位置为左。

样式：content. title字号14，spacing为2. description字号14.

样式：icon. 居中对齐。spacing为15，size为30.颜色为灰。

样式：content.：居中。

再复制三个到后面，改更相关的内容。高级再更改内距上25下35..发布。

更改手机：选中图标容器>布局列数为2. 更改手机：选中第一个图标>内容图标位置为TOP,再到样式改为居中。其他几个粘贴样式。

C、分类增加容器为网格：3列，左边列数改为4.

拖入motta banner image.改里面的文字为：小家电等。改背景：右边media.居中居中，背景尺寸为contain. 样式：高度为400，改字体颜色为绿#99BC49。按纽primary button>skin为subtle，extra options按纽文字颜色为绿。其他三个粘贴进去就可以了。更改手机：更改为两列。间距10. 标题字号24，描述14，标题行高1em，再改其他三个。平板：改为三列，最后一列选中>高级响应式>隐藏，样式行高为360.

D 、产品轮播区

拖入下容器，motta product deals carousel heading：仅限24小时！机会难得，快来抢购！距离促销结束还有，查看全部商品，link用shop(https://youfengai.com/shop/). products:选on sale，产品分类选下。 Carousel Settings：slides to show两个为4.。样式>heading 位置为左。下拉Time 背景色为蓝#0A113E，文本色为灰选中整个容器>高级间距上50下30。

手机：复制一个。把原区块隐藏：然后点中高级响应式隐藏。手机：在复制的这个上：样式 heading位置TOP。并把这个区块在电脑上隐藏。平板：把刚才复制的隐藏。

E、产品分类

拖入下容器，加入motta heading.:今天想买点什么？（字号26，粗600），link到shop，button text为查看全部。增加网格：3列。把上面的分类直接复制下来改背景就可以。更改里面的文字。样式>banner ：Horizontal Position和Alignment改为居中。height为370。样式>content ：primary button的skin为ghost。再复制两个一样的。

样式>content ：description的spacing为10. 手机：点中第一个分类>样式 height为320，另外两个粘贴样

F、小区块分类增加容器为网格：3列，左边列数改为6.

加入 motta image box：更改图片及文字，链接放分类目类链接，去产品里面建一个分类。样式更改图片的spacing为10，标题字号为24。图片加圆角6。再复制5个。改内容手机：改成两列。

G、底部三列

增加下容器：加motta product listing.中间精选产品为空，到产品里面去设为精选产品。增加内距上50下30.

16、博客

A、新建博客

B、设博客为文章

C、演示写文章

17、帮助中文

A、help center，增加分类和文章，AI写。

https://flowbite.com/icons/ 加图片。

B、 elementor写文章

增加两列容器。左65%，右35%。左边拖入：文本编辑器加入内容。

C、再写一篇文章。

D、新页面为帮助中心

Header Section：headewr v12 Header Background：transparent Hide Page Header ：勾上 Content Top Spacing：no spacing

使用elementor编辑导入之前的模板：https://drive.google.com/drive/folders/1rP6Fw1qHX53E4K4ykm5oCB54yR9sh8sQ?usp=sharing。

并改为中文，再加一个模板共三个更好看。有什么可以帮到你加背景色。点到对应的文章而，顶部自定义>help center>header layout:选header v12，header transprent打开选dark. 自定义>help center>seach bar：backgroud color改为#B4F4DE，spacing top为150。发布

18、关于我们

A、Header Section：headewr v12，

Hide Page Header ：勾上

使用elementor编辑

导入about us页面。 https://www.pexels.com/search/team/ 搜team，换图片。

19、联系我们

A、Header Section：headewr v12，

Hide Page Header ：勾上

使用elementor编辑

导入about us页面。

底部：我们期待收到您的来信表单设置：进入后台>联系：Contact form 1 更改里面的内容，google网盘下的。Contact Form这个文本。复制里面的内容替换掉原内容。再把短代码换了就可以了

20、菜单

A、新建菜单顶部主菜单

选上：首页 (Home) 博客 (Blog) Shop (Shop in English) 关于我们 (About Us) 帮助中心 (Help Center) 联系我们 (Contact Us) Order Tracking 订单查询勾上：Primary Menu和Secondary Menu

B、底部菜单

建三个底部菜单：前两个随便选些菜单，第三个增加woo相关的菜单。建顶部左侧菜单：显示选项把产品类别显示出来。显示位置勾上这个Category Menu。顶部轮播图缝隙太大：首页>项部编辑页面 Content Top Spacing 改为no spacing，Header Section为v2。顶部菜单有重复：菜单>主菜单> Secondary Menu去掉。

C、建顶部左侧菜单改为超级菜单

第一个：

在菜单名字下面平板电脑：Options Mega Menu 点进去启用下。 Mega Menu：Mode为默认，width为自定义870。 Icon：https://flowbite.com/icons/ 找一个图标，Background Color为彩色，Color为白色。

加图片： Mega Menu：Mode为grid。 Add a row，拖动更改点比，左边为45%。在左边的Mega Menu Items里面把heading加进来，更改文字为新品，加上链接，选bold。重复加更多菜单：在左边的Mega Menu Items里面把heading加进来，更改文字为新品，加上链接，选bold。如果想在两个菜单之间留空间：新建一个选empty。

右边图片区域菜单：Taxonomy Grid 在左边的Mega Menu Items里面把Taxonomy Grid加进来，设置显示数limit为3、6、9.

第二个：

在菜单名字下面笔记本电脑：Options Mega Menu 点进去启用下。 Mega Menu：Mode为grid，width为自定义870。

Icon：选图片

Mega Menu： Add a row 拖动更改点比，左边为36%。在左边的Mega Menu Items里面把heading加进来，更改文字为新品上市，不加链接，选lable。再加一个空白：在左边的Mega Menu Items里面把heading加进来，选empty。再加一个菜单 XX新品：在左边的Mega Menu Items里面把heading加进来，选empty。

右边：在左边的Mega Menu Items里面把baner加进来.加入图片，标题等。重复再加1个。

21、shop页面

A、在shop页顶部自定义。

B、自定义 ▸ Header> Header Layout 选 header v2。

C、自定义 ▸ Header >Account 眼睛勾上你想要的内容。发布预览

D、查看手机，更改手机不想出现的内容。自定义 ▸ Header>Hamburger,选择手机上要显示的菜单内容。

更改顶部样式：自定义 ▸ Shop> Page Header>Page Header Style：选Standard (image and text)，更改图片。

22、底部菜单

后台：模板>导入模板 footer section. 使用elementor编辑。更改里面的内容。

后台：模板>Footer Builder>add new 命名为底部菜单并使用 Elementor 编辑，导入模板 footer

把footer加入首页：首页>顶部自定义>Footer 选上刚才建的底部菜单。

加入邮件订阅弹窗。https://www.getresponse.com/

23、加边栏

外观>小工具:

A、Catalog Sidebar分类侧栏： Motta – Products Filter（价格、处理器、品牌、评分等），保存到https://youfengai.com/shop/ 去预览。

B、单品页侧栏Single Product Extra Content：Motta – Icon Box，增加图标：https://flowbite.com/icons/，颜色用灰。文字：此商品免费送货和退货 3-5 个工作日内送达发布预览。查看详情加链接：#tab-shipping-returns 跳到Shipping & Returns卡片上。

C、博客页加边栏 Blog Sidebar

增加：搜索增加：Motta – Popular Posts 增加：Motta – Social Links：https://www.youtube.com/@Windyyoufeng 增加：产品分类列表。