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: https://youtu.be/Wz-0NV2zK0Y
If you’re just getting started with WooCommerce, we have a full playlist here to walk you through it from scratch:
https://www.youtube.com/playlist?list=PLSk3zfDlC1f9SCHmK8ht3_tVCMOZzlNz6
Good luck with your project!
source
This is exactly what I was looking for. Thanks a lot ❤
redirection part was really helpful, thanks
what should i do if i do not have "edit with elementor" buttom on the top?
Mine doesn't find my products, it defaults to posts.
it's very helpfull, thans !
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.
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?
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.
Thanks you it was very very very useful
product grid isn't free anymore. huge rip
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.
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?
Dude thank you so much, this is legit info! Helped me after an hour of frustrations!
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!
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?
Thanks this helped!
Perfect ! Thank you !
Thanks for the video. When I slide the product grid icon, it only releases 1 product box. What is the solution?
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
Thank you! So good. Is it possible to show shop categories using this method?
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
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.
Can you please tell me why its not working for me? Still the same error you showed in your video..
Thank you.. Can you tell me how to redirect to this page from a product category link
Thank you so much 🙂
Thanks for the video! Is there a way to configure a single product page?
Thx bro , work for my wordpress
I guess they removed this grid, any alternative options?
i cant change the product and the price! Help!!
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. 😛 Any help?
This won’t work if you need filters on your product page… right?
The Product Grid no longer appears
Thank you! But do I delete the original shop page after redirect? Thanks
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
Thanks, Brother.
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
amazing. Thx so much.
Thanks 😊
Kindly explain how to use the filter by price widget
Why using redirection ? Can we not set custom shop page in woocommerce setting?
You're a life-saver!
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.
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?
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?
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.
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.
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?
I can't see my cart icon on top of the menu
Bro I just tried it but my cart isn't updating can you help me out