用Woocommerce建立一个网上商店 [11] WooCommerce菜单购物车小部件

[11] WooCommerce菜单购物车小部件

文章来源  https://wpeyes.com/elementor/academy/

在本课中，我们将向我们的网站添加菜单购物车小部件，这将有助于为我们的客户提供无缝的购物体验。

菜单购物车是任何商店的一个很好的补充，因为它允许客户在不离开当前页面的情况下查看和管理他们的购物车项目。然后它会提供指向结帐页面的直接链接，因此您的客户可以付款并完成他们的订单。

在本课中……

我们首先将菜单购物车小部件添加到我们的标题模板
中，然后我们将修改它的位置，使其与我们的其他标题元素完美契合
然后我们将根据我们的确切要求配置和设置此小部件的样式

如果您想深入了解此小部件的各个方面的教程，请查看下面的说明以获取我们专门教程的链接。
让我们首先在 Elementor Editor 中打开主页。

我们将向购物车添加一些产品，这样当我们创建菜单购物车时，我们将有一些实时产品可供预览。

现在选择编辑标题。

我们首先将 Menu Cart Widget 放入菜单下方……然后修改它的位置，使其与我们的其他元素保持一致。
切换回内容选项卡，让我们修改这些选项，以便我们的菜单购物车完美满足我们的要求。

设置您想要的图标类型……和项目指示器。

如果为空，我们将配置我们的隐藏，并且还将禁用小计。

接下来，打开“购物车”选项卡，我们还将打开菜单购物车，以便我们可以看到我们的更改。

这里我们有一系列选项来完全配置我们的菜单车。我们将保留这些默认值中的大部分，因为它们非常适合我们的要求。

现在向下滚动，直到您看到“按钮”区域。我们将隐藏“查看购物车”按钮，并将“结帐”按钮移动到容器底部。

接下来打开“其他选项”选项卡，并将购物车设置为每次添加项目时打开。

如您所见，如果我们向下滚动并添加产品，菜单购物车将打开并显示新添加的项目。

现在我们已经配置了菜单车，是时候切换到样式选项卡并设置外观了。

让我们先隐藏侧推车，然后设置菜单推车图标的样式。

我们将设置图标颜色……边框宽度……和大小。

现在再次重新打开侧推车，并打开购物车选项卡以设置这些样式。

将所有边的填充设置为 50px。

我们将为关闭购物车图标设置大小和颜色。

删除项目图标的大小和颜色。

还有颜色……排版……和小计的宽度。

现在打开产品选项卡。

为产品标题设置颜色。

产品价格的颜色和排版。

以及按钮正常状态的样式……以及按钮悬停状态。

现在让我们保存对标题的更改，并在我们网站的前端进行检查。

如您所见，当我们将产品添加到购物车时，侧边购物车会自动打开并填充我们新添加的产品。

如果我们愿意，我们可以移除物品，也可以前往结帐页面完成我们的订单。
充分利用菜单购物车小部件，确保您的客户在浏览您的商店时获得完美且用户友好的体验。

感谢您的观看，有任何问题请务必在下方评论，不要忘记订阅我们的频道以获取更多精彩课程和教程。