在设置在线商店时，WooCommerce 是首选plugin 。 建立在线商店并在完成后立即开始销售产品是非常简单的。 Avada 为 WooCommerce 提供全面的支持和设计集成，让您可以创建梦想中的商店，同时确保它看起来与您心目中的框架完全一致。
Avada 旨在让您能够自定义网站的外观，这与 WooCommerce 集成没有什么不同。 使用我们流行的高级选项网络，您可以从广泛的定制中进行选择，以实现各种设计可能性，包括：
- WooCommerce 有自己的 Avada 全局选项面板，独立于主 Avada 全局选项面板。
- Avada 页面选项可用于每个产品。
- Avada Builder 允许您通过拖放元素来创建产品页面设计。
使用 Avada 构建您的电子商务网站。
首先，我们必须在 Avada 中安装 wooCommerce。
安装 WooCommerce – 分步说明
转到Avada > Plugin s / Add-ons并查找 WooCommerce plugin ，如下面的屏幕截图所示。
步骤 1 – 安装 WooCommerce plugin 。
第 2 步– 从下拉菜单中选择“安装”。
该plugin将被自动安装和激活。
第 3 步– 之后，应显示 WooCommerce 设置向导。 如果您要导入我们的 Woo 演示之一，例如 Modern Shop 或 Classic Shop，您可以跳过此步骤，而不会丢失数据。 要向前跳过，请从下拉菜单中选择“不是现在”。 如果您没有导入我们的 Woo 演示，请单击“开始吧！”继续下一步。 按钮开始设置过程。
第 4 步– 按照屏幕上的提示和说明完成该过程并输入有关您商店的必要信息。 完成后单击“创建您的第一个产品”按钮，您将能够继续创建您的第一个产品。 或者，您可以通过单击设置窗口下方的链接返回到您的 WordPress 仪表板。
如何为您的网站分配商店页面
作为正常 WooCommerce 安装过程的一部分，应该启动安装向导，允许您配置您的商店并将您的商店页面分配给客户。 可以在此 WooCommerce 文档中找到有关设置向导创建的页面的更多信息。
或者，如果安装向导未出现，或者您出于任何原因取消它，您始终可以通过从任何 WooCommerce 页面的帮助菜单中选择安装向导来返回安装向导，该页面位于左上角窗户。
您可以通过转到WooCommerce 设置中的产品选项卡 - WooCommerce > 设置 > 产品- 并从下拉菜单中选择将成为主商店页面的页面来手动设置商店页面。 然后，WooCommerce 将根据您的操作在此页面上显示您的产品。
其余页面可以在高级选项卡中配置，位于WooCommerce > 设置 > 高级。
创建您的产品
第 1 步– 在您的 WordPress 管理员侧边栏上，导航到产品 > 添加产品选项卡。
第 2 步– 在页面顶部，输入您的产品名称。
第 3 步– 使用产品描述中的文本填写帖子内容字段。 所有产品信息都将显示在此部分中。
第 4 步产品 数据”框中填写 例如 amp和运输都是可能的选项。
第 5 步– 在“产品简短描述”框中，输入您的产品的简洁描述，该描述将出现在您的主图像旁边。
第 6 步– 主要特色图片应放在页面右侧产品 图片 这必须为每个产品完成。
第 7 步 库而不是单个图像，请在“产品库
第 8 步– 在“产品 类别”框中，输入适用于您的产品的类别。 产品 标签”框中为您的产品填写适当的标签
第 9 步– 输入所有必要信息后，单击“发布”按钮，该项目将出现在您的主店面页面上。
创建产品缩放效果
如果您使用 Avada Layouts，您需要确保在Avada > Options > WooCommerce > General WooCommerce > WooCommerce Product Images Zoom option或 Woo Product Images Element General 选项卡中启用 WooCommerce 产品图像缩放选项 >如果您使用的是 WooCommerce 布局，请放大产品图片
WooCommerce 产品图像宽度- 您的主图像宽度（请参阅下面的设置）和上传图像的实际大小都需要大于Avada > 选项 > WooCommerce > General WooCommerce > WooCommerce 产品图像宽度或产品图像最大宽度设置在 Woo 产品图像元素中。 单个产品库的容器列的宽度将由您选择的设置决定。 进行必要的调整后，您就可以设置 WooCommerce 主图像的宽度了。
WordPress 主图像宽度– WooCommerce 主图像宽度设置可以在 WordPress 网站的定制器中找到。 在 WordPress 仪表板中，导航到Appearance > Customize > WooCommerce > Product Images ，您将在其中找到 Main Image Width 设置； 这将确定画廊中显示的图像的实际大小。
您的缩放效果越详细，您为图像设置的图像尺寸就越大。 澄清一下，如果 WooCommerce 设置中的图像大小与 Avada 全局选项中的图像宽度匹配，则当鼠标悬停在页面上的图像上时，将看不到缩放。 此外，您上传的实际图片的大小必须等于或大于您网站设计中的主图片宽度设置。
确保在更改 WooCommerce 图像大小后重新生成缩略图； 这会将您的新图像大小应用于已上传到您网站的任何图像。 您可以使用 Regenerate Thumbnails plugin来完成此操作。
在 WooCommerce 中调整产品图像大小设置。
WooCommerce 包括用于调整商店目录和单一产品图像部分中产品图像大小的选项。 此外，还有特定的 Avada 设置可与您的 WooCommerce 商店使用的图像大小结合使用。 配置这些图像大小设置时，请务必记住，还必须考虑 Avada 全局选项设置。 稍后我们将更详细地讨论这些选项中的每一个。
假设您为产品上传的图片在来源处小于 WooCommerce 设置中指定的图片尺寸。 在这种情况下，您可能会注意到商店页面前端的一些视觉布局差异； 这在任何方面都不是错误。 这仅仅是因为您的图像太小，WooCommerce 设置无法影响它们。 您可以将这些设置视为图像尺寸的最大宽度和高度。 任何低于指定限制的内容都不会调整大小。
在配置您的商店时，请确保同时考虑 WooCommerce 图像大小设置和图像的实际大小。 总而言之，您的图像大小应与 WooCommerce 商店中的图像大小设置相同或更大。
对图像大小设置的任何更改都需要您重新生成缩略图，以便它们对已上传到您网站的图像生效。 因此，强烈建议使用 Regenerate Thumbnails plugin 。 此外，可以使用以下步骤调整图像大小：
第 1 步– 在您的管理侧边栏中，导航“外观”选项卡，然后导航“自定义”选项卡以开始自定义您的网站。
第 2 步– 导航到页面顶部的 WooCommerce
第 3 步– 单个产品图像的图像设置可以在配置窗口的“产品 图像”选项卡下找到。
第 4 步– 当您将图像上传到单个产品页面时，选择主图像宽度选项。 缩略图宽度是目录中产品缩略图的宽度。 用您想要的宽度值填写空白。
第 5 步– 要在更改图像大小并保存后重新生成缩略图，您需要使用 Regenerate Thumbnailsplugin，该插件可以在Plugin部分中找到。 首先，安装 Regenerate Thumbnailsplugin，然后导航到WP Admin > Tools选项卡，您可以在其中选择重新生成图像缩略图，创建新的图像大小。
