Elementor Free Method: Custom Shop & Product Pages (Using Free WooLentor Plugin!)
Вставка
- Опубліковано 22 чер 2020
- Using the free version of Elementor, you'll be able to make custom product & shop pages. This is possible by using the free WooLentor plugin. We can easily make new templates for our shop and product, or even use pre designed templates included for free in WooLentor. WooLentor is a great free woocommerce page builder. The free version features a woocommerce single product page customizer and also a woocommerce shop page customizer, and you can do all this using the free version of Elementor.
This is a big upgrade from what you get by default using free Elementor with WooCommerce. It's probably my favourite way so far to build a free e-commerce store in WordPress.
For our full playlist on building a WooCommerce store, check it out here: • Build an E-Commerce We...
Hope you enjoy!
-----------------------
Acknowledgements:
Our thumbnail design template is from FreePik - www.freepik.com
Have you tried building a WooCommerce store before? What have been the most challenging things in your experience? What has worked well for you? Share below!
Great video. I'm trying to create a full product list. I used the archive feature available on the free version of woolentor but unfortunately for some reason it doesn't show it on the page when I update it. Any suggestion to that?
This is my first time building a website, right now the most challenging where I am stuck is custom fields, so on this product page I've seen some sort of tables with extra information, I've searched all over UA-cam and I did find some plug-ins but they all cost money, I haven't found free alternatives...
What I mean is this,for example:
Material: 925 sterling silver
Length: 40cm
Diameter: 2mm
How can I put this in some sort of nice looking tab below the description? Please help, I've asked quite a few times on UA-cam and no response
You’re thanks a ton the ONLY video that actually answered my question “how to customize you product page for free with out elementor pro...
I was losing hope, everyone was clickbait then in the end you workout that they were using elementor pro ...
Appreciate your comment, thanks very much - Alex
Absolute legend. Out of everything on youtube, this is the most helpful and all free. I've been searching for a solution for literal Hours today and Months previously. Thank you so much. You have no idea
This solves The ”the content area had not Been found on your page” problem
Exactly what I was looking for. You're a great man, Alex. Thank you.
Cheers 🍻
I never comment on UA-cam but this tutorial really helped me. Only got clickbait videos with which I had to use Elementor Pro anyway.❤
Thx a lot !!Excellent tutorial, clear, to the point and complete. Great broadcasting voice by the way! ;)
dude!!! awesome!! covered everything, even the small problems that came up!
thanks!
Glad it helped!
Hello Alex, I have followed all the steps but at in end the products does not appear when I view the site.
Excellent. Thank you for this!
Thanks for the video - super easy to follow and definitely spared me hours of problem-solving and eventually changing careers to a dog walker :D
lol! thanks Candice, I know this feeling...
welcome to the channel
Alex
wonderful tutorial .. I am in the process of building sites and this is great. thank you for sharing
Glad it helps 😊
Thank you for your expertise, as you have shared your excellent knowledge with us! I'm thankful.
both descriptions remain same what's the solution of that?
you are awesome man.....thank you
💪💪💪
I really benefit a lot from your videos. thank you!
Happy to hear that!
wow exactly what i was looking for You just helped me alot
Thanks, I really like this method too :D
Brilliant Video thanks you so much !
Amazing lesson, Thank you!
Glad you liked it!
Oh thanks alot. Need this alot, ❤️❤️
Glad it was helpful! Alex
Thank you pal this video helped out a lot!
No problem 👍
Muchas gracias. Me estaba estallando la cabeza con éste tema y gracias a usted lo he solucionado
thanks :D
Good stuff Alex, thank you!
Glad you liked it!
Thank you sir!
Wow, great Video again. I was searching for customization inside wp crowdfunding and this is exactly it.
Thanks! (Maybe a plug-in to have a future tutorial about?)
Does it work the same way in Kadence Theme?
I love to see this channel growing, one of the top ones in my opinion. Thanks a lot.
Exactly what I needed to know today ... thanks
Glad to help!
Even me, I actually don't have budget for elementor pro thanks sir
Amazing! Thank you :)
Thank you too!
Just love your way of Welcome like a horror scene.
😂
thank you!
Hey Alex, thanks for this explenation, it really helped me a lot. I was just wondering wich software you use for the video editing/screen recording.
Very nice 👌
Thank you for the video! Followed everything, but run into an issue, when I use WL: Universal Product Layout, I cant find any pagination option, is there a way to add this? otherwise it looks like I only have few products or do I have to display ALL of them on one page?
Great video Thanks
Glad you enjoyed it
Great video!
Thanks!
Hi there and thanks for the amazing video! I have a question, is it possible to display short/long product description on Woolentor Universal Product Layout (using it as slider). Thanks
you are amazing
Really great video! I was very interested to see that it's possible to show specific selected products on the shop page using the query settings in the WL Universal Product Layout. But - is it possible to have two pages on your site showing different products? (I guess this would be like having two separate shop pages?) I sell two very different categories of products, and it would definitely work best if I could display them on two different pages. Any ideas? :)
Thank you bro! but how can i add this product page to be in the top menu instead of shop then to product page?
Thank you for this! Question- when I import the product page template from woolentor it’s not showing up under my Elementor saved templates. Any ideas?
Hi, nice tutorial! could you please help me with something though?! when I am using wl;product Archive it is not being shown in the page (I mean after edit&save), thanks for your help in advance!
nice one bro
thanks :D
You should do ASMR. You would rule :) Thank you for the video.
Lol 😆
I have a problem, when I switch to my template in woolentor settings it doesn't change, there's still default shop. How to fix it?
Hi, What about the filters on the individual product or category page we create. How to work on that?
Built my store a few weeks ago and from the start had problem with editing and customisation on WP, the standard template works OK for desctop but on mobile the buttons are squished together. Will give this a go. Will I be able to edit or should I start from scratch?
I like starting from scratch in most cases, the new things I've learned always seem to make the new designs look better
Hi nice video, I noticed that if I have multiple products on the "shop page", you are redirected to the same "product page". By clicking on any product the only thing that changes and that is correctly added to the cart is the price. The problem is that the "copy" and all the "photos" remain the same for all products. So, whatever product I click, I get redirected to a product page that is the same for everyone. How can I customize the page of each single product? I hope I have explained myself well and have not made any confusion. Thanks :)
Is there any way to use the Universal Product Layout with all the customization options for my shop page, so it works properly with the product filter or to customize the Archive, so it looks the same? :( I'm so frustrated because I like the Universal Product Layout much more than the other one but it does not work with any filter tool, I tested so far - not even the WooLentor one.
You need to add color selections or size selections and shipping to each product. Also currency changes for individual countries would complete the product.
Great ideas - yes I should work on videos for these too
hi, thank you for this. How do I make the buttons only read add to cart? Some are saying shop at amazon, add to basket, and select option. Can this get changed?
Maybe the language is set differently? I know UK English uses 'add to basket' and US english uses 'add to cart' - Not sure exactly though, I haven't seen this issue myself. The best place to check would be the support forum here: wordpress.org/support/plugin/woolentor-addons/
You are fucking awesome just subscribed thanks mate!
Hi there !!! Can't fins the WooLentor extension !!! Any replacement ? TX a mil !
Thank you for your video. I have run into a problem. After creating the template, as I want it (with youtubevideos and testimonials which have to be different for each product) I can't really figure out, how to change the links and the testimonials. When I am in the product and press edit with elementor, it doesn't really give med the correct view. (everything is shown twice underneath eachother.) Thanks in advance
It maybe easier to put the videos and testimonials into the description for each product using the product editor, rather than trying in elementor
hi do you have any idea why i cant access the template library?
Thank you for all your help! I do have an issue. I have 4 products. When using the single page template for each product, it gives the same description for each no matter how much I change it. How do I fix this?
Hi, I haven't notice this issue myself, but the best place to check would be the support forum here: wordpress.org/support/plugin/woolentor-addons/
good luck - Alex
My template puts the header above the page and I have previous template written in the middle?
Hi, how can I remove the "add to cart" button on the product archive layout? I can't seem to find an option for it, please help :)
hey, nice tutorial, I was just stuck on how to display products in the grid without elementor pro. I just have 1 problem, how to center align the product name and price while using woolenter universal product tab widget. and also can we replace star rating with solid stars. the defualt stars are not solid, they have just colored border
Hi, I haven't tried that exactly, but if you can't get the styling exactly how you want it, you'll need to use custom CSS & 'inspect element' to change things. There is
a gudie here www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Otherwise, you'll need a front end developer to assist. The support forum might have a method too: wordpress.org/support/plugin/woolentor-addons/
@@IdeaSpot did the same..inspected elements and center aligned using css..
Hi, I have a clear/sticky header. So on every page I use the same sized black section at the top. When I create a costum single product page and add the product to my cart, the 'added to cart' notice appears above this black section. This does not look nicely under my header as you may guess. Am i doing something wrong?
The better way to do that would be to add padding in your theme rather than creating a black section
You could also remove the added to cart message if you like: njengah.com/woocommerce-remove-has-been-added-to-your-cart-message/
From what i've found out by now the products display 1x1 on mobile, is there a way to chance to maybe a 2x1 or 3x1?
don't recommend 3x1, it's going to be too small. There's a reason why there's 1x1 by default. And yes, I wasn't able to find a way to change to 2x1 in a free version, but I don't feel like it's a big deal at this point.. :) If you found it, let me know though! hah
hi, I want that when you switch to the product category, the product that corresponds to this category is displayed automatically. How to do it? Thank you in advance. Sorry about my language. I am writing to you through a translator.
Thanks Alex, I have a problem, when i drand products they duplicates. How can i fix this ?
thnx for the video , i want to mention that i tried woolentor before in my TEST website on my localhost and when i just UPDATED the plugin version , the website crashed , i dont know how the thing would work on a live website honestly , so i think if someone want to tried it on a live website then you should have a backup ..
Thanks for sharing, possibly the update didnt succeed - you could try deleting it from your plugin folder if you're testing locally and reinstall it
Can Elementor free or WooLentor have power to censor your content that you publish on your website? Is using these plugins subject to them having power to than restrict, modify or delete your content?
Hi, thanks for your incredible solution. But I have a problem, I can see the Main Menu on my page, when adding and saving my page template to the Product Archive Page Template Field Selector at WOOLentor -> WOOCommerce template tab. Only my content page and footer are shown, but never the main menu header. Could you help me?
Which theme are you using? Maybe the header is disabled in the page settings pages > edit > snipboard.io/fu96jl.jpg
Hello, Alex. I have a question. I'm working on my first woocommerce site now and I tried following the steps in this video for my eCommerce site. I've followed all the steps; however, when I am already previewing my website, the part that showcase the products won't show up. Any idea why this is happening?
same
@@mihneafilimon6637 try product grid from essential addons , it work
The only thing that is troubling me for when showing all Products, is how do you enable the Short Description too? This doesn't seem to be available?
Hi, I haven't seen that either - you could ask theme if its possible here: wordpress.org/support/plugin/woolentor-addons/
@@IdeaSpot Hey Dude. They confirmed that it's only available in the Pro version. I suppose in some way that the cleaner - noshort-description view - is preferred by some. I was using Woolentor for an Events Site, so the Short Description would have ben good. Either way - your video is hands-down the best WooLentor explainer for those that those that don't have ELPro and need the extra customisation. Kudos to you.
Hello Alex, I am having a problem in my Product's Page. I did exactly the same as you did but still when I am clicking on EDIT WITH ELEMENTOR, it is taking a lot of time to load and also it is not opening( it is showing me to ENABLE SAFE MODE ). Can you please tell me how to fix this?
Regards,
Ayush.
Hey Alex , Thank you for your carefully curated great videos... I have seen 3 of them & I was able to create my Shop page in no time. There is one issue I am facing... my header background on the shop page does not show up... It is transparent unlike other pages. I just cannot solve it. I do know what to do. I am using elementor Astra Theme. Pleaseeee help me :(
check appearance > customize > header > transparent header > now, either uncheck 'enable on complete website' or make sure ' Disable on 404, Search & Archives' is ticked... good luck!
Hi Erik, It's not easy to use a transparent header on the shop, the theme is designed to have a regular header on archive pages (shop is an archive template), & search & 404 pages. So I did the tutorial using a regular header.
You can work around it though:
1) Make sure it's enabled on the website through the customizer: snipboard.io/Yw71I8.jpg and untick "Disable on 404, Search & Archives"
2) This will probably mess up your 404 and search page though... so you'll need to fix those manually - you could just use css to do that:
e.g. add some padding and color to those, in the customizer, 'additional css' add this:
.search .main-header-bar-wrap {
background-color: white;
}
.search .site-content {
padding-top: 4em;
}
.error404 .main-header-bar-wrap {
background-color: white;
}
.error404 .site-content {
padding-top: 4em;
}
Good luck ;)
Batman want be your friend 😉
By the way awesome vidoe thank you so much for informing us 🙂💓👌
How do you associate this "shop template" to "shop menu link" ? And how associate every single product in gallery to their own single product page? I miss this part, I've created both template but my "gallery menu link" go to a blank page not to template, same with product, if i click on it, it goes to a blank page ( I don't use Astra if this is the problem, I use OceanWP but own elementor woocommerce and woolentor free version )
Hi, in OceanWP I have a video on how to manage the header menu here: ua-cam.com/video/oxV5GY1qvN4/v-deo.html
For your shop template, make sure you have the template you built selected @7:22 and the product template @12:52
@IdeaSpot Solved... i didn't imported the theme in elementor during page creation 😅😅 thanks, and forgive my ignorance. Great tutorial, thanks a lot.
To add a pagination i need another plugin? I created a template with WL: Universal Product Layoutwith with max 9 elements and on customize woocommerce page I set 9 product per page. I've added over that 30 product but still display only 9 without pagination. How can solve?
@@IdeaSpot hi, again... i'm trying since when I wrote first comment to do a gallery archive with pagination like you do in video. I've tryied with "WL: Universal Product Layout" and "WL: Product Archive Layout (default)" but I've some problem.
I do every single thing you do in video but the result isn't the same. First of all "WL: Product Archive Layout (default)" disappear when I update the page (localhost) but in building page it's visualized, so I decided to use "WL: Universal Product Layout" (because I prefer it) but it doesn't have pagination. Ther's a way to add pagination to it? I've 30 product to insert in that gallery but I want a 3x3 grid with pagination.
Please tell me that ther's a solution.
Thanks
After saving the created template on woolentor, I try to edit with elementor and it says 'There has been a critical error on your website. Please check your site admin email inbox for instructions.'
www.wpfixit.com/wordpress-error-there-has-been-a-critical-error-on-your-website/
I'm guessing that going to your hosting file manager and renaming either the WooLentor plugin folder, or the WooCommerce plugin folder will get the site back to life - good luck!
Alex
Every time I try to import a template from woolentor, it doesn't show in my elementor saved templates. What could be the problem behind this? :(
same problem
Hi, I noticed it once @11:55 try clicking 'edit template' - make a small change in elementor and try saving it manually in elementor. I'm not sure what causes this because it usually doesnt happen! weird 🙄
Woolentor disturb the categories , categories not open if woolentor is active
Do you have another free woo?
Thanks it's been over a month I'm trying to create a shop page for my ebook, Its frustrating..the woocommerce checkout page not loading properly n can't customize..is there a way out, can you help me please..thanks Michelle
It says this page doesn't seem to exist...it looks like the link pointing here was faulty..
Oh, what is your site address?
@@IdeaSpot hi my site is simplicitybyfaith.com...I've been so frustrated so I deleted the shop page again,,,,so many times I've deleted it...I need help can you help me please n what will be your fee to just help me build a simple page to sell my first published book into an ebook..thank you
@@IdeaSpot just checking since my book is published on Amazon is it better to get linked to Amazon for people to buy the hard copy or is the ebook a better way...thank you
hi, you'll need to check with your host to see why woocommerce isn't working and also get your SSL security working. Like you mention though, Amazon is an excellent way to sell the hard copy for sure. Also for the ebook, you can also use amazon too (Amazon KDP) - 80% of ebook sales are through here! Definitely worth focusing on Amazon first.
When I activated woolentor the footer is come as sidebar.please help me
Hi, I haven't seen this issue myself, best to post the details here: wordpress.org/support/plugin/woolentor-addons/
Do you need to create the products first?
Hi, yes would be best to create a few products to test the templates first
One tip, dont edit your shop page, change your shop page in woocommerce settings first, then edit your "shop page" as you want, when you finish you back there and set the shop page in the woocommerce settings.
I got one header that is white, instead of my light blue color. I've set it to the default template but that didn't do much. Basically now I've got one page without my default header.
How can I fix this, could anyone help me, please?
Hi, which page exactly? you maybe able to edit the page from the wordpress dashboard - set 'transparent header' to enabled
@@IdeaSpotThank you for the quick response! I'm sorry I meant in my saved templates the 'shop template' page. Setting the transparent header to enabled didn't do it, unfortunately.
Link to the exact page please
@@IdeaSpot I believe I fixed it. In customizing - header - transparent header. I unchecked disable on 404 search & archives. That fixed it.
Thanks for your help, your videos have been mega helpful!
no worries, glad you got it working! this solution is what i suspected, and mabe check your 404 and search pages here too and make any updates to those too if needed :)
My categories are not opening after using this method, please help
Hi, it's best to post the full details over here: wordpress.org/support/plugin/woolentor-addons/
The template import doesn't work.
Thanks for the video. But your product page was not showing related products.
Hi, sorry I didn't actually setup any linked products on this store - but its easy enough, just define some linked products (cross sells, upsells) in the product editor - and woolentor gives a related products element that you can place in your product details template with elementor.
thanks for watching :)
@@IdeaSpot Thanks for replying. I am stucked up with a nasty situation where i have created a product page using woolentor. Everything went good untill i created a shop by category section using premium addon plugin. This section is not getting directed to the woocommerce category page. Tried redirection plugin and a few other ways...all failed. I want to show the shop by category section on my shop page. It would be helpful if you can guide with some tips and tricks.
how did you hide the title?
when you are in the editing page of elementor, there is a gear icon down on the toolbar to open the settings, there you can turn on/off the title
^ thanks Katherine! If the channel ever becomes successful I'll give you a job lol
& sorry Andreas for the late reply
Man no more woolentor.
ur voice is creepy though :D
They give you the most trash features and designs by using this add ons and other plugins for free. Luck are the ones who can get to the files and folders inside wp-content and change everything and customize without pay any cent ! I will never pay for it.
The reason is because they are always trying the clickbait strategy, they manipulate people who do not know anything to buy their plugins and etc. glad I studied website development.