How To Customize The WooCommerce Cart Without Plugins
Vložit
- čas přidán 25. 01. 2023
- Easily customize the WooCommerce cart page with nothing more than a little bit of CSS. No need for bloated plugins, complex template editing, or even a single line of php.
Due to length, you can easily copy the CSS covered in this video from my (very much unfinished) website: buildingonwp.com/resources/cu...
Hero status officially achieved. Thank you Josh!
Thanks
Thank you for these!
Thanks for your great work, Can you please make a video customizing flatsome theme cart and checkout pages to make them more modern?
Hi @mohamed - thanks for reaching out! It's been years since I've used Flatsome. Use Pro Theme + Cornerstone 100% of the time for my builds.
That said, I don't see why you couldn't use the standard woo shortcode [woocommerce_checkout] and then implement a version (probably slightly altered) of the CSS I provided.
Hi Josh, I'm using Pro and Cornerstone with the Integrity stack. I tried to use your code but some elements can't be customized even with the Starter or Blank stack. Do you think it's possibly due to a plugin conflict or is there something else to set in the Cornerstone settings to have the freedom to do whatever I want ?
Btw, thanks again for your amazing videos !!!
Hi @HackGBX - looks like it does still work within the integrity stack. But requires the removal of the wp-element-button class on line 45, 53, and 111. Let me know if that works for you.
Hello, the content panel is very different from my wordpress, I wonder if you use plugins and applications?
If I add this CSS code via Customiser, will it work for Astra theme?
Hi @Süleyman - I can't speak for Astra theme as they may have some of their own template overrides on the cart layout. That said, yes, if you place this CSS into your default CSS Customizer it should apply. The problem there is that it will apply globally so it may also adjust some of your other pages styles. In this case, you'd need to add some CSS to target just your cart page. I mention that a bit in this video here: czcams.com/video/EiD_ETdj8g4/video.html
I use the Cornerstone framework which is not necessary for this tutorial to work at all as it is purely CSS. But Cornerstone is an incredibly powerful site builder for WordPress that comes bundled with Pro Theme (affiliate link to learn more about Pro/Cornerstone if you do decide it's right for you: affiliates.theme.co/idevaffiliate.php?id=2477&url=38
It can be downloaded as a separate plugin for other themes but if you use Pro Theme it is baked into the theme core.
Working on my site but need help. Is there any way I can book some time with you? Not sure how to DM on here.
Hi @Juan - don't have my site for this channel done just yet but feel free to drop a line over at buildingonwp.com/contact/
the code is not working for astra theme :(