如何全新安装和配置 WooCommerce 及 Storefront 店面主题?

如何全新安装和配置 WooCommerce 及 Storefront 店面主题?

在使用 WordPress 启动 WooCommerce 商店时,Storefront 是最灵活和可扩展的主题之一。由于其干净的代码架构,它在用户中非常受欢迎,目前超过 100,000 个在线商店使用 Storefront 作为他们的 WordPress 主题。

安装 WooCommerce 店面主题

您可以通过两种方式安装 Storefront WordPress 主题,方法是从仪表板搜索主题或手动上传主题。


使用 WordPress 仪表板安装

安装 Storefront 的最快方法是通过 WordPress 仪表板。按照以下步骤通过 WordPress 仪表板安装 Storefront。

  1. 转到外观> 主题> 添加新的
  2. 在搜索框中输入 “Storefront ”,然后按 Enter 键。
  3. 将鼠标悬停在 Storefront 屏幕截图上。
  4. 选择 “ 安装 ” 按钮。
  5. 单击 “ 激活”

手动安装 Storefront

  1. 从 wordpress.org 下载最新版本的 Storefront
  2. 转到外观> 主题> 添加新的
  3. 单击 Upload Theme 并选择以前下载的 zip 文件。
  4. 单击立即安装
  5. 单击 “ 激活”

购买中文版:

https://mall.weixiaoduo.com/item/storefront


设置主页

Storefront 有一个经过深思熟虑的内置主页模板。其干净的结构将帮助您的受众轻松找到您销售的产品。默认的 Storefront Homepage 模板中有 6 个部分。但您可以根据需要添加或删除该部分。查看此演示,以便清楚了解 Storefront 主页。
默认主页部分:

  • 页面内容
  • 产品类别
  • 最新产品
  • 特色产品
  • 热门产品
  • 销售产品
  • 最畅销的产品

分配主页模板

要设置主页模板,请按照下列步骤操作:

  1. 转到仪表板 – > 页面并创建一个标题为 “ 主页 ” 或任何您喜欢的页面。
  2. 添加您喜欢的任何欢迎内容,这些内容将显示在产品上方。
  3. 在右侧,您会看到一个标题为 “ 页面属性 ” 的框
  4. 从 “ 模板 ” 下拉列表中选择 “ 主页 ” 。
  5. 单击 “ 发布”或 “ 更新”以保存更改。

显示主页模板

发布页面后,现在您必须将此主页显示为您网站的首页。因此,任何登陆您网站的人都会首先看到此页面。要进行此设置,请按以下步骤操作:

  1. 转到仪表板> 设置> 阅读
  2. 在您的主页显示下选择静态页面(在下面选择)
  3. 在 “ 主页”下拉列表中选择以前的主页模板分配页面。
  4. 单击 “ 保存更改”

重新排序店面主页部分

您可以使用挂钩或使用名为 Homepage Control 的插件更改 Storefront Homepage 部分的顺序。请按照以下步骤重新订购您的主页部分:

  1. 下载并安装主页控制
  2. 转到外观 – > 自定义 – > 主页控制
  3. 根据需要拖动并重新排序部分。
  4. 单击 “ 保存并发布”以保存更改。

配置菜单

在店面主题中,您可以在 3 个位置显示菜单。

  1. 主菜单 – 显示在站点徽标下方。
  2. 二级菜单 – 在搜索框附近的徽标旁边。
  3. 手持菜单 – 移动设备菜单。

设置菜单

默认情况下,如果未设置特定的主菜单,WordPress 会将您的所有页面显示为主菜单。有时它会让用户感到困惑,并且很难弄清楚这些页面是如何进入菜单的。


创建新菜单并向其添加页面

  1. 转到 “管理” 面板,然后选择 “外观”>“菜单”
  2. 在顶部,您将找到 “菜单名称” 字段。在这里写下您的菜单名称。
  3. 从左侧单击 Pages(假设您要将页面添加到菜单)
  4. 单击 “查看全部” 以获取所有已发布页面的列表。
  5. 勾选要在菜单上显示的页面。
  6. 选择页面后,单击 “添加到菜单” 按钮。
  7. 拖放菜单项以根据您的喜好重新排列它们。
  8. 单击保存菜单

分配菜单

创建菜单后,将菜单指定到要显示的位置。导航到外观> 菜单> 菜单设置,然后从显示位置复选框中选中位置


添加类别菜单

  1. 转到 “管理” 面板,然后选择 “ 外观”>“菜单”
  2. 单击左上角的 “ 屏幕选项”,然后选中 “ 产品类别”
  3. 现在,在左侧窗格中将显示 “产品类别” 选项卡。
  4. 单击 “产品类别” 选项卡以展开,选择类别
  5. 选择后,单击 “ 添加到菜单”按钮。
  6. 拖放菜单项以根据您的喜好重新排列它们。
  7. 单击 “ 保存”菜单

小工具设置

店面允许您在 3 个不同区域中显示六个小工具区域。

  1. 侧栏 – 主站点内容的左侧或右侧,
  2. 标题下方 – 位于网站标题下方和内容上方。
  3. 页脚列 1 – 页脚区域
  4. 页脚列 2 – 页脚区域
  5. 页脚列 3 – 页脚区域
  6. 页脚列 4 – 页脚区域

设置 WooCommerce

安装 WooCommerce

  1. 转到仪表板> 插件> 添加新 > 搜索插件
  2. 搜索 “WooCommerce”。
  3. 单击立即安装
  4. 单击 “ 激活”

配置 WooCommerce

激活 WooCommerce 后,系统会提示您使用向导安装 WooCommerce。它将处理所有初始设置。它分为 6 个部分。

  • 页面设置 – 自动配置基本页面(商店,购物车,结账,我的帐户)。
  • 商店位置 – 配置商店位置,货币和销售税
  • 装运 – 配置重量单位和尺寸单位
  • 付款 – 设置付款网关。
  • 主题 – 安装兼容 WooCommerce 的主题。
  • 就绪 –(可选)允许 WooCommerce 收集使用信息。

您可以随时通过 WooCommerce 仪表板进行所有这些设置。


将产品添加到 WooCommerce

  1. 转到 WordPress 仪表板
  2. 单击 Products> Add New
  3. 产品名称字段中写下您的产品名称或标题。
  4. 在下面的编辑器中写下您的产品描述
  5. 现在,您必须将产品的特色图像和其他图像上传到产品库。
  6. 一个右边你会找到标题为产品图像和产品库的方框
  7. 将特色图像上传到产品图像,将其他图像上传到产品库
  8. 单击 “ 发布”

设置产品价格和属性

设置产品价格转到仪表板> 产品并选择任何产品。然后向下滚动到 “产品数据” 部分。以下是所有产品数据部分设置的简短说明:

产品类别

  • 简单的产品:简单的单品。
  • 分组产品:作为系列一部分的产品。
  • 外部/会员产品:商店中列出的产品,但实际产品在其他地方销售。
  • 可变产品:具有变化(尺寸,颜色)的产品
  • 虚拟产品:不需要运输的产品。
  • 可下载产品:您必须提供可下载文件的产品。

一般

  • 常规价格:常规产品价格。
  • 销售价格:折扣产品价格。

库存

  • SKU:库存单位(SKU)跟踪产品
  • 管理库存:启用库存管理
  • 库存状态:产品是否有库存或缺货。
  • 单独出售:可以单个订单出售。

运输

  • 重量:产品重量。
  • 尺寸:产品的长度,宽度和高度。
  • 运输类别:与某些运输方式类似的产品类别。

关联产品

  • 加售:在产品详细信息页面下方显示相关产品。
  • 交叉销售:在购物车页面显示相关产品。
  • 属性:选择产品全局属性。

高级

  • 购买须知:完成购买后发送给客户的注意事项。
  • 菜单顺序:此产品的定制订购位置。
  • 启用评论:启用或停用产品评论。

自定义店面

要自定义 Storefront 主题,我们将使用 Storefront Design Customizer。

如何添加徽标

按照以下步骤为您的网站添加和显示徽标:
1。转到 WordPress 管理员,然后选择外观> 自定义
2. 然后转到站点标识> 徽标
3. 单击选择徽标以上载徽标图像。(推荐图像尺寸:470px X 110px)
4。单击 “发布”。

在哪里上传网站 favicon

按照以下步骤添加和显示网站的图标:
1。转到 WordPress 管理员,然后选择外观> 自定义
2. 然后转到网站标识> 网站图标
3. 单击选择图像上传您的徽标图像。(建议图像大小:512px X 512px)
4。单击 “发布”。

如何添加顶栏

安装 Storefront Design Customizer Pro 后,您可以选择显示 Topbar。您可以在哪里显示您的电子邮件地址,电话号码,社交帐户,菜单和提供文本。
按照以下步骤将顶部栏添加到 Storefront:

1. 转到外观> 自定义> 标题> 顶部栏
2. 填写以下字段:

电子邮件地址:
电话号码:
Topbar 文本:
社交菜单:

3. 单击 “发布”


如何更改帖子归档或博客布局

  1. 转到外观> 自定义> 博客自定义程序> 发布存档
  2. Post Archive Layout 中选择布局
  3. 单击 “ 发布”

如何更改帖子归档或博客列

  1. 转到外观> 自定义> 博客自定义程序> 发布存档
  2. Post Archive Column 中选择列号(Full Width,2 Column,3 Column&4 Column)
  3. 单击 “ 发布”

如何更改单个帖子或文章布局

  1. 转到外观> 自定义> 博客自定义程序> 单个帖子
  2. 单个帖子布局中选择布局
  3. 单击 “ 发布”

如何更改字体

  1. 转到外观> 自定义> 常规样式> 排版
  2. 字体配对中选择字体
  3. 单击 “ 发布”

WooCommerce 定制

如何更改商店页面布局

  1. 转到外观> 自定义> WooCommerce> 商店页面 – 产品列表
  2. 产品存档布局中选择布局
  3. 单击 “ 发布”

如何更改产品详细信息页面布局

  1. 转到外观> 自定义> WooCommerce> 商店页面 – 产品列表
  2. 产品存档布局中选择布局
  3. 单击 “ 发布”

如何更改星级颜色

  1. 转到外观> 自定义> WooCommerce> 评级,销售徽章及其他
  2. 单击星形颜色以更改颜色。
  3. 单击 “ 发布”

如何更改销售徽章颜色

  1. 转到外观> 自定义> WooCommerce> 评级,销售徽章及其他
  2. 单击销售徽章颜色和销售徽章背景颜色以更改颜色。
  3. 单击 “ 发布”
文章没看懂?代码不会用?需要帮助你可以去论坛提问自助服务台

作者小新

大象、大象 ,你的鼻子怎么那么长 ,妈妈说鼻子长才是漂亮 ......