朔州企业站点建设：如何设置Divi‘s免费咖啡店布局包和WooCommerce在线订单的商店内拾取

2019.05.25 朔州企业站点建设

117

如果您正在创建一个咖啡店网站，您可能需要寻找的一种方法是允许在商店内获取在线订单。这只会让你更容易吸引新的观众，因为他们没有时间排队等着点咖啡。它也帮助你，作为一个咖啡店老板，更有组织。

朔州企业站点建设为了帮助您完成创建这样一个系统的过程，我们创建了本教程。我们将一步地向您展示如何实现一个功能齐全的咖啡店网站，该网站允许在商店内使用免费的在线订单。咖啡店布局包，吴商插件和WooCommerce本地拾取时间选择插件。

使用咖啡店布局包建立网站

你需要做的第一件事，在建立网上订单在店内拾取，是创建一个功能齐全的网站与免费咖啡店布局包。我们创造了一个补习这向你展示了你需要完成的所有步骤，或者如果你愿意，你可以看下面的视频。

允许商店内拾取与Divi的免费咖啡店布局包在线订购

订阅我们的YOUTUBE频道

安装WooCommerce插件

因此，一旦您完成了设置过程，咖啡店布局包现在是开始的时候了。对于本教程，我们将使用另外两个插件。使用以下方法下载的第一个链接，是WooCommerce。下载了WooCommerce插件后，请转到WordPress网站>插件>添加新>并上传压缩文件。

undefined

安装WooCommerce本地拾取时间选择插件

本教程需要的第二个插件是WooCommerce本地拾取时间选择，如果单击以下命令，您可以下载该插件链接。这个免费插件是最简单和最便宜的方式添加一个拾取时间到您的结帐页面。同样，将此插件上传到WordPress网站，您正在以与WooCommerce插件相同的方式工作。

WooCommerce插件的更改设置

WooCommerce本地拾取时间选择插件添加了一些额外的设置到您的WooCommerce插件。因此，如果您想要更改设置，您将不得不转到WooCommerce插件的设置。

undefined

然后向下滚动“General”选项卡，直到您看到“商店时间和本地收件关闭时间”。从那里开始，你可以选择什么时候人们可以收取他们的订单，除其他外，增加开放和关闭时间。

undefined

创造产品

在WooCommerce插件中创建产品是一个两步的过程：添加产品类别并添加属于每个类别的产品。对于这个例子，我们创建了两个类别：咖啡和糕点。

添加产品类别

根据您的分类，您可能会有多个类别，这将使您的产品更容易显示在不同的页面。若要添加类别，请转到产品>类别>添加新类别.

undefined

添加产品

一旦创建了产品类别，就应该添加不同的产品了。您可以将这些产品添加到产品>添加新产品。一旦你添加了一个新的产品，你将需要给你的产品一个标题，描述，价格，类别和产品形象。在本教程中，我们创建了四种不同的产品。

undefined

将产品添加到商店模块

一旦你激活了插件并添加了产品，你就可以开始在视觉上改变你的网站了。您首先需要做的事情之一是在Shop页面上找到Shop模块。

用VisualBuilder打开商店页面

要开始，请使用VisualBuilder打开商店页面。

undefined

改变车间模块的列结构

接下来，打开Shop模块设置并将列号更改为“4列”。一旦你这样做，你将看到你的四个产品出现在一行。

undefined

更换购物车页

不幸的是，产品页是不能用Divi修改的页面。但是，幸运的是，我们可以更改一些包含WooCommerce短代码的其他页面。其中之一就是购物车页面。通过添加一些部分并进行一些修改，我们将使我们的购物车页面看起来如下：

undefined

朔州企业站点建设在购物车页面上启用可视化生成器

首先，转到购物车页面并启用VisualBuilder。

更改购物车的行宽

然后，打开包含购物卡短代码的行的设置，并将宽度更改为‘1075px’。

undefined

将商店页面英雄组、页脚部分和商店部分保存到图书馆

接下来，在另一个选项卡中打开商店页面并启用VisualBuilder。在我们的购物车页面中，我们将重用此页面的英雄部分、商店部分和页脚部分。单击每个部分的以下选项，将它们添加到库中：

undefined

将部分添加到购物车页面

将它们添加到库后，只需单击以下图标即可将其添加到购物车页面：

undefined

保存页面&退出VisualBuilder

一旦一切就绪，您就可以保存页面并退出VisualBuilder。

更改签出页

然后，还有结帐页面，您还可以幸运地使用DiviBuilder编辑它。拾取时间选项将出现在此页面上。我们的最终结果如下：

undefined

在签出页面上启用VisualBuilder

首先，转到购物车页面并启用VisualBuilder。

更改行宽

然后，打开包含WooCommerce短代码的行，并将SING子类别中的宽度更改为‘571 px’。

undefined

增加英雄组和页脚组

您也可以在结帐页面上重用库中的英雄部分和页脚部分。只需确保您更改了英雄部分的标题。但是，我们不会将商店部分添加到这个页面，因为我们已经走得更远了。

添加拾取信息

另一个值得推荐的东西添加到您的结帐页面是一个单独的部分，其中包含有关订单拾取的信息。最后看起来会像这样：

undefined

保存页面&退出VisualBuilder

一旦一切就绪，您就可以保存页面并退出VisualBuilder。

查看订单和收件时间

人们在你的网站上下订单的方式和往常一样，唯一的区别就是增加了收件时间。如果你去WordPress网站>订单>打开订单，您将看到在订单详细信息中提到了收货时间。

undefined

插件选择：WooCommerce皮卡地点

undefined

我们用这个用例创建的插件是最简单、最便宜的解决方案。然而，它确实在某些方面限制了你。你不能利用它，如果你有不同的商店，人们不能订购超过10天前。WooCommerce本地拾取时间选择插件的另一种选择是WooCommerce皮卡地点插件。虽然这是一个付费插件，22美元的普通许可证，这是一个非常好的选择，因为它提供了不同的选择。人们可以在订购时选择收件地点、时间和日期。你也可以选择在地图上标出你的商店。