在本课中，我将教您如何在您的网站上使用 WooCommerce 动态标签。
我们将构建这个弹出窗口，它将使用动态数据填充，所有这些都是直接从我们的 WooCommerce 产品中提取的。
为实现这一目标，我们将进行以下工作：
我们将首先创建和配置我们的弹出窗口
，然后我们将使用各种小部件、列和部分填充它。其中许多将使用动态标签显示数据。
最后我们将设置显示条件，以便在用户尝试离开网站时显示弹出窗口
Elementor 使显示动态数据变得非常简单，如果您需要熟悉此功能，您将在下面的说明中找到指向我们专门教程的链接。
我们将启动 WordPress 仪表板。
然后转到模板 > 弹出窗口，并添加一个新的弹出窗口。
为您的弹出窗口命名，然后选择“创建模板”。
关闭图书馆……
……然后选择位于左下角的齿轮图标。
我们将宽度设置为 70vw…
以及淡入淡出的进入和退出动画。
现在添加一个新的两列部分。
将其设置为全角，然后修改第一列的填充。
放入标题小部件……修改文本……对齐……和排版。
我们将添加分隔图像。
接下来我们将放入另一个标题小部件，这次我们将使用动态内容设置它，而不是手动修改文本。
选择动态标签图标，向下滚动直到看到“产品标题”。
通过选择扳手图标打开动态选项，选择“全部”，然后搜索您的产品。
现在设置对齐方式……颜色……和填充。
添加另一个标题小部件，然后再次选择动态标签图标，这次选择“产品价格”。选择扳手图标并搜索您的产品。
默认情况下，您会看到正常价格和销售价格。我们可以修改为仅显示销售价格，但使用“格式下拉列表”。
如果我们现在打开“高级”选项卡，您会看到我们可以输入要在动态值前后显示的文本，以及后备文本。
在后面的字段中，输入一个空格，然后输入“/ per kg”。
完成此操作后，设置对齐方式……和排版。
现在搜索并放入“自定义添加到购物车”小部件。
搜索您的产品…修改文本…对齐…删除图标…
然后在样式选项卡中调整排版……正常颜色……添加边框……边框宽度……边框颜色……边框半径……然后设置按钮的悬停颜色。
为了继续设计弹出窗口的样式，我们将设置第二列的背景图像以自动显示产品图像。
为此，选择列…然后转到样式…背景…并选择经典。
选择动态标签图标，选择产品图片，然后搜索您的产品。
设置位置……和大小。
好的，看起来不错。现在让我们检查一下针对平板电脑和移动设备的设计。
打开响应模式，然后首先切换到平板电脑。
我们首先将每一列设置为占据可用宽度的 100%，这会将它们堆叠在一起。
如果图像放在顶部会更好看，因此选择该部分，然后打开高级选项卡并前往响应区域。在这里，我们修改列以便它们反转，让我们对平板电脑和移动设备都这样做。
现在将一个间隔小部件放入列中并设置它的高度。
最近，修改了第二列的填充。
接下来切换到移动视图……并进行任何必要的修改。
完成后，关闭响应模式，现在让我们设置关闭按钮的样式。
选择齿轮图标，然后前往风格 > 关闭按钮。
设置正常颜色……悬停颜色……和大小。
现在我们已经完成了弹出窗口的创建和样式设置，是时候发布并设置它的显示条件了。
选择“发布”按钮，然后选择“添加条件”。
默认情况下，它将显示在整个网站上，这就是我们将保留的样子。
接下来，选择“触发器”并激活“On Page Exit Intent”。这确保了当用户即将离开页面时弹出窗口出现……希望在他们离开之前诱使他们购买产品。
最后，为了确保我们的弹出窗口不会过于干扰，我们将高级规则设置为只显示一次。
完成后，保存并关闭，现在您的弹出窗口已准备就绪。
如果我们现在访问我们的网站并表现得好像我们即将离开，您可以看到弹出窗口淡入并显示我们的报价。结束在您的商店中使用弹出窗口对于促销产品和与客户互动都非常有益
。
通过将这个有用的 Elementor 功能与 WooCommerce 动态标签结合使用，您将拥有一个强大的工具包，可以为您的企业带来更多的销售。
感谢您的观看，有任何问题请务必在下方评论，不要忘记订阅我们的频道以获取更多精彩课程和教程。显示较少
