如何在 WooCommerce 中添加快速视图

您想在您的网站上包含快速查看功能吗？ 了解如何在您的 WooCommerce 商店中添加和自定义快速查看按钮。

在每个 WooCommerce 商店中，客户都可以在产品页面上看到有关产品的详细信息。 但是，他们无法在默认商店页面上看到附加到产品的描述、变体和其他信息。 当购物者在商店页面上时，他们必须单击产品图片或链接才能转到产品页面以查看有关该产品的更多信息。 这并不理想，因为它在购买过程中增加了一个步骤，如果客户想要继续浏览您的产品，他们必须返回商店页面。

但是，您可以在 WooCommerce 商店页面上添加快速查看按钮并改善用户体验。 这样，购物者将能够在不离开商店页面的情况下查看有关产品的所有信息。 让我们仔细看看快速按钮视图的作用以及如何将其添加到您的商店。

什么是快速查看按钮？

快速查看按钮允许客户直接在商店页面上查看产品的详细信息，而无需打开他们感兴趣的每件商品的产品页面。这样，购物者可以从商店页面浏览产品，从而提高购买经验。 当用户单击快速查看按钮时，将打开一个弹出窗口，在同一页面上显示有关产品的所有相关信息。 无需重新加载商店页面或将用户重定向到另一个页面。

如何向 WooCommerce 商店页面添加快速查看按钮

向商店添加快速查看按钮的最简单方法是使用插件。 对于这个演示，我们将使用 Direct Checkout，它是 WooCommerce 的最佳结账插件之一。 尽管 Direct Checkout 有免费版本，但您需要高级版本才能添加快速查看按钮。 您可以选择 3 种保费计划中的任何一种，起价仅为 19 美元（一次性付款）。

安装和激活 Direct Checkout

首先，安装直接结帐。 您需要从此处获取免费版本，并从此链接获取高级版本之一。 请记住，您需要安装并激活插件的免费版和高级版才能解锁快速查看功能。 安装两者后，转到WooCommerce > Direct Checkout > Archives并激活添加快速查看按钮选项。 在本节中，您还可以替换“添加到购物车”按钮的默认文本。 请注意，这不会以任何方式影响快速查看按钮的行为。 而已！ 您刚刚向您的 WooCommerce 商店页面添加了一个快速查看按钮！ 如果您使用的是 StoreFront 主题，这就是按钮的外观： 当您单击快速查看按钮时，将出现模态弹出窗口，看起来类似于以下内容： 请注意，所有产品信息都显示在快速查看弹出窗口中。 甚至还有“添加到购物车”按钮，它允许客户直接从弹出窗口将产品添加到他们的购物车中。 现在，让我们更进一步，看看如何使用一些 CSS 自定义快速查看按钮。

如何自定义 WooCommerce 快速视图

在本节中，您将学习如何使用一些 CSS 自定义快速查看按钮和快速查看模式弹出窗口。 CSS 脚本对于许多任务都非常有用，因此即使您是初学者，也值得学习一些基本的 CSS 概念。 现在，让我们看看如何自定义快速查看按钮和快速查看模式弹出窗口的不同元素。

请注意，您应该将以下代码粘贴到子主题的style.css文件或主题定制器的 Additional CSS 框中。 如果您没有子主题，您可以查看这篇文章来创建一个或使用这些插件之一。

3.1 编辑快速查看按钮

更改快速查看按钮的宽度

li.product .qlwcdc_quick_view.button{
width: 40%;
}

编辑背景颜色

li.product .qlwcdc_quick_view.button{
background: #79b0f7;
}

编辑图标颜色

li.product .qlwcdc_quick_view.button{
color:red;
}

添加圆角边框

li.product .qlwcdc_quick_view.button{
border-radius: 5px;
}

使用图像作为按钮

li.product .qlwcdc_quick_view.button{
width:75px;
content:url('https://pbs.twimg.com/profile_images/476389199621275648/G6c2Zoe__400x400.jpeg');
}

用文字替换图标

li.product .qlwcdc_quick_view.button{
visibility: hidden;
}
li.product .qlwcdc_quick_view.button:before{
visibility: visible;
content: "quick view text";
color:white;
background:black;
padding:10px;
}

添加悬停效果

li.product .qlwcdc_quick_view.button:hover{
color:black;
background:yellow;
}

3.2) 编辑快速查看模态弹窗

现在，让我们看一些自定义快速视图模式弹出的代码。

更改背景颜色

#qlwcdc_quick_view_modal>div>div>div.modal-body{
background:greenyellow;
}

隐藏产品元数据

#qlwcdc_quick_view_modal>div>div>div.modal-body>div>div>div .summary .product_meta{
display:none;
}

隐藏数量并添加到购物车

#qlwcdc_quick_view_modal>div>div>div.modal-body>div>div>div>div.summary>form.cart{
display:none;
} 我们刚刚查看了不同的脚本来自#qlwcdc_quick_view_modal>div>div>div.modal-body>div>div>div>div.summary>form.cart{
display:none;
} WooCommerce 中快速查看按钮的不同方面。 如果您想了解更多关于可以使用 CSS 做什么的信息，请查看本指南。

示例 CSS 脚本

现在您已经了解了如何在 WooCommerce 中的快速视图中添加和进行基本自定义，让我们更进一步。 下面您将找到三个示例来编辑快速查看按钮并为您的商店页面添加一些风味。

带有自定义图标的圆形按钮

li.product .qlwcdc_quick_view.button{
visibility: hidden;
}
li.product .qlwcdc_quick_view.button:before{
visibility: visible;
font-style:normal;
font-family: "Font Awesome 5 Free";
content: "\f002";
color:white;
background:black;
padding: 15px;
border-radius:50%;
}

带样式的文本按钮

li.product .qlwcdc_quick_view.button{
visibility: hidden;
}
li.product .qlwcdc_quick_view.button:before{
visibility: visible;
font-style:normal;
content: "view";
color:black;
background:#eeeeee;
padding:8px 18px;
border:3px solid brown;
border-radius:15px 3px;
}

使用图像作为按钮

li.product > a.button.add_to_cart_button{
bottom:30px;
position:relative;
}
li.product .qlwcdc_quick_view.button{
background:transparent;
width:85px;
content:url('https://icons.iconarchive.com/icons/iynque/flurry-extras-9/512/Quick-Look-Droplet-icon.png');
}

结论

总而言之，通过添加快速查看按钮，您将改善客户的购买体验。 他们将能够直接在商店页面上看到产品的主要详细信息，而无需打开他们想要查看的每个项目的产品页面。 在 WooCommerce 中添加快速查看按钮的最简单、更方便的方法是使用 Direct Checkout 插件。 此工具允许您单击几下在商店页面上添加快速查看按钮。 然后，如果您想更进一步并自定义按钮和弹出窗口，您可以使用一点 CSS。

您知道在您的商店中包含快速查看按钮的任何其他方法吗？ 您按照我们的指南有任何问题吗？ 请在下面的评论部分告诉我们，我们将尽力为您提供帮助。

有关如何自定义商店的更多信息，我们建议您查看以下指南：

• 如何自定义 WooCommerce 商店页面
• 如何在 WooCommerce 中自定义添加到购物车按钮
• 编辑 WooCommerce 结帐页面