Custom WooCommerce Shop Page (Elementor Free Version)

Рет қаралды 84,842

Күн бұрын

You'll learn how to build and edit a custom WooCommerce shop page with the Elementor free version. Even though you can't edit the default 'shop' page, you can actually make a new custom WooCommerce shop page using the free version of Elementor with an additional plugin. Then we redirect our links to the custom design.
In our method, we use Essential Addons for Elementor (Free Version) with the Elementor page builder free version. Then we build a custom shop product display page in Elementor. Then we use a free redirection plugin to redirect the default WooCommerce shop page to our new customized version that we built in Elementor.
We use Astra for this demonstration, but really it will work with any of the recommended Elementor themes, like OceanWP, GeneratePress and Hello Theme.
Also, check out my other video where we make a few customizations on the WooCommerce product pages using CSS: • WooCommerce Product Pa...
If you're just getting started with WooCommerce, we have a full playlist here to walk you through it from scratch:
• Build an E-Commerce We...
Good luck with your project!

Пікірлер: 133

@gehirnstaub8234 3 жыл бұрын

Thanks for the video! Finally a video that doesn't promote the pro version from any builder. I mean I'm building my own store and I don't even know if I'm gonna be successfull. One reason why I don't want to spent another 50$+ for nothing.

@wattsrl 3 жыл бұрын

Thank you! After an hour of frustration, found this and was done in 2 minutes!

@IdeaSpot 3 жыл бұрын

Glad it helped!

@AudraCarpenter 3 жыл бұрын

@@IdeaSpot Yep! Same here. Couldn't find a good plugin that would fix the shop page. Glad I stumbled onto your video.

@KBlakK Жыл бұрын

How great was this tutorial? Outstanding! I was able to make a very happy client a nice web site practically free. It took more labor, but the price point was critical for them at the time. Thanks for the knowledge. I never would have guessed we could add elements in Elementor free and Woocommerce without upgrading.

@officialthinknue1121 3 жыл бұрын

To anyone watching this. This method works! I was working on this for a client and could not figure out how to design the shop page until I found this video.

@IdeaSpot 3 жыл бұрын

Thanks! great to hear - I think my other video using WooLentor is a bit of a 'cleaner' method - and obviously using Elementor pro would be best, but for sure this method can get people out of a jam, thats why I made it :D

@bestdesigns9122 5 ай бұрын

This is exactly what I was looking for. Thanks a lot ❤

@artdepart729 3 жыл бұрын

You Genius, just what i was looking for and presented beautifully - subscribed

@IdeaSpot 3 жыл бұрын

Awesome, thank you!

@rogenmunyaradzichitongo3442 4 жыл бұрын

Thanks man, this is the best tutorial l have watched so far on this topic.

@IdeaSpot 4 жыл бұрын

Thanks! I wanted to make this video for a while, hope it will help a lot of people trying to make a store using free tools.

@IdeaSpot 4 жыл бұрын

cool :) hope the store goes well for you!

@Leenis13 2 жыл бұрын

Dude thank you so much, this is legit info! Helped me after an hour of frustrations!

@Websitecorner 7 ай бұрын

redirection part was really helpful, thanks

@ganiyusalawu3886 3 жыл бұрын

Thank you. This was so helpful

@lafemmelingeries3318 3 жыл бұрын

Big thannnnnnnnks!! Free version unbelievable!!! Thank you BRO

@IdeaSpot 3 жыл бұрын

You're welcome!

@yapwaikit92 3 жыл бұрын

You're a life-saver!

@Andrei-ds8qv 3 жыл бұрын

Very nice man!, thanks!

@martinlamberti4394 Жыл бұрын

Thanks you it was very very very useful

@institutchrysopee4364 2 жыл бұрын

Perfect ! Thank you !

@neurop0d 3 жыл бұрын

Really helpful video. Is there any way to get the product gallery images to also show in this view? I'm using the "List" layout and I think it would be much more elegant if users could see every photo from this page.

@brettpretorius3495 2 жыл бұрын

Thanks this helped!

@soniaple5949 3 жыл бұрын

Thank you 😊 this tutorial help me a lot 😊

@IdeaSpot 3 жыл бұрын

You're welcome 😊 glad to help

@davideichhorn4562 3 жыл бұрын

Hi there, thanks for your tutorial. Is there any possibility to add a message on top of the site when a user added a product to the cart?

@rase306 3 жыл бұрын

Fantastic video

@kokgampang9611 3 жыл бұрын

Thx bro , work for my wordpress

@nicoleneethling60 Жыл бұрын

So very easy to follow. Thanks for the tips. Looking forward to your other videos! Quick question. Did the news products page made in elementor, link up with woocommerce automatically? Ie. The add to cart... Buttons?

@cauxxx2454 3 жыл бұрын

You created another page and redirected xD That's the spirit ! Thank you for the idea ! P.S. Same method can be used to products page

@IdeaSpot 3 жыл бұрын

Yes its a simple way but not the cleanest :D I have another method I like a bit better in this video: kzfaq.info/get/bejne/gKdyjaypm92ypmQ.html

@Cr7_editz79 4 жыл бұрын

Very very very useful thank you X

@IdeaSpot 4 жыл бұрын

You’re welcome 😊 hope your shop is working well!

@MrFranksterling 3 жыл бұрын

Thanks for the video! Is there a way to configure a single product page?

@kennycheung5187 3 жыл бұрын

amazing. Thx so much.

@adlenemarsita2637 3 жыл бұрын

Thank you so much :)

@moussafall4992 Жыл бұрын

it's very helpfull, thans !

@1970MySharona 2 жыл бұрын

Thank you! So good. Is it possible to show shop categories using this method?

@josephinefaulk1280 2 жыл бұрын

This was a genius work around. Thank you so much. I'm an artist and uber picky about design. Woocommerce's design offerings are not even close to what I had in mind. This saved the day. One question--although it all had a happy ending on my laptop. It isn't redirecting on my phone. Any ideas what that might be about and how to fix it? Please!

@DanielC01000100 3 жыл бұрын

It's probably answered in some of your other videos but ¿how do you control what products are shown in the new elements? ¿And how do you make it to show categories? ¿Is it automatically linked to the products and categories defined in woocomerce?

@tomtaox4 2 жыл бұрын

Thank you, really help me. One issue I have, how can I add a sidebar to this page? I manged to do the same for my blog page with the main sidebar....but I don't know how to add a woocom sidebar

@lauracarver6188 3 жыл бұрын

Thank you! But do I delete the original shop page after redirect? Thanks

@trainsbuseshostels 3 жыл бұрын

Awesome I couldn't get more than 4 products displaying and this helped me solve that. Now I would like to change the display order of products. Any suggestions on how to do that without purchasing a plug-in. Thanks

@ChrisN-yk9vr Жыл бұрын

This is exactly what I was looking for. Thanks for this video man! Question for anyone using this plugin: Is there a way to add all the products on a page? Additionally, is there a way to add like a side menu with filters for the different product categories?

@mahedihassanratul5418 4 жыл бұрын

Thanks man !

@IdeaSpot 4 жыл бұрын

Happy to help

@sandynash4226 3 жыл бұрын

Hi, would this also work with Ocean WP? And what will adding woo commerce plug-in do to the pages ive already created? Thanks from a newbie.

@mohamedel-toukhi4093 3 жыл бұрын

Thanks 😊 Kindly explain how to use the filter by price widget

@russelmason8841 2 жыл бұрын

Hi, I love your content; it inspires me to do a lot of work, even building my own webpage. I have a question. I have a webpage that I use for consultancy; however, I want to also sell books. When my customers/clients click on "shop" in the header, I would like to take them to another page with my store. I have tried to create and embed a woo-commerce page without success. Can you assist me with a video like that or any advice? Thank you. Keep up the good work

@abbottabadbeauty3669 3 жыл бұрын

Thank you very much man

@IdeaSpot 3 жыл бұрын

You're welcome!

@darrenrobinson5495 4 жыл бұрын

Great video. You don’t need the redirection plugin, you could just go to Woocommerce settings and set the page you created to be the Woocommerce shop page.

@IdeaSpot 4 жыл бұрын

Thanks for the tip! I did try it but this seems to insert woocommerce archive-product.php into our page we built in Elementor (messing up our design...) is there an easy work around for that? I guess we could override it in a child theme perhaps but I wanted to keep this as beginner friendly as i could...

@greatideas4820 4 жыл бұрын

The video is great, sir tell us more details.

@artdepart729 3 жыл бұрын

yes that's what i did but was reading the comments to see if anyone else had done the same!

@lifelemonswhenlifegivesule9209 2 жыл бұрын

Thanks for the video. When I slide the product grid icon, it only releases 1 product box. What is the solution?

@taekwonshanks 4 жыл бұрын

great work. Cheers Pal. I found this option better than the Pro version.

@IdeaSpot 4 жыл бұрын

Thanks Scott, welcome to the channel. Glad it helped! Figuring out the best way to do this is something I've been working on for a few days - I'll make another alternative method soon too.

@universaltradeservices5700 3 жыл бұрын

Thanks, Brother.

@IdeaSpot 3 жыл бұрын

No worries!

@happy1025 3 жыл бұрын

I *really really* want this to work...you make it look so easy. 1) I'm still getting the error message when I try to "edit with Elementor", but I don't see another option to edit my pages after adding the Essentials Add-on. 2) I went through the process of adding a 'product' page and added my products, got them all set the way I wanted. Went to save the draft (because I needed to stop for a bit), and keep getting Error 403. When I add different element (like an accordion or something), it works and saves the draft. But not with a product grid. Total novice here with a site that was built by someone else and dumped on me. :P Any help?

@arshadashraf5860 3 жыл бұрын

Thank you.. Can you tell me how to redirect to this page from a product category link

@Phant0m1rg7 3 жыл бұрын

Is it possible to add sorting widget on the top of the products

@monicadebiase7719 3 жыл бұрын

Great tutorial! Is it possible to somehow link the grid to product description pages instead of add to cart?

@IdeaSpot 3 жыл бұрын

Hi, good question, it's possible but I would use a different method to do this > kzfaq.info/get/bejne/gKdyjaypm92ypmQ.html

@vibingwithstephy 3 жыл бұрын

Hi, just to be clear you cannot use this on your regular store page, you will need to create a new page? I am getting the same error after installing the plugin.

@victorufot1424 3 жыл бұрын

Thanks 😁

@IdeaSpot 3 жыл бұрын

No problem 😊

@markreid383 3 жыл бұрын

I love your videos. Very helpful. The only problem I am having with this one is that, when I drop in the "product grid" widget from Elementor Add Ons, it aligns the products vertically (and take up the entire width of the screen) even though I have it set to 4 "columns." I can't seem to fix this. Anyone have any suggestions? Thanks.

@IdeaSpot 3 жыл бұрын

Hi mark, maybe your theme has a column setting which is conflicting - check the customizer (appearance > customize) from the dashboard and check the woocommerce settings

@mary57730 3 жыл бұрын

Hey thankyou for this video. Can you please tell me how can we add wishlist icon with yithwoocommerce plugin on the products which you displayed using essential addons? Like on hovering on these product we should have that wishlist heart icon... please reply

@IdeaSpot 3 жыл бұрын

I haven’t tested that actually - not sure if it would work 🤔

@2PMisTimeless 3 жыл бұрын

I have a question: should I go for Divi pro version or the free version of elementor (never pro, too expensive and I'm started)? I worry this method from the video will make it just more bloated. Isn't it better to just use the Divi pro then ? Although I read Divi is also bloated

@IdeaSpot 3 жыл бұрын

Divi is pretty fast these days, there was a big performance update in mid 2019, but prior to that it was a little slower. I don’t think this method is much slower than elementor pro tbh. If you really want a fast free option you could check my recent kadence Woocommerce video, just the page builder isn’t as easy as elementor or divi but it’s fast and free

@gabrielarutjunjan8221 11 ай бұрын

what should i do if i do not have "edit with elementor" buttom on the top?

@Wanheda1 3 жыл бұрын

Bro I just tried it but my cart isn't updating can you help me out

@S_A_84 3 жыл бұрын

Great tutorial. Can we do this for single product page also?

@IdeaSpot 3 жыл бұрын

It would be better to try this method here: kzfaq.info/get/bejne/gKdyjaypm92ypmQ.html

@ushirshah 3 жыл бұрын

This won’t work if you need filters on your product page... right?

@tinaforrestel6500 3 жыл бұрын

I was trying to add the product grid and it won't load. It says "blog not found". How can I get it to load?

@weightloseexpert3287 4 жыл бұрын

Hi; thanks for this helpful video. Can we use edit product page with Elementor?

@IdeaSpot 4 жыл бұрын

Yes, absolutely - my newest video comes out in a few minutes and it covers this :D

@weightloseexpert3287 4 жыл бұрын

@@IdeaSpot such a good news. Thanks!

@AmarBornReady 3 жыл бұрын

thanks bro

@IdeaSpot 3 жыл бұрын

Any time :D

@mahdifneish1843 3 жыл бұрын

I guess they removed this grid, any alternative options?

@mralexodd 2 жыл бұрын

Not worked. Any reason why? Added the plug-in and still won’t let me edit in elementor. Is there anything else I need to do? The exiting page was created using the template I chose. Brandstore within Astra?

@462katie 3 жыл бұрын

Trying this now but when changing the number of columns it just changes the number of products listed in the column. I can't get more than 2 columns. Anyone know how I can fix this, please?

@snowyclub3400 4 жыл бұрын

Great. What is the pluging name for this? Or does it come free with elementor?

@IdeaSpot 4 жыл бұрын

Hi, its 'essential addons for elementor' - free version :)

@Glennerb Жыл бұрын

I noticed that you premade your page with pictures already set everything so that when you created the page in Elementor it imported those pictures. I got a blank picture and it wont let me change it. I only want to add a merchandise page to my existing website and every one of the videos I've watched changes the theme for the entire website.

@aLeX-hj5sx 3 жыл бұрын

Thanks broo

@IdeaSpot 3 жыл бұрын

No problem :D

@bankvideo1 3 жыл бұрын

I can't see my cart icon on top of the menu

@buybestonlineindia-bbo4494 2 жыл бұрын

Seems to not work if you want your Store to be categories rather than products. Both store page and product category page redirect to same page. Can you help us with that.

@alexanderfoster878 3 жыл бұрын

how to make this the default woocommerce web page

@ffrdesigners 3 жыл бұрын

i am facing this issue (Preview Could Not Be Loaded’ Error) only in shop page when i try to edit shop page in elementor. All other pages are fine. How Can fix this issue This issue happened when i was trying add widget in shop page now it shwoing error only in shop page i want to add widget and edit header of shop

@Arramasta 4 жыл бұрын

the more plugins the less speed on the site correct ? Can i design the page using the Elementor Kit ? and then remove it ?

@IdeaSpot 4 жыл бұрын

These type of plugins don't really have a signifcant performance hit. For reference, here are the ones to avoid in particular re: speed onlinemediamasters.com/slow-wordpress-plugins/ If you remove the elementor addons they wont work anymore, but you'll notice that in the essential addons plugin there is a way to enable/disable specific elements based on what you need.

@Arramasta 4 жыл бұрын

@@IdeaSpot thanks man

@ddrci88 3 жыл бұрын

Thanks very good content ! I create general store and I’m trying to do landing page for every product so basically I need to change product layout but I want to add custom text custom image custom video to my product page so I belive I need to add woocommerce product addons plugin but I search online it does not cover video , do you know how can I add custom video custom image to product page ? For example when I create a new product I want to add addons to text input image input video input then use them all product landing page , it’s little complex ? You can advices me premium plugin no problem thanks a lot !

@IdeaSpot 3 жыл бұрын

Elementor pro could be nice way to build custom product templates, or possibly look at Cartflows too

@tellyourstoryproduction257 3 жыл бұрын

great tutorial - one step missing ...I guess that one has to install the basic woo-commerce plugin 1st with the products before using product grid in elementor addon - Thx!!

@IdeaSpot 3 жыл бұрын

I made a basic setup video here: kzfaq.info/get/bejne/Z6qdjZaUsMjWd58.html maybe try this one first 👍

@tinaforrestel6500 3 жыл бұрын

Thank you. I was having this same problem. I didn't see any grid when I dragged it into my box.

@mrshane963 3 жыл бұрын

@@tinaforrestel6500 I have this same issue how did you fix?

@tarar579 3 жыл бұрын

Can someone PLEASE help me...... I've redirected my shop page so it looks much better but now when I look up a product via catagories those products are still in the original format .... helllllp

@ramirogigena6132 3 жыл бұрын

i cant change the product and the price! Help!!

@fawadshahzad3382 4 жыл бұрын

you earned a new subscriber

@IdeaSpot 3 жыл бұрын

thank you sir 🙏

@andreainks1430 Жыл бұрын

I am not understanding what you mean about redirection. I edited the shop page from woo comerce and make it a product page so not sure why there needs to be a redirection as I am able to improve the shop page with your instructions.

@blakelewis5204 Жыл бұрын

When you try to edit directly with elementor it wont work. Editing with woocommerce is not the same thing.

@AmitDey-bv8vb 3 жыл бұрын

Can you please tell me why its not working for me? Still the same error you showed in your video..

@iahmed92 3 жыл бұрын

Why using redirection ? Can we not set custom shop page in woocommerce setting?

@HilalKhan-rq6bh 3 жыл бұрын

What about categories, if I add product categories list on my page and when I click is goes to the original shop page , can you please help me,

@IdeaSpot 3 жыл бұрын

Hi, sorry for the late reply! I don't think it's possible with this method sorry :( You'll need to edit the shop template, so either Elementor Pro, or Woolentor (I made a video here: kzfaq.info/get/bejne/gKdyjaypm92ypmQ.html )

@HilalKhan-rq6bh 3 жыл бұрын

@@IdeaSpot appreciated

@imadraza3861 3 жыл бұрын

Im trying to use this to redirect from the default shop page but the difference is that i go to the products page through a search filter so even if i redirect it to the new page, it doesn't work. Can someone help me

@IdeaSpot 3 жыл бұрын

Hi this method won’t work for your situation - maybe try the other method I posted here: kzfaq.info/get/bejne/gKdyjaypm92ypmQ.html

@Nasimkhan-nr7ll 4 жыл бұрын

even after installing that plugin, i cant edit shop page with elementor

@IdeaSpot 4 жыл бұрын

Hi Nasim, true - this method works by building another page and redirecting the shop to the page we built. I have another method here: kzfaq.info/get/bejne/gKdyjaypm92ypmQ.html which I actually prefer - it uses the free WooLentor plugin

@ebikarim 3 жыл бұрын

True, I can't edit the page either...

@Popcorncandy09 Жыл бұрын

Mine doesn't find my products, it defaults to posts.

@masonfasco 3 жыл бұрын

The Product Grid no longer appears

@anisahsajidahsaud1327 3 жыл бұрын

Hi filter products by price at side bar of my new page is not showing. However at wc page is showing. Please avice.

@IdeaSpot 3 жыл бұрын

Hi, this method doesn't include the products filter - probably better to look at WooLentor or Elementor Pro and see which one you prefer for doing this.