我们要感谢 APAC Insider 在 2021 至 2023 年新加坡商业大奖中将 Runaway Digital Solutions 评为“东南亚最佳电子商务资源提供商”。

Top 15 WooCommerce with Elementor Popular FAQs

分享这个帖子

Answering questions about WooCommerce with Elementor website setup.

You may also explore our Website Design Service (WooCommerce with Elementor) and Website Design Coaching Service.

与 elementor 的 woocommerce

How to Change the Look and Feel of WooCommerce with Elementor Category Page

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

First, go to Theme Builder under Templates in Elementor Pro and select “Products Archive”. You will then enter the Elementor Editor page where you may now set in the layout for all your Product Categories and Sub categories.

You will notice some Elements that appear at your sidebar specific to such a page. These Elements are: “Archive Title”, “Archive Products” and “Archive Description”. The word “Archive” here may be interchanged with the word “Category”. So, naturally for such a page we will need to put in a Title field, a Category description field as well as products under the categories.
These are the standard elements we will need for Product Category layout.

The “Archive Description” would be data that will be pulled from Products Categories Description.

When you pull in the “Archive Products” element, you will notice that the sub categories of parent categories automatically appear. If you only wish to see only products here, you may adjust the settings somewhere else:
Get out of the Elementor Editor (or simply just open a new tab to access your website backend WordPress Dashboard). Mouse over “Appearance” and click on “Customize”, then click on “WooCommerce”. Then, click on “Product Catalog”. Under “Category Display”, select “Show Products”.

You may also set how you like your products to be sorted, how many products per row and how many rows per page. Once done, save this setting and return to the Elementor Editor for Products Archive.

现在,您的产品显示应该没有子类别图像。如果您想在不同的行(可能在产品的顶部)显示您的子类别,请执行以下操作:
Look for the element “Product Categories” at the Elementor Editor sidebar. Drag this element to the editor page. Under “Query” > “Source”, select “Current Subcategories”. This means that the editor will automatically pull its sub categories over, even if you add more in at a later stage. If you do not see images for your sub categories, do make sure that you have uploaded a representative image for each category at the “Products Category” editor at your website backend.

如何使用Elementor Pro创建滚动产品轮播

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

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

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

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

如何使用Elementor编辑器冻结网站标题

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

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

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

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

How to create Hover Effects on WooCommerce with Elementor Editor

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

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

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

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

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

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

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

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

如何创建链接以到达页面中间

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

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

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

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

Elementor 中边距和填充之间的区别

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

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

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

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

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

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

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

如何使用 Elementor 创建全宽横幅

If you try to use the Image Element to create a full width banner, you may will still end up with a frustrating white border. Your image does not stretch across the screen like you would want it to be. To create a banner that stretches across the screen, follow this trick:

添加一个部分

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

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

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

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

Other areas to check if you still do not achieve full width banner:

内容位置

Click on the content (example a text box) and you see Edit Text Editor appearing on left column.

Go to Advanced and find Position. Inside Position you will see an option “Width”, change it to “Full Width (100%)”.

页面属性

If you are editing a Page and can’t seem to get that page to stretch to full width, go to Edit Page.

DO NOT click on the blue button that says Edit with Elementor.

Instead, look to your right sidebar, make sure “Page” is selected instead of “Block” at the top of your right sidebar. Scroll down to see an option called “Page Attributes”, and click on it.

Under “Template” change to “Elementor Full Width”. Save it.

If you have done all of the above, your banner should be totally full width.

How to Create Running Texts on WooCommerce with Elementor Site Builder

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

如果运行文本是您想在标题中插入的公告或欢迎文本,请转到模板 > 主题生成器并选择“标题”。将出现 Elementor 编辑页面。创建一个部分。你可能喜欢冷杉t set it to full width.

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

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

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

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

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

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

在哪里可以找到 WooCommerce CSS 参考代码

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

public_html > wp-content > plugins > woocommerce > assets > css > woocommerce.css
Double click on that folder and you will see a massive chunk of code squeezed together.

It was written this way to save space. It may help to use “Ctrl+F” to find the right functions you need. Eg. look for “woocommerce-cart” if you need to edit something on cart page.

复制代码时,请记住从一个“,”复制到下一个“,”,因为这样可以形成一个完整的行进行编辑。然后,输入您想要的代码进行编辑并将代码放入您的网站后端:
Appearance > Customize > Additional CSS.

删除购物车页面上的产品缩略图

Here’s the CSS Code to remove product thumbnail from cart page.
.woocommerce-cart table.cart .product-thumbnail {
display: none;
}
Go to Appearance > Customize > Additional CSS to input the code.

自定义购物车页面上的“继续结帐”按钮

这是用于更改 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 代码中的背景和文本颜色代码即可。

Go to Appearance > Customize > Additional CSS to input the code.

更改 WooCommerce 添加到购物车按钮颜色

WooCommerce the original free plugin comes with plenty of design limitations. For some, we will need to purchase additional extension plugins to align better with our eCommerce needs. For others we can try to work around what’s available to us.

We can change the colour of the Add to Cart button with the following CSS Code:
.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 代码中的背景和文本颜色代码即可。

Go to Appearance > Customize > Additional CSS to input the code.
Credits to: https://quadlayers.com/customize-add-to-cart-button-woocommerce/ for providing us the most layman-friendly answer to this.

We also figured an additional code to add to change the color of the button and text upon mouse hover:
.single-product .product :hover.single_add_to_cart_button.button {
背景颜色:#4C4646;
颜色:#FFFFFF;
}

How to remove fields at WooCommerce checkout page for virtual products or services

If you are selling virtual products or services; and do not require your clients to fill in their address fields and shipping address at the checkout page, you can do the following to remove these fields on your WooCommerce checkout page.
First, mouse over “Appearance” and click on “Theme Editor”.
You will see your theme files.
We recommend you have a child theme before editing your theme files, because when your theme gets updated you may lose your edits. However, if you have a child theme, you can retain your edits on the child theme.
Most themes do come with child themes. If they don’t perhaps it’s time for you to switch to another with a child theme. 🙂
Now, at the right hand side of your theme editor view, you can see a few files. Click on “functions.php”.
At the bottom of the code window, copy and paste these:
unset( $fields['shipping']['shipping_company'] ); unset( $fields['shipping']['shipping_phone'] ); unset( $fields['shipping']['shipping_state'] ); unset( $fields['shipping']['shipping_first_name'] ); unset( $fields['shipping']['shipping_last_name'] ); unset( $fields['shipping']['shipping_address_1'] ); unset( $fields['shipping']['shipping_address_2'] ); unset( $fields['shipping']['shipping_city'] ); unset( $fields['shipping']['shipping_postcode'] );
add_filter( ‘woocommerce_checkout_fields’ , ‘custom_checkout_fields’ );
function custom_checkout_fields( $fields ) {
unset($fields[‘billing’][‘billing_postcode’]);
unset( $fields[‘billing’][‘billing_address_1’] );
unset( $fields[‘billing’][‘billing_address_2’] );
unset( $fields[‘billing’][‘billing_city’] );
return $fields;
}
You would have removed all shipping fields, and some of the billing fields.
What’s left in billing fields would be:
First Name
Last Name
Company Name
Country
State (This fields only appears after your client has selected a country)
Phone
Email address
You may be thinking why we should retain the field for “Country” and “State” as you may not need this. There are 2 reasons:
Technical reason: WooCommerce may show up error if we remove country, and if we do not have state but have country, there will also be an error. So, the country field must be there, with the state field.
If you are selling a virtual product like an ebook, it makes sense to get information of your client’s country for future marketing purposes.

How to Fix “Sorry, You Are Not Allowed to Access This Page” in WordPress Admin Login

Recently my client experienced such a problem. He was unable to log into his admin dashboard, and the screen displayed “Sorry, You Are Not Allowed to Access This Page”. One can imagine the panic, especially when you need to fulfill backend orders.
While helping him to troubleshoot this problem, I came across many websites with similar solutions. One good example would be this: https://kinsta.com/knowledgebase/sorry-you-are-not-allowed-to-access-this-page-error-in-wordpress/

Some websites offer 10 ways while others 7 ways. They are mostly similar. I tried everything possible, and nothing worked.
I was so glad when I saw a different solution in a forum:
https://www.wpbeginner.com/wp-tutorials/how-to-fix-the-sorry-you-are-not-allowed-to-access-this-page-error-in-wordpress/
Look for the answer by this user: padreed123
That solution was such a gem. It worked!

And it deserves more limelight, not hidden in a multitude of questions and answers. So here goes:

padreed123
(@padreed123)
2 years, 10 months ago
Ok after countless hours of examining wp_options tables in phpmyadmin I finally discovered the problem. Somehow the wp_user_role row got deleted. It can also happen if it is edited/changed by a plugin such as WooCommerce.
So to fix it I copied the following from a fresh install and inserted it into the wp_options table with phpmyadmin:
Remember to replace ‘wp_’ with your db prefix.
option_name
wp_user_role
option_value
a:5:{s:13:”administrator”;a:2:{s:4:”name”;s:13:”Administrator”;s:12:”capabilities”;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_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: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:”contributor”;a:2:{s:4:”name”;s:11:”Contributor”;s:12:”capabilities”;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;}}}

Feel free to contact me if you are unsure about this part as it requires you to access your database at server side. I’ll be more than happy to guide you through the entire process.

Now, we have another problem after we managed to login. We realised all our WooCommerce database were gone! Pressed the panic button again, and back to troubleshooting mode.
After tinkering a little around the database, I managed to find the solution.

I realised that option names in the wp_options table for WooCommerce are not consistent. Some used wp_ as prefix while some used vbx_ as prefix. As our database uses vbx_ as our prefix, I changed all wp_ to vbx_, and our WooCommerce database is back. Phew!
Reflection: Why did this happen?

I believe this database mess happened after we migrated the website from Bluehost to Siteground.

I’m glad the website is running well now. 🙂
If you are in a similar situation and have some problems troubleshooting, or are unsure about how to access or edit your database, feel free to contact me.

如何删除WooCommerce类别页面上的“添加到购物车”按钮

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

单击文件管理器中的以下文件夹:
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’ ); } }

作者

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

更多探索

Lazada 商店设置 2022 最全面指南

如果您正在考虑为您的电子商务业务设置自己的 Lazada 商店,本指南适合您。也许,一件令人沮丧的事情

×

你好!

单击以下我们的代表之一在WhatsApp上聊天或向我们发送电子邮件至 adaleow@runaway.com.sg

× 我怎么帮你?