前 15 名 WooCommerce 与 Elementor 热门常见问题解答

WooCommerce 的标准类别页面可能很无聊，您可以使用 Elementor Pro 主题生成器以自己的方式自由自定义类别页面。

首先，转到 Elementor Pro 中模板下的主题生成器，然后选择“产品存档”。然后您将进入 Elementor Editor 页面，您现在可以在其中设置所有产品类别和子类别的布局。

您会注意到一些元素出现在您的侧边栏中，特定于此类页面。这些元素是：“档案标题”、“档案产品”和“档案描述”。这里的“存档”一词可以与“类别”一词互换。因此，对于这样的页面，我们自然需要放入标题字段、类别描述字段以及类别下的产品。
这些是我们产品类别布局所需的标准元素。

“存档描述”将是将从产品类别描述中提取的数据。

当您拉入“存档产品”元素时，您会注意到父类别的子类别会自动出现。如果您只想在这里看到产品，您可以在其他地方调整设置：
退出 Elementor Editor（或者只是打开一个新选项卡以访问您的网站后端 WordPress 仪表板）。将鼠标悬停在“外观”上并单击“自定义”，然后单击“WooCommerce”。然后，单击“产品目录”。在“类别显示”下，选择“显示产品”。

您还可以设置您喜欢的产品排序方式、每行多少产品以及每页多少行。完成后，保存此设置并返回到产品存档的 Elementor 编辑器。

现在，您的产品显示应该没有子类别图像。如果您想在不同的行（可能在产品的顶部）显示您的子类别，请执行以下操作：
在 Elementor Editor 侧边栏中查找元素“产品类别”。将此元素拖到编辑器页面。在“查询”>“来源”下，选择“当前子类别”。这意味着编辑器会自动将其子类别拉过来，即使您在稍后阶段添加更多内容也是如此。如果您没有看到子类别的图片，请确保您已在网站后端的“产品类别”编辑器中为每个类别上传了代表性图片。

大多数电子商务网站的主页以某种形式的布局展示一些产品。展示产品的一种流行方式是使用 Carousel 元素。请注意，此元素仅适用于使用 Elementor Pro 的用户。

以下是如何使用 Carousel Element 展示您的产品：
首先，查找“媒体轮播”元素并将其拖到主页上的某个部分。
在编辑器侧边栏的“内容”下，单击“项目 #1”并添加您的产品图片，然后在下面添加您的 URL 链接。对尽可能多的产品项目执行相同的操作。
完成后，向下滚动以查看“每个视图的幻灯片”。您可以设置在一个可见行中看到多少产品。在“Slides to Scroll”下，我们通常将其设置为1，以便Carousel缓慢移动，一次进入一个产品。

单击“其他选项”，将图像大小设置为“完整”，将图像大小设置为“包含”。

如果您希望每张图片都显示在一个框中，您可以在“样式”中设置边框大小和边框颜色。 Border Radius 将决定您的边界看起来有多圆。将其设置为 0 以查看正方形或矩形。如果您希望您的框看起来更圆，请增加边框半径。
你的旋转木马现在应该看起来不错！

您可能已经注意到，有些网站的标题被“冻结”了。我们使用术语“粘性标题”来描述此类标题。因此，当您向下滚动时，粘性标题将始终在我们的视线中。我们设置了粘性标题，让我们的观众可以轻松快速地导航到其他页面，而不必一直上下滚动。

以下是如何使用 Elementor Pro Theme Builder for Header Layout 设置粘性标题。
在 Theme Builder > Header Editor 中，决定您希望将标题的哪一部分设置为粘性。它可能只是顶行，或几行，或只是一个元素。如果您只需要粘贴一个元素，请单击该元素进行编辑。如果是需要粘贴的一行元素，则点击该行进行编辑。如果是几行，请将这些行分组为一个部分并编辑该部分。

选择要编辑的部分后，请转到编辑器侧栏中的高级。向下滚动以找到“运动效果”。在“粘性”下，选择“顶部”。您还可以使用设备选项将您的选择设置为粘性，例如，您可能希望此粘性效果仅在台式机上有效，而在移动设备或平板电脑上无效，并且您可以通过在“粘性”中划掉移动设备和平板电脑来进行设置在现场。

在大多数情况下，您可以忽略“偏移”设置。偏移数字表示您希望在顶部和粘性选择之间留下的空间量（以像素为单位）。因此，例如，如果您将偏移量设置为 100 像素，您会看到当您向下滚动时，您的标题将与顶部留出大约 100 像素的空间。如果您不希望在顶部和粘性选择之间看到任何空间（这是通常的情况），您可以简单地忽略偏移设置。

您可能已经看到一些具有出色悬停效果的电子商务网站。例如，如果您将鼠标悬停在图像上，它会显示该图像的另一个角度。当您在主页上显示某些产品图片时，您可能会使用悬停效果。

在 Elementor Editor 中，最容易在背景图像上使用悬停效果。如果您想创建具有悬停效果的 4 列产品图像，请尝试以下操作：

创建一个部分并使用 + 图标创建 4 列

右键单击第一列，然后单击样式以添加背景图像。如果您找不到图像上传图标，只需单击“背景类型”下显示“经典”的绘画图标。

然后，选择“悬停”部分，然后单击“经典”为悬停添加背景图像。

对具有不同产品图像的其余列重复。

您现在可以获得 4 列具有悬停效果的图像。

请注意，“过渡持续时间”功能仅适用于悬停时的颜色变化，而不适用于图像变化。对于图像更改，它将是标准的快速过渡，因此此设置不适用于图像更改。

您可能在某些网站上遇到过一些链接，这些链接会将您定向到页面中的特定部分。对于某些人来说，它可能是一个将您向下滚动到同一页面中间的链接，而对于其他人来说，它可能是一个链接到另一个页面，但会显示底部而不是通常的顶部。

这可以使用 Elementor Editor 中的 Menu Anchor Element 创建。

首先，将此元素拖到您希望链接指向的特定点。如果您想将观众指向该部分，请将其拖动到该部分的顶部。然后，设置这个锚点的 ID。给它一个直观的名称，清楚地指代该部分（这样您就不会对太多的 ID 感到困惑）。

之后，转到需要插入链接的位置并插入此链接：yoursite.com/#anchorID（将 yoursite.com 更改为您的网站地址并将 anchorID 更改为您为该锚点设置的 ID）。

对于Elementor Pro中的每个元素，在“高级设置”下，您将看到“边距”和“填充”的设置。

边距是所选元素与其旁边的元素之间的空间。

因此，顶部空白像素将是当前元素和上方的下一个元素之间允许的空间。右边距像素将是当前元素和右边的下一个元素之间允许的空间。底部边距像素将是当前元素和下面的下一个元素之间允许的空间。

我们通常在一个部分中创建元素。因此，如果1个部分中只有1个元素，则该元素的边距设置将是该元素与该部分之间的空间。将元素的背景色设置为特定颜色后，外部的背景色周围会出现白色空间。那个空白就是这个部分。如果增加此元素的边距设置，您会注意到空白会变大。 （Sidetrack：如果您希望整个屏幕具有该背景色，则还需要将部分背景设置为相同的颜色。）

边距可用于创建溢出效果。例如，您可以将元素的上边距设置为负数，例如-20px。它将向上移动以与上面的部分重叠。它可以创建一个不错的重叠效果。如果这样做，还请检查它在不同设备上的外观。

填充是元素内部的全部空间。

每个元素都有一个容器（我们并未真正看到）。如果您更改该元素的背景颜色，则将能够看到容器的大小（背景颜色的大小）。填充是内容与元素内容器边界之间允许的空间。因此，如果您增加填充，您会发现您的内容在容器内受到更多挤压。如果仅增加顶部填充，则内容将在元素容器内向下移动。

如果您尝试使用图像元素创建全宽横幅，您可能仍会以令人沮丧的白色边框结束。您的图像不会像您希望的那样在屏幕上伸展。要创建横跨屏幕的横幅，请遵循以下技巧：

添加一个部分

当您将鼠标悬停在该部分时，通过单击与其他 2 个其他人一起出现的中间图标来编辑该部分。这个中间的图标是一个有 6 个点的图标。单击它，您将看到左侧出现“编辑部分”侧栏。

将截面设置为全角，并为拉伸截面选择“是”。

在“样式”> 背景下，插入横幅图片。

保存。
现在，您应该会看到您的图像在屏幕上拉伸。

其他要检查的区域是否仍未实现全宽横幅：

内容位置

单击内容（例如文本框），您会看到编辑文本编辑器出现在左栏中。

转到高级并找到位置。在 Position 里面你会看到一个选项“Width”，把它改成“Full Width (100%)”。

页面属性

如果您正在编辑页面，但似乎无法将该页面拉伸至全宽，请转至编辑页面。

不要单击显示使用 Elementor 编辑的蓝色按钮。

相反，请查看右侧边栏，确保选择了右侧边栏顶部的“页面”而不是“块”。向下滚动以查看名为“页面属性”的选项，然后单击它。

在“模板”下更改为“Elementor Full Width”。保存。

如果您已完成上述所有操作，您的横幅应该是全宽的。

Elementor 站点构建器没有特定的功能，甚至没有帮助我们在栏上创建运行文本的运动效果。然而，我们可能会绕过给予我们的东西并创造出类似效果的东西。就是这样：

如果运行文本是您想在标题中插入的公告或欢迎文本，请转到模板 > 主题生成器并选择“标题”。将出现 Elementor 编辑页面。创建一个部分。你可能喜欢冷杉吨 将其设置为全宽。

向下滚动元素选项并查找滑块。提供给您的默认幻灯片数量是 3 张幻灯片。划掉第三个以将其删除，因为我们只需要 2 个。然后，将高度设置为大约 50px。

单击滑块选项并选择这些：
导航：无
自动播放：是
悬停暂停：否
暂停交互：否
自动播放速度：8000
无限循环：是
过渡：幻灯片
过渡速度：8000
内容动画：无

现在，返回到 Slides 并单击 Item#1。将背景颜色更改为完全透明。这可以通过将底部栏的滑块一直拖到调色板左侧来完成。然后，单击内容并删除标题词和按钮文本词。在描述框中，在此处输入您的移动文本。复制整个文本并将其粘贴到Item#2 的描述框中。对 Item#2 进行相同的背景设置，并记住还要删除 Item#2 的 Title words 和 Button Text words。

对于 Item#1 和 Item#2：单击样式。然后，选择“自定义”为是。集中所有选项：水平位置、垂直位置和文本对齐。另外，决定您的内容颜色。请注意，默认内容颜色为白色，因此如果您没有看到文本，只需编辑内容颜色即可。

您还可以在主幻灯片编辑下编辑“样式”。您可以根据自己的喜好调整幻灯片内容宽度。

应该是这样！更新后，您现在将能够看到您移动的文本。

您可以登录您的主机帐户以找到您的文件管理器。
去：

public_html > wp-content > plugins > woocommerce > assets > css > woocommerce.css
双击那个文件夹，你会看到一大块代码挤在一起。

这样写是为了节省空间。使用“Ctrl+F”可能有助于找到您需要的正确功能。例如。如果您需要在购物车页面上编辑某些内容，请寻找“woocommerce-cart”。

复制代码时，请记住从一个“,”复制到下一个“,”，因为这样可以形成一个完整的行进行编辑。然后，输入您想要的代码进行编辑并将代码放入您的网站后端：
外观 > 自定义 > 附加 CSS。

这是从购物车页面删除产品缩略图的 CSS 代码。
.woocommerce-cart table.cart .product-thumbnail {
显示：无；
}
转到外观 > 自定义 > 附加 CSS 输入代码。

这是用于更改 WooCommerce 购物车页面上“继续结帐”按钮颜色的 CSS 代码。

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
背景颜色：#FFA62F；
颜色：#FFFFFF；
}

这是更改鼠标悬停颜色的 CSS 代码：
.woocommerce-cart .wc-proceed-to-checkout a:hover.checkout-button {
背景颜色：#4C4646；
颜色：#FFFFFF；
}

你可以参考这里的 html 颜色代码： https://www.computerhope.com/htmcolor.htm#:~:text=HTML%20color%20codes%20are%20hexadecimal,tables%20on%20a%20web%20page.
只需将您喜欢的颜色复制并粘贴到 CSS 代码中的背景和文本颜色代码即可。

转到外观 > 自定义 > 附加 CSS 输入代码。

WooCommerce 最初的免费插件有很多设计限制。对于某些人，我们将需要购买额外的扩展插件以更好地满足我们的电子商务需求。对于其他人，我们可以尝试解决我们可用的问题。

我们可以使用以下 CSS 代码更改添加到购物车按钮的颜色：
.single-product .product .single_add_to_cart_button.button {
背景颜色：#FFA62F；
颜色：#FFFFFF；
}

你可以参考这里的 html 颜色代码： https://www.computerhope.com/htmcolor.htm#:~:text=HTML%20color%20codes%20are%20hexadecimal,tables%20on%20a%20web%20page.
只需将您喜欢的颜色复制并粘贴到 CSS 代码中的背景和文本颜色代码即可。

转到外观 > 自定义 > 附加 CSS 输入代码。
学分： https://quadlayers.com/customize-add-to-cart-button-woocommerce/ 为我们提供了最外行友好的答案。

我们还想出了一个额外的代码来添加以在鼠标悬停时更改按钮和文本的颜色：
.single-product .product :hover.single_add_to_cart_button.button {
背景颜色：#4C4646；
颜色：#FFFFFF；
}

如果您销售虚拟产品或服务；并且不需要您的客户在结帐页面填写他们的地址字段和送货地址，您可以执行以下操作以删除 WooCommerce 结帐页面上的这些字段。
首先，将鼠标悬停在“外观”上，然后单击“主题编辑器”。
您将看到您的主题文件。
我们建议您在编辑主题文件之前有一个子主题，因为当您的主题更新时，您可能会丢失您的编辑。但是，如果您有子主题，您可以保留对子主题的编辑。
大多数主题都带有子主题。如果他们不这样做，也许是时候切换到另一个带有儿童主题的了。 🙂
现在，在主题编辑器视图的右侧，您可以看到一些文件。点击“functions.php”。
在代码窗口的底部，复制并粘贴这些：
取消设置（$fields['shipping']['shipping_company']）；取消设置（$fields['shipping']['shipping_phone']）；取消设置（$fields['shipping']['shipping_state']）；取消设置（$fields['shipping']['shipping_first_name']）；取消设置（$fields['shipping']['shipping_last_name']）；取消设置（$fields['shipping']['shipping_address_1']）；取消设置（$fields['shipping']['shipping_address_2']）；取消设置（$fields['shipping']['shipping_city']）；取消设置（$fields['shipping']['shipping_postcode']）；
add_filter( 'woocommerce_checkout_fields' , 'custom_checkout_fields' );
函数 custom_checkout_fields( $fields ) {
取消设置（$fields['billing']['billing_postcode']）；
取消设置（$fields['billing']['billing_address_1']）；
取消设置（$fields['billing']['billing_address_2']）；
取消设置（$fields['billing']['billing_city']）；
返回 $ 字段；
}
您会删除所有运输字段和一些账单字段。
账单字段中剩下的是：
名
姓
公司名称
国家
州（此字段仅在您的客户选择国家后出现）
电话
电子邮件地址
您可能会想为什么我们应该保留“Country”和“State”字段，因为您可能不需要这个。有2个原因：
技术原因：如果我们删除国家，WooCommerce 可能会显示错误，如果我们没有州但有国家，也会出现错误。所以，country 字段必须和 state 字段一起存在。
如果您销售的是电子书之类的虚拟产品，那么获取客户所在国家/地区的信息以用于未来的营销目的是有意义的。

最近我的客户遇到了这样的问题。他无法登录他的管理仪表板，屏幕显示“抱歉，您无权访问此页面”。人们可以想象恐慌，尤其是当您需要履行后端订单时。
在帮他解决这个问题的过程中，我遇到了很多有类似解决方案的网站。一个很好的例子是：https://kinsta.com/knowledgebase/sorry-you-are-not-allowed-to-access-this-page-error-in-wordpress/

一些网站提供 10 种方式，而另一些网站提供 7 种方式。它们大多相似。我尝试了所有可能的方法，但没有任何效果。
当我在论坛上看到不同的解决方案时，我很高兴：
https://www.wpbeginner.com/wp-tutorials/how-to-fix-the-sorry-you-are-not-allowed-to-access-this-page-error-in-wordpress/
寻找该用户的答案： padreed123
这个解决方案真是太棒了。有效！

它值得更多的关注，而不是隐藏在大量的问答中。所以这里是：
—
padreed123
(@padreed123)
2 年零 10 个月前
好的，经过无数小时检查 phpmyadmin 中的 wp_options 表，我终于发现了问题。 wp_user_role 行不知何故被删除了。如果它被 WooCommerce 等插件编辑/更改，也会发生这种情况。
因此，为了修复它，我从全新安装中复制了以下内容，并使用 phpmyadmin 将其插入到 wp_options 表中：
请记住将“wp_”替换为您的 db 前缀。
选项名称
wp_user_role
选项值
a:5:{s:13:"管理员";a:2:{s:4:"名称";s:13:"管理员";s:12:"能力";a:61:{s:13 :”switch_themes”;b:1;s:11:”edit_themes”;b:1;s:16:”activate_plugins”;b:1;s:12:”edit_plugins”;b:1;s:10:” edit_users”;b:1;s:10:”edit_files”;b:1;s:14:”manage_options”;b:1;s:17:”moderate_comments”;b:1;s:17:”manage_categories” ;b:1;s:12:”manage_links”;b:1;s:12:”upload_files”;b:1;s:6:”import”;b:1;s:15:”unfiltered_html”;b :1;s:10:”edit_posts”;b:1;s:17:”edit_others_posts”;b:1;s:20:”edit_published_posts”;b:1;s:13:”publish_posts”;b:1 ;s:10:”edit_pages”;b:1;s:4:”read”;b:1;s:8:”level_10″;b:1;s:7:”level_9″;b:1;s :7:”level_8″;b:1;s:7:”level_7″;b:1;s:7:”level_6″;b:1;s:7:”level_5″;b:1;s:7 :”level_4″;b:1;s:7:”level_3″;b:1;s:7:”level_2″;b:1;s:7:”level_1″;b:1;s:7:” level_0″;b:1;s:17:”edit_others_pages”;b:1;s:20:”edit_published_pages”;b:1;s:13:”publish_pages”;b:1;s:12:”delete_pages” ;b:1;s:19:”delete_others_pages”;b:1;s:22:”delete_published_pages”;b:1;s:12:”delete_posts”;b:1;s:19:”delete_others_posts”;b :1;s:22:”delete_publ ished_posts”;b:1;s:20:”delete_private_posts”;b:1;s:18:”edit_private_posts”;b:1;s:18:”read_private_posts”;b:1;s:20:”delete_private_pages” ;b:1;s:18:”edit_private_pages”;b:1;s:18:”read_private_pages”;b:1;s:12:”delete_users”;b:1;s:12:”create_users”;b :1;s:17:”unfiltered_upload”;b:1;s:14:”edit_dashboard”;b:1;s:14:”update_plugins”;b:1;s:14:”delete_plugins”;b:1 ;s:15:”install_plugins”;b:1;s:13:”update_themes”;b:1;s:14:”install_themes”;b:1;s:11:”update_core”;b:1;s :10:”list_users”;b:1;s:12:”remove_users”;b:1;s:13:”promote_users”;b:1;s:18:”edit_theme_options”;b:1;s:13 :”delete_themes”;b:1;s:6:”export”;b:1;}}s:6:”editor”;a:2:{s:4:”name”;s:6:”Editor ”;s:12:”capabilities”;a:34:{s:17:”moderate_comments”;b:1;s:17:”manage_categories”;b:1;s:12:”manage_links”;b:1 ;s:12:”upload_files”;b:1;s:15:”unfiltered_html”;b:1;s:10:”edit_posts”;b:1;s:17:”edit_others_posts”;b:1;s :20:”edit_published_posts”;b:1;s:13:”publish_posts”;b:1;s:10:”edit_pages”;b:1;s:4:”read”;b:1;s:7 :”level_7″;b:1;s:7:”level_6″;b:1;s:7:”level_5″;b: 1;s:7:"level_4";b:1;s:7:"level_3";b:1;s:7:"level_2";b:1;s:7:"level_1";b:1; s:7:”level_0″;b:1;s:17:”edit_others_pages”;b:1;s:20:”edit_published_pages”;b:1;s:13:”publish_pages”;b:1;s: 12:”delete_pages”;b:1;s:19:”delete_others_pages”;b:1;s:22:”delete_published_pages”;b:1;s:12:”delete_posts”;b:1;s:19: ”delete_others_posts”;b:1;s:22:”delete_published_posts”;b:1;s:20:”delete_private_posts”;b:1;s:18:”edit_private_posts”;b:1;s:18:”read_private_posts ”;b:1;s:20:”delete_private_pages”;b:1;s:18:”edit_private_pages”;b:1;s:18:”read_private_pages”;b:1;}}s:6:”author ”;a:2:{s:4:”name”;s:6:”Author”;s:12:”capabilities”;a:10:{s:12:”upload_files”;b:1;s: 10:”edit_posts”;b:1;s:20:”edit_published_posts”;b:1;s:13:”publish_posts”;b:1;s:4:”read”;b:1;s:7: ”level_2″;b:1;s:7:”level_1″;b:1;s:7:”level_0″;b:1;s:12:”delete_posts”;b:1;s:22:”delete_published_posts ”;b:1;}}s:11:”贡献者”;a:2:{s:4:”名字”;s:11:”贡献者”;s:12:”能力”;a:5:{ s:10:”edit_posts”;b:1;s:4:”read”;b:1;s:7:”level_1″;b:1;s:7:”level_0″;b:1;s: 12：” delete_posts”;b:1;}}s:10:”subscriber”;a:2:{s:4:”name”;s:10:”Subscriber”;s:12:”capabilities”;a:2: {s:4:”read”;b:1;s:7:”level_0″;b:1;}}}

请随时与我联系 您不确定这部分，因为它需要您在服务器端访问数据库。 我非常乐意指导您完成整个过程。

现在，我们在成功登录后遇到了另一个问题。我们意识到我们所有的 WooCommerce 数据库都不见了！再次按下紧急按钮，返回故障排除模式。
在对数据库进行一些修改之后，我设法找到了解决方案。

我意识到 WooCommerce 的 wp_options 表中的选项名称不一致。有些使用 wp_ 作为前缀，有些使用 vbx_ 作为前缀。由于我们的数据库使用 vbx_ 作为前缀，我将所有 wp_ 更改为 vbx_，我们的 WooCommerce 数据库又回来了。呸！
反思：为什么会这样？

我相信这个数据库混乱发生在我们将网站从 Bluehost 迁移到 Siteground 之后。

我很高兴该网站现在运行良好。 🙂
如果您遇到类似情况并且在排除故障时遇到一些问题，或者不确定如何访问或编辑您的数据库，请随时与我联系。

转到服务器端的文件管理器。

单击文件管理器中的以下文件夹：
public_html > wp-content > 插件 > woocommerce

双击 woocommerce.php 进行编辑
一直滚动到编辑器的末尾，然后单击空行。

复制并粘贴以下代码：

add_action( 'woocommerce_after_shop_loop_item', 'remove_add_to_cart_buttons', 1 ); function remove_add_to_cart_buttons() { if( is_product_category() || is_shop()) { remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart' ); } }