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