How to Customize WooCommerce Product & Product Archive Pages Via Elementor
Vložit
- čas přidán 19. 09. 2018
- In this tutorial learn how you can build the WooCommerce single and archive product page templates using Elementor's WooCommerce Builder.
You'll learn how to:
✓ Use WooCommerce with Elementor
✓ Create a custom design for your products and archive
✓ Save a single and archive template with conditions by category
Subscribe to our CZcams channel and be the first to get our AWESOME videos!
Get Elementor: elementor.com/
Join Pro: elementor.com/pro/
Get WooCommerce: woocommerce.com/ - Jak na to + styl
saw many tutorial but this one was really easy to understand and loved it really ! This is one for the beginner with no know how like me .Thanks a ton!
Fantastic step by step video on creating a WooCommerce store. Well done Cassie and the Elementor Team.
AMAZING!!!
i have been waiting for this for a long long time
Thank you very much elementor, you saved me a lot of time and a lot of money!
With these simple but useful tools, An era of personal business is on the way. You guys are amazing.
you should mention that you are using pro version of elementor otherwise it makes confusion to find ecommerce feature in default elementor
Noted, Rahil!
But yet, not done.
@@courtneybrown4093 lol
@@courtneybrown4093 Earns more money. Greed is strong in this one.
yeah, I am disappointed it never said it was Pro
I just installed Elementor Pro on my website last night. I was previously using Avada with Fusion Builder. I switched over to Astra too as it is fast and works well with LearnDash, as ultimately, I'm building a new website for fitness and wellness online courses. I LOVE this Elementor feature for WooCommerce. The store on my old website looks terrible. I'm excited to get building with this feature and produce something that looks clean, organized and beautiful.
Thanks
Big help for non-techies!
Thank Thank Thank you! You helped me fix my shop best training ever!
Elementor is fascinating!!! The more I learn about it's capabilities I restart falling in love ❤
Thanks Jasmine 😍! Stay tuned for more reasons to be in love😉.
I followed all your steps while your video was running. I kept running into issues with things such as short description, and related products are all grayed out. Any suggestions? Also, will I need to make a page for each product category?
Thank you for such an AWESOME video!! I finally have what I need.
For the archive, does it let you create the shop archive, i.e. a list of the product categories? And if so, does it let you show the product categories in a vertical list with the category description on the right?
nice, can you recommend a plugin to show two product feature comparision in a chart using Elementor , thanks
Thank you Sooooooooo much mam I am very happy to your tutorials. I learn a lot of things. Thanks again
Hi, thank you so much for your help !
I have an additional question :
I would like to show the front and back (with a photo slider) of each product in my category page, do you know any plugin to help me ?
Thank you in advance :)
GREAT TUTORIAL, thank you!
Great video. I have just started using Elementor and it seems there were some things that have changed. Also, what theme are you using for this demonstration? I am going to try and build it again because I had some issues trying to add additional elements (price, description, cart button, etc.) to be placed into the container where the product title was. The elements kept wanting to go to the left or right side of the column, i.e. add another column?
Very nice! It would be awesome if, in the future, there would be some capablilites to edit Cart, Checkout and My Account pages.
i believe this is coming...
it is called cartlows. it is launching on Nov 19th, it only works with elementor right now
superbly explained, thank you
For Archive Products the query field which allows you to organize the product type/category is not longer available, what is the work around for this? I really want to organize by category type.
LOVE YOU ELEMENTOR....
Great video, What's the best way to change the size of the Product image on the Single Product Page?
Nice and detailed tutorial. However, how can I display different categories counts for desktop view and mobile view as in column count in the product category
Great tute. Keep em coming....i.e. Product variables, shipping, taxes, TOS etc.
learned a lot here, not quite what i'm looking for but i learned a lot. bought this service for a month now and still dont know how to add a nice product list that's the problem
Hello! Is there any way to change the image sizes in the Archive Products elements? I'm stuck with square ones. Regards!
its really helpful thanks
Any plans to support product attributes, facets, and filtering?
so it will create two pages for each product, or we can customize same product page?
because the original product page is still look same and you created new page and imported product data and then customize that new product page, but by this way we will have double pages and it will make site heavy
Do you need to create these for each categories or is one templates that applies to all just as good?
Because when I load the related product file, it does not stay horizontal, but vertical. I do not find the option to leave it in the correct position. Is someone else with this problem? 3:55
Can I add a form for a customer to add their information for product personalisation along with the add to cart? What I mean is, if a product has the option to add a name and date etc, can this be saved along with the purchase?
Hello, can you tell which theme do you use please ? Because I've some bug with OceanWP
Great video! Single product Image gallery not showing in Elementor Editor Mode why? when I saved and reopened the editor again product image is gone (product image widget is there without image)
Hi, thanks for the video. What theme was used here?
I am using the free Generate Press theme with Elementor Pro and Woocommerce. But when I try to create a custom product page template it doesn't show the default theme of Generate Press which contains my header inspite of choosing page layout as default. Kindly help me with a solution.
Thank You So Much!!!
If you got a plugin for woocommerce (I am using a plugin to add PDF files to products and a plugin to add extra tabbed information) how to you add those to your product page? Short codes?
What theme are you using? How do you get full customization within elementor instead of the appearance customization?
Is there any way to add GIFs/images and trust icons below the product section instead of related products?
Video shows Simple Product. Does the Pro works the same with stores that sell Variation Products?
Everything works great ...... Love Elementor, was a bit of a learning curve going from GoDa**y to Blue Host WordPress OceanWP and Elementor Pro, however I have paid my dues and watched tutorials etc etc ...... 1st very frustrating snag I have hit - hope to get help with "Upsells and Cross sells" using Woo Commerce is going to cause me to flip out and run up the street screaming. Its intermittent....... works ......does not work Rebuilt from scratch , cleared cache, logged out, rebooted computer, ate dinner and then yelled at the screen when it still did not work. Any input on this .... its such a simple thing to not be working
Is there a way to use the single product template in Elementor with WooCommerce Product Add-ons?
At the moment WooCommerce Product Add-ons places right next to the qty box and it doesn't level up right.
Hope you understand what I mean, it's hard to explain otherwise :)
I cannot find the products tab on the elementor widget despite I'm using pro version
One more consideration: what about perfomance of that builded " Woocommerce single product template"? What if I having thousands of products? What is better for my Woocommerce store perfomance: to make a custom .php template for " Woocommerce single product template" OR using this method?
Hi I could make the product archive exactly as you have shown and that too for a specific category. Now I wanted to use the template in a page. I am not able to. Can I use the template directly ? Is that the only way its going to work ? If I can use the template in a page, please help me out ...
Can i use a smaller size product image in the "product archive page" than the main product image on the "product page"? This would be to load the page quicker while the larger image would be needed for more detail on the product page
Any reason for not having product archive section available for editing? Elementor pro + woocommerce..
Cant edit content, query, or any other things because it is not available.
Hi! I have Elementor pro on my website. I followed this tutorial, but I’m having some trouble with visualization. I have two Archive products templates, one with prices applied to the Shop page (using the condition Include: shop page) and another showing no prices for the Home page. The Shop page archive works fine, but I’ve tried almost everything to show the second template on the Home page and nothing works, I see the “Nothing found” message whatever solution I try. Could anyone find where the problem is? I tried to add the template as a section, as a global widget, using the include: all archives product condition...no way...
The products archive page possibilities are very limited. What if I want to style products archive page in Amazon.com style as LIST view? And what if want to put on the front end ACF dynamic data values for every product? I hope elementor team wil be incorporating those promiced deep intagrations with ACF and Toolset in future releases, for product page and products archive page.
Thank you sooo much!
Could you please tell me which theme did you use ?? WordPress free theme or any other ??
how can i use it with variable products?
AMAZING!!!
I remember I have problem with woocommerce I purchase Pro but its didn't work correctly even I can't fix the layout of product on mobile version
I was also wondering, like some others: what’s the theme that has been used? Hello Elementor? Storefront? Ocean WP? Thanks Cassie.
Yeah, interesting too.
this is if i create my own archive page, but what if i want to edit the product category page?
To change the Products Archive’s layout, go to Appearance > Customize. This shows in Content tab, and there is no Query Tab as well and because of it I cannot select the category as you did.
I have the same problem, im confused. how do i get the Content and query tabs shown at 6:10?
@@marcking1587 Probably there were changes during the last updates. I did this by adding the "Products" widget and not "Product Archive" as she mentions. Very confusing for me too
Hi, I am facing issues in single product page layout with elementor pro ver 2.9.2 bought on 11 April 2020, While editing for single product page frontend with editor is showing correctly but when applied or update or set as default lay out for single product page layout is totally messed up but reverting to woocommerce everything is perfect but not editable. if any Know how to solve or from where i can enlightened then please share. Thanks in Advance
Hi,, where is the navegation block (ast-product-navigation-wrapper) between products? I want the put the arrows for moving to next and previous single product. Regards
When you add product image wadge, why there is image already shown up? so confuse this video
Thank you for your video, everything works for the best but not for me 😏. I would like to create a product archive page but the products are limited, I looked if the problem was with the theme used, I did not find where the problem was. Could you help me. I have been following him for several days. I am using the kava theme from Crocoblock. Thank you very much.
Very nice tutorial
hey, how do I add feature video or video on single product page
Will there be (in the future) options to create the CART page and checkput page so the design matches with single and archive pages?
Did they manage yet cuz i cant find it ;)
6:04 - latest product; means old product won't be shown?
how did you get that beautiful header and menu????
Great plugin of wordpress
I am using ocean wp free theme . In my product archive pages elementor editing no option as you have . What's the problem ? Even I am not able to insert any demo template . What should I do?
Fantabulous
Video needs to be updated, I do not see what is being shown
The way you are doing it is not the same as in the 2020 version. Would you be able to make a new video?
great tutorial :)
Does elementor lets to add product variations? I cannot find them in Elementor.
how to move the thumbnail images all inline at the bottom of the main image?
how can i add, product attributes dropdown?
Im dragging the widget but then unable to type anything? It doesnt pop up like shown in the video. Ive made the products on wordpress too.
I am trying to add my store to woocommerce but cannot succeed to install woocommerce.I did study the guide but I am hopeless with this.I cannot afford to upgrade to business plan yet.
Why there is a divider on the bottom after I added the Product Title ?
I'm using the Hello theme and when I use the Archive Products element, I don't see the options rows and columns...
MUITO TOP - ADORO PRA DROPSHIPPING DAS MINHAS LOJAS - ATUO COM GOOGLE ADS PRA ECOMMERCE DESDE 2012 - E DESDE 1997 NO MKT DIGITAL
Please add an option / widget for custom products.
For example:
If a customer wants a specific design/print on a bag or towel or backpack, etc.
That would be incredible!
There are several plugins that can do that. For example "Yith Product Addons".
This is more of a coding thing whereas Elementor is made to display stuff.
You can already do this in WooCommerce by choosing variable product and adding attributes.
How can I change the "Archives: Products" on my main Shop page? When I use the Archive Title widget, it displays all category archives titles correctly, except for the main products archive, which instead of saying "Shop" which is the name of the page, says "Archives: Products". I know how to remove Archives, but how do I change Products to Shop or Jewelry?
Is it possible to change 'ADD To Cart' button to 'Detail' or affiliate link?
i already make single product but it didn't change from previous design to my new template any one could help me !!!
I have Elementor Pro and Woocommerce but I do not have the product widgets section in this video??
I have Elementor 2.8.3. Where did you get the template you are using?
Hello! I have a doubt. What is the best practice to use Elementor Pro with WooCommerce? should I use storefront theme and edit it with elementor Pro or should I use a theme like Twenty Nineteen and edit it with elementor?
What is the best practice where each of the steps of purchase and payment of my products is respected.
thanks for your help
i guess hello elementor theme would work best with elementor itself
Thanks. One question. Can I put "soundcloud" widget instead of the "image product"❓ I'm selling music. Thanks!!
Can you please tell me which theme you are using and is your header or footer created by elementor or by theme. Please inform
Can i build two different categorie archiv pages? I have two dealers with different products and categories. I dont want all the categories to show on both dealers. Sry for my bad english
well done good luck
The archive products widget doesnt let me choose colums in desktop, tablet and movil. And I am using Hello Theme. How can one change is if the option is not avaliable????
How do you link the product meta in the custom page for a particular product? this is not working for me, the product meta is not showing in the relative fields.
looks so easy yet so hard when you do it yourself. I'm struggling with creativity.
Hi
How to add "view product" instead of add to cart in product archive
Why is it that people that do these videos, do the steps are double speed? People are trying to learn. Slow your roll.
Totally agree!! I expect it's because they want to make it look a lot easier than it actually is
that's not what slow your roll means. dumbass
There's a pause button for a reason. Just kidding. I find watching these type videos several times and/or watching it in one tab, pause after each step and then go do the actual editing on another tab by setting up a sample page.
Fine so far ...but what to do, if i wanna display a product variant / price on the page ? For example: i have 1 product in 3 variants .... 3 different prices. I can only display a price which shows -> 1 € - 500 €. I need a dropdown for it.
is this only available for elementor pro?
product image are not showing, i need to click on square where it should show and it pops up as a lightbox, how do you disable this ?
I have issue bro, I've created product archive page in theme builder. but I can't see any pages in my dashboard, so I can't customize it in wordpress, but the strange thing is my page still alive if I visit it