How to create a custom Cart Page with Elementor and Woolementor in Wordpress

Рет қаралды 105,572

Күн бұрын

Hey guys, in this video I'm using the free version of Woolementor that allows you to style the cart page in Woocommerce much more than normal. I'm also using Elementor Pro to customize a lot of other pages in this Woocommerce Elementor Store.
The other episodes of this series: livingwithpixels.com/playlist...
The page with all the links: livingwithpixels.com/links/
Woolementor website: woolementor.com/
→ Software I recommend
Hostinger for affordable webhosting: livingwithpixels.com/hostinger
Siteground for premium webhosting: livingwithpixels.com/siteground
Elementor for no-code web-development: livingwithpixels.com/elementor
Figma for Web Design: livingwithpixels.com/figma
All recommended software & discounts: livingwithpixels.com/software/
→ Starter Guides for Beginners
Elementor Starters Guide: livingwithpixels.com/elemento...
Figma Design Starters Guide: livingwithpixels.com/design-g...
→ Full A-Z Courses
Elementor Pro Mastery Course: livingwithpixels.com/elemento...
Figma Design Mastery Course: livingwithpixels.com/design-c...
Business Course: livingwithpixels.com/business...
→ Social media
Tiktok: / rinodeboer
Instagram: / rinodeboer
Twitter / X: / rinodeboer
Some of the links above are affiliate links, which means that I earn a commission when you make a purchase via my link. Thanks a lot if you decide to do that! I couldn't make all these videos without it.

Пікірлер: 163

@suzannepowell-simplebusine5988 11 ай бұрын

woolementor is now called CoDesigner. Great tutorials btw

@AmanYadav-vb7bf 2 ай бұрын

thank you brother

@ryangonzalez5079 2 жыл бұрын

For those who are still have issues with their cart becoming a horizontal scroller on mobile I found a solution. First the new plug name in his video is called CoDesigner (formerly Woolementor) the widget you want to use for the cart design is called "Cart Items Classic". I also did not need to hide sections on mobile with the "classic" widget in order to make it work. At least for me it worked in Elementor's responsive mode and adjusted itself. You will have to redesign the cart again but at least it works smoothly with no custom CSS. Im using Elementor Pro, Astra theme, and WooCommerce hope this helps everyone experiencing issues.

@favourogbonna2265 Жыл бұрын

i tried to use cart item classic but its saying 'your cart is currently empty'

@lomelif Жыл бұрын

Thank you Ryan! You rock, I was going nuts trying to fix this!

@Onoby88 Жыл бұрын

You're a life saver! Thanks for this, I've been killing myself for 2 days thinking shoplentor was the old plugin and trying to find a way around the cart item issue lol thanks for letting us know the right plugin!

@thebizness5596 3 жыл бұрын

So happy I found you on here. Literally a life saver.

@vinception777 2 жыл бұрын

Hey, this is a great tutorial like always ! For the cart overview you can also go to advanced > positioning > custom width and enter the value you want. Then in the Custom CSS you can enter "selector { margin-left: auto; }" This code will add margin till the sized box touch the right of your screen :)

@katherinelaikwanchan548 2 жыл бұрын

I love your clear and detailed instructions even for a freshman like me ! Bless your work !

@ahmedshalaby6055 3 жыл бұрын

You helped me build my small website, I really appreciate your effort and you nice way of explaining :D

@MPowerMotor 3 жыл бұрын

So much value as usual Rino! Keep it up.

@rifathassannibir8378 3 жыл бұрын

Thanks a lot. Eagerly waiting for the Crocoblock WooCommerce Tutorial.

@tristandahl114 3 жыл бұрын

Rino thank you so much! I've spent forever installing useless plugins and following terrible guides Your videos have saved me so much stress, thank you!

@user-ic6uf1sv7b 3 жыл бұрын

you did a wonderful job. I am in the building a shop, your instruction come in handy!! keep up the good job!!

@Peebals 3 жыл бұрын

Your All tutorial are totally amazing & helpful

@jasmeetsingh88 3 жыл бұрын

You are awesome! Keep up the good work. Thank you!

@bosscreative2225 2 жыл бұрын

Great tutorial. Solved alot of problems. Thanks.

@derizonemusic 3 жыл бұрын

Thanks man, you helped me a lot today!

@a1m1a1a 3 жыл бұрын

I love your videos. Thank you so much!

@zhairahmad4512 3 жыл бұрын

You are My favorite Mentor !!

@mahmutturdi 3 жыл бұрын

Thank you and please keep up your good job.

@levindeheer2056 3 жыл бұрын

Eeh eh je hebt er wel zin in zeg! Heb even een weekje niet kunnen kijken, maar je post opeens super veel haha

@rinodeboer 3 жыл бұрын

Lol

@irfan87548754 3 жыл бұрын

again an awesome video thanks dude

@sujonhossensager2773 2 жыл бұрын

Thanks, bro. very helpful video.

@godgutten 3 жыл бұрын

Hello, can you make a video on how to make a custom search bar and then filter the products? Like you search for a specific thing in the search bar and it opens up in the products tab. Idk how to explain it tbh

@leahstoddard8154 2 жыл бұрын

Thank you so much!!!

@yevatraiding4119 3 жыл бұрын

very happy to discover your vedios ...

@VictorChuyen 3 жыл бұрын

Thanks Love Your Video

@kayan_dev 3 жыл бұрын

best video ever thanks from saudi arabia

@SupernovaSites 2 жыл бұрын

Hey I guess it's called 'CoDesigner' now. Woolementor was really hard to spell correctly so don't blame them for changing the name haha. Looks like they also removed cart and checkout page customization in the free version too. Anyway, your video was very helpful though. Thank you!! I'm also using Hello Theme not Astra so found the limitations with cart and checkout pretty bad!!! haha

@Curleetay 2 жыл бұрын

Yes. I thought I spelled it wrong, but it was also confusing since there is a plugin currently spelled Woolentor that is spelled very similar to the prev name of CoDesigner so it helps that they changed the name

@rortiz77 3 жыл бұрын

I'd like to see a video on creating an events page with registration/tickets of that event where I get their name, address, email, name of extra attendants, etc

@selenefroehlich9138 3 жыл бұрын

how did you get the cart overview to actually look like that in the mobile version?, that the price, quantity and subtotal area are vertically aligned, mine stayed exactly the same on my mobile, all horizontal, I don't know how to change that, please help.

@Nika-io4bz 2 жыл бұрын

having the same issue! Someone please save us! xD

@bourhaneeddinekhelfi8409 2 жыл бұрын

i'am having the same issue, anyone knows a solution!!!

@selenefroehlich9138 2 жыл бұрын

@@bourhaneeddinekhelfi8409 I think it is because he is using the Pro version of elementor, I ended up just using a cart plugin called "Caddy", and used some CSS to change the appearance

3 жыл бұрын

Not bad :) How did you customize the add amount on the product page? Is it applicable to the variations field too? As for cart and checkout, the styles you get if you use Gutenberg is very nice minimalistic and modern💁🏼‍♂️

@xQuty 3 жыл бұрын

Top video! Ik ben overgestapt van de Astro theme naar Rey theme. Echt een super vette thema voor ecommerce websites en ook mobiel vriendelijk. Heb je vaker van rey theme gehoord?

@WesleyNoijen 3 жыл бұрын

Good stuff

@vizhazhan 2 жыл бұрын

For Anyone looking - Woolementor name has been changed to WC designer now

@learningstuff5679 2 жыл бұрын

Thank you!

@nicholaskirby2433 2 жыл бұрын

Seems like they changed to CoDesigner now

@DimiSalviato 2 жыл бұрын

For those that, like me, freaked out when saw the f...ed up design that is shown on mobile, it's simple: in this new version of the plugin, it has split this widget in two: the one we were using is the standard one and is different from Rino's. What you have to do is create another section just beneath it, drag the "Classic Cart Items" and there you go. Just use Advanced -> responsive to hide the standard one on mobile, and the classic one to show only on mobile.

@lassespangsberg5639 Жыл бұрын

I tried to do this, and it worked fine at first. However, I noticed that if you click on the "apply coupon"-button, without typing a coupon code, it started bugging and basically duplicated the cart table.. Have you experienced this afterwards? Or have you found a better solution for the responsive design?

@omapadotesourodh Жыл бұрын

Hi Reno! Thank you for all the great tutorials. I am having an bit of an issue, i have left the fields i don't want to use without any name and on Desktop they keep hidden, as soon i switch to mobile they show up and crawl all up to the top. I have no idea why and how to fix it, i have tried to hide them but didn't work. Thank you

@user-sq1jd7nd8n 2 жыл бұрын

Hi i did everything you did but on system status page its not recognising this cart as the main cart, it says "page does not contain the woocommerce cart shortcode"?

@elizabethsnyder8644 2 жыл бұрын

I was having issues with the mobile response mode showing an ugly slider and horizontal layout that won’t switch to vertices like rino’s. My solution was to hide the subtotal row since it lists the sub total and total below. Not a perfect fix but best I could come up with. Hope that helps someone

@elto Жыл бұрын

same

@prof.cipolla7039 3 жыл бұрын

You are great. Just saying. Thanks.

@mikesilvephotography 3 жыл бұрын

Hi Reno. As an alternative to Woolementor have you considered the Cartflows plugin from CartFlows Inc? It appears to let you redesign the Cart and Checkout pages within the Elementor environment.

@madisonandhouston Жыл бұрын

Thanks for the advice, coz I can't seem to find woolenentor anywhere🤕

@boldathletics 3 жыл бұрын

How do you edit the colour of the "do you have a coupon" and "shipping updated" etc. This cannot be edited in Elementor I'm guessing it's somewhere in the WooCommerce settings?

@kkho2008 3 жыл бұрын

Thanks for your awesome tutorial. I found there is a responsive issue for bottom part of the cart item, not sure if anyone of you come across the same issue. it could be a bug from woolementor.

@AmyB369 3 жыл бұрын

Thank you this is very helpful I am very annoyed elementor doesn't have these options!

@FreshLifeMelody 2 жыл бұрын

What theme are you using ? This style is so cool!

@izakniemann5734 2 жыл бұрын

Thanks for this video. Can I use WooCommerce Blocks with Elementor PRO to customize the "checkout" and "cart"? Or is it not compatible with Elementor?

@JosefRapaport 2 жыл бұрын

Hi Rino..love your tutorials very much...i couldn't find this plugin on the plugin page..did they removed it by any chance? let me know if you know anything about it...thank you

@netoh.5390 3 жыл бұрын

Hi!... somehow the responsive mode is not working fine for me and the remove button in weird... I'm actually setting my website in a local host for testing.... HELP!!

@DiegiitohxOfficialTFM 3 жыл бұрын

hi, same problem helppppppp

@ndon85 3 жыл бұрын

hey man thank you. One question, how did you manage in the mobile view to have the cart items listed in columns. On my computer they show up in line, like in the desktop version, so they do not fit well at all, I have to scroll to the right side to see the quantity and subtotal. Thanks!

@hendrikusjohannes4361 3 жыл бұрын

I got the same issue... Rino? 😬

@JoVeee 3 жыл бұрын

@@hendrikusjohannes4361 same issue. Im stuck!

@yuhanin9881 3 жыл бұрын

now there are four of us. We need ur help !

@yuhanin9881 3 жыл бұрын

has any of you found a solution?

@hendrikusjohannes4361 3 жыл бұрын

@@yuhanin9881 Unfortunately not...

@kiacestudio9381 3 жыл бұрын

Hi nice works Reno! Do you know if it is possible to translate the woolementor plugin?

@selinaprema9731 3 жыл бұрын

I have used woolementor cart overview, however I have two shipping options 1) shipping 2) local pickup. How do I show these options?

@JoVeee 3 жыл бұрын

Is anyone having trouble with the checkout button? It is find when I am editing it on elementor but when I preview it, it is a square shape? I just updated the new elementor, I dont know if that might have been the problem? It was find before the update?

@mohammedshajin8148 3 жыл бұрын

u are doing great and I been referring your videos for my learning and my project thank you I tried this tutorial live but while in mobile view my cart items displays the one in desktop view with the small slider on bottom can u help me

@nayonislam3051 3 жыл бұрын

I love you so much...

@salmanasdesign9751 3 жыл бұрын

Thank you. Does anyone have an idea how to style the Woocommerce info/alert messages? - like 'basket updated' or 'coupon code applied'. It doesn't fit to my design at all! Cheers.

@kiaramckay2 3 жыл бұрын

Hello, How could I come back to my usual cart once I have modified, deleted it ?

@selenefroehlich9138 3 жыл бұрын

the table where the product, quantity, price, etc are, is not visible at all on the table mode, i spent an hour already adjusting paddings, but it just never appears, is it an error with the table version?

@paperbox3615 Жыл бұрын

How do you add the notification at the top where it says - it has been added to cart "view cart"

@salmaali3541 2 жыл бұрын

How can I add "order note" or a special instructions section in the cart page? Also how can I make it update automatically without a button?

@redbot_ai 7 ай бұрын

Is woolementor still available? what happen cause I can't find them

@EVC2877 Жыл бұрын

I have watched a lot of video, I want to make lms system on my website. Please advise me

@danielrevy 3 жыл бұрын

Please make a video about how can i create a nice side cart.

@angi899 2 жыл бұрын

everytime i add my product archive into the website, there are all products i have ever made from different websites too. how can i fix this?

@jonpassmore388 Жыл бұрын

When I added the "Cart ITems" it squished all the columns too close together like it has a fixed width. I set the column to single column 100%, boxed, with stretch section on. Any thoughts on why it is squishing the cart?

@jonpassmore388 Жыл бұрын

I turned debug on and it fixed it.

@cosmic_fox6463 9 ай бұрын

The site provided for woolementor is no longer the correct site and the plugin has disappeared off the WordPress store. Is there a way anyone could please share the plugin kindly.

@lawrenceleng8149 3 жыл бұрын

Very good, playboy

@BangNoerTrainer 3 жыл бұрын

I try to do this, but the web says there is no shortcode on the cart page. Can you give the solution?

@selenefroehlich9138 3 жыл бұрын

hi, my image right on top is not well aligned when i go to the actual website, why is that? please help

@KengD 3 жыл бұрын

I use Crocoblock, it helps a lot. But it would be better to use Cartflows, which I'm waiting for a promotional discount.

@ninivienna2610 Жыл бұрын

Hi. I have not found the plugin anywhere in Plugin store. Is it still in use? Regards

@BangNoerTrainer 3 жыл бұрын

My cart design becomes horizontal align with slider on mobile, not vertically align. How to adit this?

@TheComputerFriends 3 жыл бұрын

What about restoring the default cart if something goes wrong? how?

@dyland.5158 16 күн бұрын

I can't find the plugin. Did it get deleted?

@billionaire_vibes Жыл бұрын

this is not available on wordpress . if anyone know hot to install and get it please reply me . thanks

@daniele7753 Жыл бұрын

Hi!! Someone knows how to edit the img thumbail size!?

@sofiane5582 3 жыл бұрын

Hi, Thanks for the video, really helped me, but there's a problem with the responsivity, the layout and buttons goes overlap on mobile version, please help with that, thank you...

@yolandidutoit3757 3 жыл бұрын

I have exactly this same same problem... I think the product has undergone some updates and these videos are stull using the 'old version'... my mobile page is a nightmare. My products dont stack vertically like Reno's, mine stay horizontal like the desktop an ipad version. It sucks :( Doesnt look like it can be fixed...

@tuduff 3 жыл бұрын

nice, my cart itens not showing.

@gireeshkottayam9972 2 жыл бұрын

can you please make a video about minicart try ? woolentor !

@thersbisht 3 жыл бұрын

Mine is not responsive on the mobile version. What's the problem ??

@devmdad 3 жыл бұрын

Please make a video on custom my account page 🙂

@diveordive123 3 жыл бұрын

why you dont precise elementor pro in the tag?

@tanphatphan6857 6 ай бұрын

👍🏻

@user-tw2gw8zv2u Жыл бұрын

Hi bro, I don't see anywhere this plugin.. Why

@renspks 2 жыл бұрын

Could it be that the Woolementor plugin doens't exist - or changed name? Can't find it anymore.

@rinodeboer 2 жыл бұрын

Ohhh, you are right. I’ve searched and they’ve changed their name apparently. Here is the new website codexpert.io/codesigner/

@EdgarVasconcelos-ld2mg Жыл бұрын

My Update Cart button is not working. When i press it, goes to Homepage. Can you help me please?

@ValeriaRivera-ch1ox 11 ай бұрын

Hey Rino, 2023 here and I'm following your series. Is WooElementor no longer available by now? cant find the login. Thanks

@rinodeboer 10 ай бұрын

That could be, I am working on replacing this whole series. These days you don't need Woolementor anymore, you can just do it right in Elementor Pro itself. They now have great cart and checkout widgets.

@BiagiAgus 3 жыл бұрын

Hi Rino. I couldn't find the theme you are using... can you add the link in the description?

@rinodeboer 3 жыл бұрын

Hey! Just search for Astra within the theme library. Then it will popup 👌🏼

@nickmartin1688 3 жыл бұрын

It it just me, or does Woolentor have huge issues making the cart & checkout pages responsive?

@rinodeboer 3 жыл бұрын

No huge issues so far for me. But the design changes up quite a bit. That’s why I don’t really like them and that’s why I will be diving into Crocoblock in my upcoming Woocommerce videos. But it’s free and that was the goal for this webshop.

@nickmartin1688 3 жыл бұрын

@@rinodeboer I am super keen to see how you go with Crocoblock!

@helloelectronic823 2 жыл бұрын

In word plugin dont have woolementor and how to download

@amankaushal6844 3 жыл бұрын

Please create a crocoblock website. I am not able to figure it out how to use itt. Pleassssssssse pleaseeeeeeeeee

@nilsdeschler3632 3 жыл бұрын

Hey Rino, thank you so much for the awesome tutorial. I've been following along all the steps but I came across some issues that I just cant get rid of and I thought I´d share this here because maybe other people have that problem too - or at least can help me out. It regards the "Cart Items" Widget from Woolementor. On Desk and Tablet its looking good, but on the mobile version tho you can barely see the quantity number and there is nothing I can do about it. It's like shifted down in its box and looks terrible. And when I have the thumbnail sections on hide (in mobile version) it still shows and I cant get rid of it. And when I show the subtotal within the table the "remove" button - the black x - just disappears.... I`d be really greatful if someone could help me put here! Thanks!

@VB-hc9ue 3 жыл бұрын

Same problem

@Vonour240 3 жыл бұрын

Got the same problem here, the mobile version gets really messed up and requires you to scroll right to view the whole table. Did you figure it out?

@mihneafilimon6637 3 жыл бұрын

Same, what did you done to resolve it ? I tried everything....

@sergio_grez 3 жыл бұрын

Same here!!! i was so happy to find this plugin but now is useless because of that problem in the mobile view :(((( anyone found the solution??

@susi2799 2 жыл бұрын

I do have the same problem! Does anyone provide a solution already?

@user-cr2lf9yt8x 3 жыл бұрын

hi , thank you for the video , but on the mobile it isnot showing as rows , it stay coloumns and its really not nice. can anyone help?

@mihneafilimon6637 3 жыл бұрын

same, what can i do ?

@carloszepeda9829 3 жыл бұрын

See @ndon85 comment. It seems it doesn't work that way anymore

@JuULliiiexX 3 жыл бұрын

Hey! Thank you so much for your video. It helped me a lot. Can you, or anybody else reading this comment 😄 explain me why there is still a headline in my cart page that i can’t delete? It says: shopping cart > checkout > order complete and I want it to be gone… or at least in my country’s language, Germany. thank you!!

@rinodeboer 3 жыл бұрын

Hey! Awesome to hear. Always make sure to set the page layout to "Elementor Full Width" via the gear icon in the left bottom corner.

@marketplacethings3231 2 жыл бұрын

does wolementor has a app

Жыл бұрын

Woolementor is now called CoDesigner due to copyright issues

@MrsGussDoughboys 2 жыл бұрын

Woolementor in now called CoDesigner

@JosefRapaport 2 жыл бұрын

ooops...its me again. It looks like elementor has changed the woolementor plugin into CoDesigner plugin which seems to offer a lot of customisation options

@diegoalbornoz3847 3 жыл бұрын

I can't change the color of cart overview, anyone else? I use Astra theme

@fnicolay100 Жыл бұрын

Apparently the Woolementor plugin no longer exists?

@omerta3393 3 жыл бұрын

first 😍

@Kevin-nd6yd 3 жыл бұрын

Wel jammer dat je de cart page niet met Elementor pro kan aanpassen. Hopelijk in de nabije toekomst wel!

@rinodeboer 3 жыл бұрын

Inderdaad 👌🏼

@excentions8667 3 жыл бұрын

theme name?

@rinodeboer 3 жыл бұрын

Astra!

@JeffDietzphoto 3 жыл бұрын

why is it seemingly impossible to find a video to just set up a simple check out one option. You skip in this video over half of the elements which is how to set all this up from the beginning.