How to Customize WooCommerce Product & Product Archive Pages Via Elementor

  Рет қаралды 535,111

Elementor

Elementor

5 жыл бұрын

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 KZfaq channel and be the first to get our AWESOME videos!
Get Elementor: elementor.com/
Join Pro: elementor.com/pro/
Get WooCommerce: woocommerce.com/

Пікірлер: 291
@priyav7715
@priyav7715 4 жыл бұрын
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!
@rahilahmed2524
@rahilahmed2524 4 жыл бұрын
you should mention that you are using pro version of elementor otherwise it makes confusion to find ecommerce feature in default elementor
@Elementor
@Elementor 4 жыл бұрын
Noted, Rahil!
@courtneybrown4093
@courtneybrown4093 4 жыл бұрын
But yet, not done.
@unknownman1
@unknownman1 4 жыл бұрын
@@courtneybrown4093 lol
@PIG8STUIPID
@PIG8STUIPID 4 жыл бұрын
@@courtneybrown4093 Earns more money. Greed is strong in this one.
@1fighisimo
@1fighisimo 4 жыл бұрын
yeah, I am disappointed it never said it was Pro
@ramikoren
@ramikoren 5 жыл бұрын
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!
@john0reilly
@john0reilly 5 жыл бұрын
Fantastic step by step video on creating a WooCommerce store. Well done Cassie and the Elementor Team.
@myjohnplatt
@myjohnplatt 5 жыл бұрын
Thanks Big help for non-techies!
@TammyLeeFitness
@TammyLeeFitness 4 жыл бұрын
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.
@angryyuan7526
@angryyuan7526 4 жыл бұрын
With these simple but useful tools, An era of personal business is on the way. You guys are amazing.
@Phoenix_Arise_J
@Phoenix_Arise_J 3 жыл бұрын
Elementor is fascinating!!! The more I learn about it's capabilities I restart falling in love ❤
@Elementor
@Elementor 3 жыл бұрын
Thanks Jasmine 😍! Stay tuned for more reasons to be in love😉.
@jackymoore7465
@jackymoore7465 Жыл бұрын
Thank Thank Thank you! You helped me fix my shop best training ever!
@EVOAUTO
@EVOAUTO 5 жыл бұрын
nice, can you recommend a plugin to show two product feature comparision in a chart using Elementor , thanks
@srceko
@srceko 5 жыл бұрын
Very nice! It would be awesome if, in the future, there would be some capablilites to edit Cart, Checkout and My Account pages.
@1234matthewjohnson
@1234matthewjohnson 5 жыл бұрын
i believe this is coming...
@jonnysaleen8151
@jonnysaleen8151 5 жыл бұрын
it is called cartlows. it is launching on Nov 19th, it only works with elementor right now
@veronicalangstadt5913
@veronicalangstadt5913 3 жыл бұрын
GREAT TUTORIAL, thank you!
@lenawebb-bey3642
@lenawebb-bey3642 5 жыл бұрын
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.
@Jani-muhabbat
@Jani-muhabbat 3 жыл бұрын
Thank you Sooooooooo much mam I am very happy to your tutorials. I learn a lot of things. Thanks again
@nemoclown6014
@nemoclown6014 4 жыл бұрын
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.
@baxterdieandretry8038
@baxterdieandretry8038 4 жыл бұрын
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 :)
@emon-ahmed
@emon-ahmed 5 жыл бұрын
LOVE YOU ELEMENTOR....
@MDC885
@MDC885 5 жыл бұрын
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?
@heyimamaker
@heyimamaker 3 жыл бұрын
Any plans to support product attributes, facets, and filtering?
@ecjgroup-elliot293
@ecjgroup-elliot293 Жыл бұрын
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?
@agoraactive7157
@agoraactive7157 5 жыл бұрын
Great video, What's the best way to change the size of the Product image on the Single Product Page?
@CristianoPiresAds
@CristianoPiresAds 4 жыл бұрын
MUITO TOP - ADORO PRA DROPSHIPPING DAS MINHAS LOJAS - ATUO COM GOOGLE ADS PRA ECOMMERCE DESDE 2012 - E DESDE 1997 NO MKT DIGITAL
@FearIsTheVirus
@FearIsTheVirus Жыл бұрын
superbly explained, thank you
@MarkHilldacreative1
@MarkHilldacreative1 5 жыл бұрын
Great tute. Keep em coming....i.e. Product variables, shipping, taxes, TOS etc.
@victorohwogaga7656
@victorohwogaga7656 4 жыл бұрын
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
@mwaqas8006
@mwaqas8006 5 жыл бұрын
its really helpful thanks
@tawanamd1
@tawanamd1 5 жыл бұрын
Great video, but it was too fast for me as a beginner, and after reading the comments i saw that i needed elementor pro. So although its a great video it was misleading.
@boris730
@boris730 4 жыл бұрын
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
@ulyssesky7983
@ulyssesky7983 3 жыл бұрын
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.
@markusseyfferth1778
@markusseyfferth1778 4 жыл бұрын
I was also wondering, like some others: what’s the theme that has been used? Hello Elementor? Storefront? Ocean WP? Thanks Cassie.
@vadymbaglayev6387
@vadymbaglayev6387 4 жыл бұрын
Yeah, interesting too.
@SaadKhaan
@SaadKhaan 4 жыл бұрын
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.
@marcking1587
@marcking1587 3 жыл бұрын
I have the same problem, im confused. how do i get the Content and query tabs shown at 6:10?
@velinamarinova9287
@velinamarinova9287 3 жыл бұрын
@@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
@copperfloraart3610
@copperfloraart3610 5 жыл бұрын
Thank You So Much!!!
@spicer41282
@spicer41282 5 жыл бұрын
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!
@IonianYasuo
@IonianYasuo 4 жыл бұрын
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.
@TammyLeeFitness
@TammyLeeFitness 4 жыл бұрын
You can already do this in WooCommerce by choosing variable product and adding attributes.
@olemortenelstad2571
@olemortenelstad2571 3 жыл бұрын
The way you are doing it is not the same as in the 2020 version. Would you be able to make a new video?
@mihleo6391
@mihleo6391 4 жыл бұрын
Great plugin of wordpress
@johanstam3602
@johanstam3602 5 жыл бұрын
Will there be (in the future) options to create the CART page and checkput page so the design matches with single and archive pages?
@nielssonneveld
@nielssonneveld 4 жыл бұрын
Did they manage yet cuz i cant find it ;)
@johndexterlouwe3838
@johndexterlouwe3838 4 жыл бұрын
looks so easy yet so hard when you do it yourself. I'm struggling with creativity.
@pellekarlsson152
@pellekarlsson152 4 жыл бұрын
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)
@MrSgrafix
@MrSgrafix 3 жыл бұрын
Thank you sooo much!
@IsaacTannerDempsey
@IsaacTannerDempsey 2 жыл бұрын
Do you need to create these for each categories or is one templates that applies to all just as good?
@mitotv6376
@mitotv6376 5 жыл бұрын
Very nice tutorial
@gabrielmstowski1827
@gabrielmstowski1827 4 жыл бұрын
Hi, thanks for the video. What theme was used here?
@DisneyUniversal1
@DisneyUniversal1 5 жыл бұрын
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?
@rahilahmed2524
@rahilahmed2524 4 жыл бұрын
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
@iandavidharwin
@iandavidharwin 5 жыл бұрын
Why is it that people that do these videos, do the steps are double speed? People are trying to learn. Slow your roll.
@AdrianStagg
@AdrianStagg 4 жыл бұрын
Totally agree!! I expect it's because they want to make it look a lot easier than it actually is
@elpretentio
@elpretentio 4 жыл бұрын
that's not what slow your roll means. dumbass
@benjaminmartin6882
@benjaminmartin6882 4 жыл бұрын
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.
@budavargas
@budavargas 5 жыл бұрын
Hello! Is there any way to change the image sizes in the Archive Products elements? I'm stuck with square ones. Regards!
@marridesign4108
@marridesign4108 3 жыл бұрын
Elementor team, can you please update your Video title to include the word Pro. It's quite easy to edit the name of your video as you know, and it's super helpful for people that are trying to find answers (only to find there is yet more money to shell out to include things like this). I do like your builder but it is frustrating when the plugin costs continue to add up for clients.
@shopsforlife
@shopsforlife 4 жыл бұрын
Video shows Simple Product. Does the Pro works the same with stores that sell Variation Products?
@SebastiaanVaz
@SebastiaanVaz 2 жыл бұрын
Her voice sounds so good. It even distracts me from the video.
@AdrianStagg
@AdrianStagg 4 жыл бұрын
Interesting Demo but hey, can you slow it down a little?
@gregmiller8293
@gregmiller8293 4 жыл бұрын
You can slow it down under the settings for this KZfaq video. Under settings...the gear icon at the bottom right corner of the video you can slow or speed the video.
@shanksleroux820
@shanksleroux820 5 жыл бұрын
Hello, can you tell which theme do you use please ? Because I've some bug with OceanWP
@rejbeau
@rejbeau Жыл бұрын
Video needs to be updated, I do not see what is being shown
@windyriverpools4363
@windyriverpools4363 4 жыл бұрын
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
@javierrodriguez5745
@javierrodriguez5745 5 жыл бұрын
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
@MisterX-77
@MisterX-77 3 жыл бұрын
i guess hello elementor theme would work best with elementor itself
@fxtttfx
@fxtttfx 5 жыл бұрын
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.
@christianlecuyer6380
@christianlecuyer6380 4 жыл бұрын
great tutorial :)
@Telposhow
@Telposhow 3 жыл бұрын
I cannot find the products tab on the elementor widget despite I'm using pro version
@fxtttfx
@fxtttfx 5 жыл бұрын
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?
@rohanagarwal1819
@rohanagarwal1819 3 жыл бұрын
Is there any way to add GIFs/images and trust icons below the product section instead of related products?
@juliusKaesar1001
@juliusKaesar1001 5 жыл бұрын
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
@Shopsuspex
@Shopsuspex 4 жыл бұрын
What theme are you using? How do you get full customization within elementor instead of the appearance customization?
@octamact
@octamact 5 жыл бұрын
how did you get that beautiful header and menu????
@jeffreber3205
@jeffreber3205 Жыл бұрын
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
@neofrederickboisvert
@neofrederickboisvert 5 жыл бұрын
I believe Elementor and Woocommerce would be a perfect match if only it had a masonry grid...
@FruKaos
@FruKaos 4 жыл бұрын
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?
@NovaNews666
@NovaNews666 4 жыл бұрын
wtf this guy is insane good
@ADITYAMANDAL
@ADITYAMANDAL 4 жыл бұрын
Could you please tell me which theme did you use ?? WordPress free theme or any other ??
@jonahkamalakar9569
@jonahkamalakar9569 5 жыл бұрын
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.
@constructionlearningjobsca2362
@constructionlearningjobsca2362 4 жыл бұрын
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 ...
@robertswinden3003
@robertswinden3003 4 жыл бұрын
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 :)
@YllerBiomateriais
@YllerBiomateriais 5 жыл бұрын
how can i use it with variable products?
@thangjamkishorchand
@thangjamkishorchand 5 жыл бұрын
Fantabulous
@DawnThemes
@DawnThemes 5 жыл бұрын
AMAZING!!!
@webpamplona
@webpamplona 5 жыл бұрын
Very nice! But ... What happens with the products variations? I have not found any element to design the products variations. Can you explain it in another video? Thank you.
@jirkavagner6051
@jirkavagner6051 5 жыл бұрын
me too, i have elementor PRo, but not with WOO section
@uuganaanyamdavaa6526
@uuganaanyamdavaa6526 5 жыл бұрын
can you find that?
@Ari-zp4dd
@Ari-zp4dd 4 жыл бұрын
this is if i create my own archive page, but what if i want to edit the product category page?
@PeteCurrington
@PeteCurrington 2 күн бұрын
I don't understand how the Elementor Widget "Edit WooCommerce Pages" works. When I select Single Product Page it does not display the same design as I made in the Single Product Template
@youssefblt9839
@youssefblt9839 3 жыл бұрын
well done good luck
@miguelmorales961
@miguelmorales961 4 жыл бұрын
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
@marcusantonius9680
@marcusantonius9680 5 жыл бұрын
How does elementor even know which product name/image it is inserting? What if I want to insert specific ones. One reason I bought elementor if because of the woocommerce integration but theres no good guide out there or anything.
@buyrain9277
@buyrain9277 3 жыл бұрын
Thats the same question I have!
@SAROJKUMAR-di5cc
@SAROJKUMAR-di5cc Жыл бұрын
Can you please tell me which theme you are using and is your header or footer created by elementor or by theme. Please inform
@webdeveloper2704
@webdeveloper2704 4 жыл бұрын
hey, how do I add feature video or video on single product page
@ssselega
@ssselega 4 жыл бұрын
how can i add, product attributes dropdown?
@May10th
@May10th 4 жыл бұрын
Is it possible to change 'ADD To Cart' button to 'Detail' or affiliate link?
@stripedstudio3621
@stripedstudio3621 4 жыл бұрын
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
@yuanrao5328
@yuanrao5328 4 жыл бұрын
When you add product image wadge, why there is image already shown up? so confuse this video
@nunorogeriomiguel2402
@nunorogeriomiguel2402 3 жыл бұрын
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.
@courtneybrown4093
@courtneybrown4093 4 жыл бұрын
By "You can choose from several different styles", they mean 3 different styles. I just paid for Elementor Pro >:(
@amokstudio
@amokstudio 4 жыл бұрын
lol
@alejandroperez5368
@alejandroperez5368 4 жыл бұрын
You paid for Elementor? You mean you paid for just 1 year...
@SlayerboyRs
@SlayerboyRs 5 жыл бұрын
When i go to my wordpress dashboard and hover over elementor it doesnt have "my templates". i have pro version too and i have all the other options but that.
@bluemaco21
@bluemaco21 4 жыл бұрын
same
@AndyBramhill
@AndyBramhill 4 жыл бұрын
In my setup, the templates section can be found by hovering over "Templates" which is the item JUST BELOW "Elementor". Then choose "Theme Builder" from the dropdown list. From here you can choose the type of template you wish to create/edit.
@maralleceramics
@maralleceramics 5 жыл бұрын
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...
@darrenchuang6552
@darrenchuang6552 4 жыл бұрын
how to move the thumbnail images all inline at the bottom of the main image?
@aslegacymalfanafanna20
@aslegacymalfanafanna20 5 жыл бұрын
6:04 - latest product; means old product won't be shown?
@soulfulmusicharmoniousmelo2434
@soulfulmusicharmoniousmelo2434 5 жыл бұрын
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.
@endrejuhasz4033
@endrejuhasz4033 5 жыл бұрын
Sometimes I can't even see what you are doing.
@summerchen4692
@summerchen4692 5 жыл бұрын
Why there is a divider on the bottom after I added the Product Title ?
@afrinanampael6042
@afrinanampael6042 3 жыл бұрын
can you please tell me which theme you used in this video
@lauratravin618
@lauratravin618 4 жыл бұрын
Does elementor lets to add product variations? I cannot find them in Elementor.
@NicolasJolyFr
@NicolasJolyFr 4 жыл бұрын
Hello, what is the starter theme to this ? Storefront ? Thank you
@naturallydope247
@naturallydope247 3 жыл бұрын
Hello Theme
@parvesahmed871
@parvesahmed871 4 жыл бұрын
Nice Video
@tarirocoffee5026
@tarirocoffee5026 4 жыл бұрын
Lovely
@lenawebb-bey3642
@lenawebb-bey3642 4 жыл бұрын
I have Elementor 2.8.3. Where did you get the template you are using?
World’s Largest Jello Pool
01:00
Mark Rober
Рет қаралды 104 МЛН
Inside Out 2: Who is the strongest? Joy vs Envy vs Anger #shorts #animation
00:22
I tried every website builder. This is the BEST
19:31
Steve Builds Websites
Рет қаралды 58 М.
Create a Homepage For Your Business With Elementor
18:19
Elementor
Рет қаралды 230 М.
13 Things To Remove From Your Website Immediately
12:33
Orbit Media Studios
Рет қаралды 301 М.
ПАЛОЧКИ + БУТЫЛКА = ВАЗА😳🥢
0:52
polya_tut
Рет қаралды 2,9 МЛН
Dad thought daughter wanted his food #shorts
0:10
The Nixon Fam
Рет қаралды 15 МЛН
Eloá fazendo graça kkkk
0:15
Story Elis e Eloá
Рет қаралды 31 МЛН
Draw your favorite | Inside Out Graffitis
0:30
AmogusMan
Рет қаралды 16 МЛН
How Can parents love their children equally? #shorts
0:38
mountainlion5
Рет қаралды 9 МЛН