如何创建WooCommerce产品图片图库(逐步指南)

11/12/2023

您是否想要创建WooCommerce产品图库以添加到博客文章或页面中?

WooCommerce产品图库是一种在商店页面之外展示产品的简便方法,有助于吸引更多客户并提高转化率。

在本文中,我们将逐步向您展示如何轻松创建WooCommerce产品图片图库。

为什么要创建WooCommerce产品图库?

WooCommerce是市场上最流行的WordPress电子商务插件,允许您通过创建在线商店销售产品。

大多数为WooCommerce设计的WordPress主题都带有商店和商品分类页面的默认模板,这些页面仅使用主题样式简单列出您的产品。

如果您想要创建一个产品图库并将其展示在博客文章或网站的其他页面中呢?通过在您的热门博客文章和页面中展示产品,您可以增加销售额和转化率。

让我们来看看如何轻松创建WooCommerce产品图片图库。我们将分享两种不同的方法,您可以使用以下的快速链接跳转到适合您的方法:

  • 方法一:使用SeedProd创建WooCommerce产品图库(推荐)
  • 方法二:使用Envira Gallery创建WooCommerce产品图库

方法一:使用SeedProd创建WooCommerce产品图库(推荐)

最好的创建WooCommerce产品图片图库的方法是使用SeedProd。它是市场上最好的拖放式WordPress页面构建器。

SeedProd使您无需编写代码即可轻松创建自定义WordPress主题和登陆页面。并且,它带有内置的WooCommerce模块和集成,使您可以轻松将产品图片图库添加到WordPress的任何页面或文章中。

首先,您需要安装并激活SeedProd插件。如果您需要帮助,可以按照这篇关于如何安装WordPress插件的指南。

注意:SeedProd提供免费版本,但要访问WooCommerce模块,您需要SeedProd的精英计划。

插件激活后,从WordPress仪表盘中进入 SeedProd » 设置 然后输入您的许可证密钥。

您可以在SeedProd网站的帐户中找到许可证密钥。输入许可证密钥后,点击“验证密钥”按钮继续。

选择WooCommerce模板包

接下来,您需要选择要用于在线商店的WooCommerce模板包。这将用新的自定义设计替换现有的WordPress主题。

只需进入 SeedProd » 主题生成器 然后点击“主题模板包”按钮。

这将带您进入SeedProd的网站包库。

在这里,您可以点击“WooCommerce”选项卡查看专门为在线商店创建的所有模板包。

您可以将鼠标悬停在任何模板包上并点击放大镜预览设计。当您找到喜欢的模板包时,只需点击选项旁边的勾号即可使用。

在本教程中,我们将使用WooCommerce入门主题,但您可以使用任何您喜欢的模板包。

选择模板包后,SeedProd会将其导入,您将能够在主题仪表板上看到所有模板部件的列表。

您可以使用SeedProd的拖放式构建器自定义每个模板部件,包括产品页面、商店页面、结账页面等。这是我们将添加WooCommerce产品图片图库的地方。

首先,找到要自定义的模板部件。对于本教程,我们将选择“单个帖子”部件。这是确定所有单个博客帖子外观的模板。

只需将鼠标悬停在它上面并点击“编辑设计”链接。

这将打开SeedProd的视觉页面构建器。

从这里,您可以将预制模块拖放到页面上,点击任何元素进行自定义,并实时预览设计。

接下来,进行任何您想要的自定义,然后我们将在下一步中添加产品图片图库。

在WordPress中添加WooCommerce产品图片图库滑块

现在您有了自定义的WooCommerce主题设计,可以添加一个漂亮的产品图片图库。

为此,请点击左侧栏中的“产品图库图片”WooCommerce模板标签块,然后将其拖放到页面预览区域的任意位置。

这样会直接从WooCommerce中提取您的产品信息和图片。

接下来,您可以点击该块以自定义产品图片图库的设置。

首先,您会看到图像缩放选项。这允许访客悬停在图像上以查看产品的放大视图。

您可以拖动水平滑块来控制缩放按钮的位置。您还可以更改字体大小、图标颜色、边框半径和背景颜色。

如果您向下滚动,还可以自定义图片和缩略图边框。您可以设置边框半径、样式、颜色和宽度。

有一个“高级”选项卡,您可以点击查看更多自定义选项。

这些选项包括间距、CSS ID和类、设备可见性、动画效果等。

完成产品图片图库的自定义后,不要忘记点击“保存”按钮。

发布您的WooCommerce产品图片图库

最后,您需要在网站上使产品图片图库上线。为此,请退出视觉构建器并返回到“主题生成器”仪表板。

然后,只需将“启用SeedProd主题”开关切换到“是”位置。

就是这样!

您可以访问网站,查看您的WooCommerce产品图片图库的实际效果。

现在,您的访客可以像查看幻灯片一样浏览图库中的产品图片,并放大查看产品细节。

方法二:使用Envira Gallery创建WooCommerce产品图库

Envira Gallery是最好的WordPress图片图库插件,可轻松在网站的任何位置显示产品。这是在WordPress中创建WooCommerce产品图库的快捷方式。

首先,您需要安装并激活Envira Gallery插件。有关更多详细信息,请参阅我们关于如何安装WordPress插件的逐步指南。

激活后,您需要前往 Envira Gallery » 设置 页面输入您的许可证密钥。您可以在Envira Gallery网站的帐户中找到此信息。

许可证密钥验证后,您可以前往 Envira Gallery » 新增插件 页面安装并激活“特色内容”插件。

这个插件将允许您在Envira图库中显示您的WooCommerce产品。继续点击“特色内容插件”下的“安装”按钮。

接下来,您需要进入 Envira Gallery » 新建 页面以创建新的产品图库。

在这里,您可以首先为新图库添加标题。

输入标题后,您需要切换到“外部图库”选项卡并点击“特色内容”选项。

接下来,向下滚动到“图片”选项卡。在“选择您的文章类型”字段中,您需要选择“产品”选项,这是WooCommerce产品的自定义文章类型。

如果您有数百种产品,可能需要创建多个图库。

您可以通过选择特定产品标签或类别的分类法术语来缩小图库列表。

只需在每次创建新产品图库时重复此过程选择不同的产品标签和类别。文章类型将在所有WooCommerce产品图库中始终为“产品”。

您还可以选择分类法术语关系以在图库中选择并显示特定产品。

有关更多详细信息,请参阅我们关于如何在WordPress中创建图片图库的指南。

完成后,您可以发布产品图库,这将使其可以在您的WordPress网站上随时添加。

在WordPress中添加WooCommerce产品图库

接下来,您可以新增一个页面或文章,或者编辑现有页面以显示您的WooCommerce产品图库。

进入内容编辑器后,只需点击“+”按钮并添加Envira Gallery块。

之后,您可以在Envira Gallery块中选择您的产品图片图库。

只需点击下拉菜单,选择您之前创建的图库。

您现在将在块编辑器中看到图库的预览。如果未加载,请不要担心。您可以简单地预览您的博客文章或页面以查看其是否正常工作。

接下来,您可以保存并发布文章。之后,访问您的网站以查看产品图库的实际效果。

我们希望本文能帮助您学习如何创建WooCommerce产品图片图库。您可能还想查看我们的关于业务网站的必备WordPress插件和如何选择最佳设计软件的指南。

如果您喜欢这篇文章,请订阅我们的YouTube频道以获得更多WordPress视频教程。您也可以在TwitterFacebook上找到我们。



Related Posts

  • 2024-07-27
  • WordPress 插件

您是否希望在 WordPress 中要求文章必須設置精選圖片?如果您正在運營一個多作者的 WordPress 博客,您會希望確保每位作者在發布文章之前都添加精選圖片。在這篇文章中,我們將向您展示如何輕鬆地在 WordPress 中要求文章設置精選圖片。

閱讀更多
  • 2024-07-26
  • WordPress 插件

WordPress 內建搜尋功能,但其搜尋結果通常不盡人意。幸運的是,您可以自訂搜尋結果頁面,使其更加使用者友好。本文章將向您展示如何無需編寫任何代碼輕鬆自訂 WordPress 搜尋結果頁面。

透過自訂搜尋結果頁面,使用者能更容易找到他們需要的內容,並改善整體使用者體驗,從而提高頁面瀏覽量和轉化率。

閱讀更多
  • 2024-07-24
  • WordPress 插件

您在尋找如何創建影片和圖片的 WordPress Slider 吗?Sliders 是展示內容且吸引網站訪客注意力的絕佳方式。本文將為您提供使用 Soliloquy 簡易創建影片和圖片 Slider 的詳細指南。

首先,您需要安裝一個合適的 WordPress Slider 插件,例如 Soliloquy。這個插件使用簡單,可建立響應式的影片和圖片 Slider,不需要編寫一行代碼。接著,您可以根據需求添加各種媒體內容並調整 Slider 設定。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>