Top 15 WooCommerce with Elementor Popular FAQs

The standard Category Page for WooCommerce can be boring, and you are free to customize your categories pages your way using the Elementor Pro Theme Builder.

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.

Now, your products display should appear without the sub categories images. If you would like to display your sub categories in a different row (perhaps on top of the products), do the following:
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.

Most eCommerce websites have homepages that showcase some products in some form of layout. One popular way to showcase products would be to use the Carousel Element. Do note that this element is only available for those using Elementor Pro.

Here’s how to use the Carousel Element to display your products:
First, look for the “Media Carousel” Element and drag it to a Section at your Homepage.
Under “Content” at the Editor Sidebar, click on “Item #1” and add your product image, then add in your URL link below. Do the same for as many product items as you like.
Once done, scroll down to see “Slides Per View”. You may set how many products you like to see in one visible row. Under “Slides to Scroll”, we usually set it to 1 so that the Carousel moves slowly, one product comes in at a time.

Click on “Additional Options”, set Image Size to “Full” and Image Fit to “Contain”.

If you like each image to show up in a box, you may go to “Style” to set Border Size and Border Colour. Border Radius will determine how round your border will look. Set it as 0 to see a square or rectangle. If you like your box to look more rounded, increase the border radius.
Your carousel should look good by now!

You may have noticed that some websites have their headers “frozen”. We use the term “Sticky Header” to describe such headers. So, when you scroll down, the Sticky Headers will always be in our line of sight. We set sticky headers to make it easy for our audience to navigate to other pages quickly, without having to keep scrolling up and down all the time.

Here’s how to set sticky header using the Elementor Pro Theme Builder for Header Layout.
At the Theme Builder > Header Editor, decide on which part of the header you wish to set as sticky. It may be just the top row, or a few rows, or just one element. If you need only one element to be sticky, then click on that element to edit. If it is a row of elements you need to be sticky, then click on that row to edit. If it’s a few rows, group these rows into a section and edit the section.

Once you have selected which parts you wish to edit to be sticky, go to Advanced at the Editor Sidebar. Scroll down to find “Motion Effects”. Under “Sticky”, select “Top”. You are also given device options to set your selection as sticky, For example you may like this sticky effect to be effective only on Desktop but not on mobile or tablet, and you may set that in by crossing out Mobile and Tablet in the “Sticky On” field.

You may ignore the “Offset” settings in most cases. The Offset numbers mean the amount of space in pixels you want to leave between the top and your sticky selection. So, if you set the offset to 100px, for example, you will see that your header will leave a space of about 100px from the top when you scroll down. If you do not wish to see any space between the top and your sticky selection (which is the usual case), you may simply ignore the Offset settings.

You may have seen some eCommerce websites that have great hover effects. For example, if you hover your mouse over an image, it will show you another angle of that image. You may use hover effects when you display some product images on your homepage.

In Elementor Editor, it is easiest to use hover effects on background images. If you like to create 4 columns of product images with hover effects, try this:

Create a Section and use the + icon to create 4 columns

Right click on the first column and click on Style to add background image. If you can’t find the Image upload icon, simply click on the paint icon that says “Classic” under “Background Type”.

Then, select the “Hover” Section, and click on “Classic” to add Background image for Hover.

Repeat for the rest of the columns with different products images.

You now get 4 columns of images that have the hover effect.

Note that the “Transition Duration” function only applies for Colour Change on hover and not Image Change. For image change, it will be a standard swift transition, so this setting doesn’t work for image change.

You may have come across some links on some websites that direct you to a specific section within a page. For some, it could be a link that scroll you down to the middle of the same page, and for others to another page but a bottom section instead of the usual top section that shows up.

This may be created using the Menu Anchor Element within the Elementor Editor.

First, drag this element to the specific point you want the link to point to. Drag it to the top of a section if you like to point your audience to this section. Then, set the ID of this anchor. Give it an intuitive name that clearly refers to that section (so that you don’t get too confused with too many IDs).

After this, go to where you need to insert link and insert this link: yoursite.com/#anchorID (Change yoursite.com to your website address and change anchorID to the ID that you set for that anchor).

For every Element in Elementor Pro, under the Advanced Settings, you will see the settings for Margin and Padding.

Margin is the space between the selected Element and the Element next to it.

So, top margin pixels will be the space allowed between the current element and the next element above. Right margin pixels will be the space allowed between the current element and the next element to the right. Bottom margin pixels will be the space allowed between the current element and the next element below.

We usually create elements within a section. So, if there is just 1 element in 1 section, then the margin settings of this element will be the space between the element and the section. When you set the background colour of the element to a certain colour, you will see a white space around that background colour on the outside. That white space is the section. If you increase the margin settings for this element, you will notice that white space gets bigger. (Sidetrack: If you like the entire screen to have that background colour, then you will need to also set the section background to the same colour.)

Margin may be playfully used to create an overflow effect. For example, you may set the top margin for an element to a negative number like -20px. It will move upwards to overlap the section above. It can create a nice overlap effect. If you do this, do also check how it looks on different devices.

Padding is all about the space inside the element.

Each element has a container (that we don’t really see). If you change the background colour of that Element, you will be able to see the container size (which is the size of the background colour). Padding is the space allowed between the content and the borders of the container within the element. So, if you increase your padding, you will see that your content gets squeezed more inside the container. If you increase only the top padding, then you will see your content moving downwards within the element container.

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:

Add a Section

Edit this Section by clicking on the middle icon that appears with 2 others as you mouse over the section. This middle icon is the one with 6 dots. Click on it, and you will see the Edit Section sidebar appearing on your left.

Set the Section as full-width and select “Yes” for Stretch Section.

Under “Style” > Background, insert your banner image.

Save it.
Now, you should see your image stretched across the screen.

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

Content Position

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%)”.

Page Attribute

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.

Elementor site builder does not have a specific function or even motion effect that helps us create running texts on a bar. However, we may get around what is given to us and create something to a similar effect. Here’s how:

If the running text is an announcement or welcome text you like to insert at the header, go to Template > Theme Builder and select “Header”. The Elementor edit page will appear. Create a section. You may like to first set it to full width.

Scroll down the Elements Option and look for Slider. The default number of slides given to you is 3 slides. Cross out the third one to remove it, as we only require 2. Then, set the height to about 50px.

Click on Slider Options and select these:
Navigation: None
Autoplay: Yes
Pause on Hover: No
Pause on Interaction: No
Autoplay speed: 8000
Infinite Loop: Yes
Transition: Slide
Transition speed: 8000
Content Animation: None

Now, move back to Slides and click on Item#1. Change the background color to Fully Transparent. This may be done by dragging the slider at the bottom bar all the way to the left at the color palette. Then, click on Content and remove the Title words as well as Button Text words. In the description box, type in your moving text here. Copy the entire text and paste it into the description box of Item#2. Do the same background settings for Item#2, and remember to also remove Title words and Button Text words for Item#2.

For both Item#1 and Item#2: Click on Style. Then, select “Custom” as Yes. Centralize all options: Horizontal Position, Vertical Position and Text Align. Also, decide on your content colour. Note that the default content color is white, so if you do not see your texts simply edit the content color.

You may also edit “Style” under the main Slides edit. You may adjust the slides Content width according to your liking.

That should be it! You will be able to see your moving texts now after update.

You may log into your hosting account to find your File Manager.
Go to:

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.

When copying the code, remember to copy from one “,” to the next “,” as that makes one complete line for editing. Then, put in your desired code for edits and place the code into your website backend at:
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.

Here’s the CSS code to change color for “Proceed to Checkout” Button on Cart page for WooCommerce.

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
background-color: #FFA62F;
color: #FFFFFF;
}

Here’s the CSS code to change the mouse hover colors:
.woocommerce-cart .wc-proceed-to-checkout a:hover.checkout-button {
background-color: #4C4646;
color: #FFFFFF;
}

You may refer here for html color codes: https://www.computerhope.com/htmcolor.htm#:~:text=HTML%20color%20codes%20are%20hexadecimal,tables%20on%20a%20web%20page.
Simply copy and paste the color you like to both the background and text color code in the CSS code.

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

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 {
background-color: #FFA62F;
color: #FFFFFF;
}

You may refer here for html color codes: https://www.computerhope.com/htmcolor.htm#:~:text=HTML%20color%20codes%20are%20hexadecimal,tables%20on%20a%20web%20page.
Simply copy and paste the color you like to both the background and text color code in the CSS code.

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 {
background-color: #4C4646;
color: #FFFFFF;
}

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.

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.

Go to your file manager at server side.

Click on the following folders in file manager:
public_html > wp-content > plugins > woocommerce

Double click on woocommerce.php to edit
Scroll all the way to the end of the editor and click on the empty line.

Copy and paste the following code:

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’ ); } }