How to create a custom theme in WordPress from scratch - WooCommerce (Underscores & Bootstrap)

[@RaddyDev]

There have been some WooCommerce updates and the SCSS files are now located in "wp-content/plugins/woocommerce/legacy/css"

[@areksz.7161]

Hi Raddy, I don't see "legacy" directory in that source /wp-content/plugins/woocommerce/ . Is something was change again in woocommerce plugin?

[@RaddyDev]

@@areksz.7161 Yep, they've changed something again. I found the files here: github.com/woocommerce/woocommerce/tree/trunk/plugins/woocommerce/client/legacy/css I haven't looked into the updates lately and I am unsure what is going on

[@areksz.7161]

@@RaddyDev Thank you for that link and thank you for that awesome tutorial. Thumb up.

[@karmel2711]

@@RaddyDev i am again unable to find the files. I literally went through every folder :D Do they not exist anymore?

[@RaddyDev]

@@karmel2711 They have been moved into a legacy folder here: github.com/woocommerce/woocommerce/tree/6.5.0/plugins/woocommerce/legacy/css It looks like they are not using them in the new version. I am not entirely up to date with the updates

[@nithinkzy15]

I always felt helpless being a developer and searching for wordpress tutorials and end up with no code tutorials. This is really the best one I found on the whole KZbin that gave all the necessary infos for a developer who need to understand the whole Wordpress and start building. Keep going Thanks Sir !!

[@RaddyDev]

Great to hear!

[@stublad]

Hi Raddy, I just wanted to say thank you so much for creating this video. I kind of got the concept of CSS before but never really knew how to code something up from scratch. I also have issues with concentration and ADHD, but somehow your video stuck in my mind and I've finally been able to put the pieces together and I really feel confident that I'll finally be able to create my own WooCommerce theme using Bootstrap now. You explained things really well, the quality was great and you covered everything that crossed my mind. I can't wait to see what else you create in the future. Thanks again :)

[@RaddyDev]

That might be one of the nicest comments that I have received. I am really glad to hear that you found the video easy to follow and I appreciate your comment. Thank you!

[@jimbob7424]

You are not alone my friend. ADHD makes my life as a budding web designer so difficult!!

[@rahul.arora.ra2]

M using Woocomerce, Whenever I click on Place Order , it is taking 10-12 seconds to go to thank you page for placing order. Also, loading is showing upside of the page (scroll up to see) and not on the front display screen after clicking the button. If anyone reading this. Please reply🙏

[@gabriel_valdivia]

This is a great tutorial. I feel the same as many others. This method of working with Local, Underscores, SCSS, & Bootstrap is very easy to grasp. Thank you!

[@RaddyDev]

It's a great combination for sure. Thank you for the comment!

[@jimbob7424]

This Is amazing, I've been using various different builders for my clients and I am not happy with performance and bugs. After watching this I can confidently build a custom wp theme. Thanks dude

[@RaddyDev]

Thanks, Mr. Pixel! I also tried a few different builders and came to the same conclusion

[@yummybims2991]

Please how then can clients edit custom wordpress website themselves without page builder? Please help.

[@RaddyDev]

@@yummybims2991 answered your other comment :)

[@yummybims2991]

@@RaddyDev Thank you for your time.

[@kovereduard637]

hey man, i know it's kinda late but are you still using this method?

[@quadderboy123]

This is the best wordpress tutorial. Hands down!

[@RaddyDev]

Thank you, I appreciate you saying that!

[@t3ntube357]

Thanks man, your channel help me a lot of times, you deserve more attentions really.

[@RaddyDev]

People like you inspire me to keep going. Thanks for the nice comment!

[@postmortemm]

Hey, just wanted to say thank you for this tutorial. The amount of information in these 3 hours is incredible. Finally figured this whole scary php-thing out. You make programming look easy !

[@Laura-001]

3 years later but it helped me a ton! Thank you so much

[@eduardoandreeeeeee]

Oye gringo!!! Te pasaste, este video debería estar de los primeros en KZbin! es todo lo que busque por mucho tiempo ❤

[@pagenotfound_code_404]

This is amazing! All i things i wanted to figure out - 1. where to get bare-bones theme template 2. using bootstrap 3. how to also theme woocomerce Are listed here! Just saved me a lot of time where i would need to figure out this stuff for myself!

[@karansingh-jx8nc]

took me almost three days to complete this awesome video

[@RaddyDev]

Nice work!

[@user-tt6nc6mo7k]

Mate spot on. Just what I was asked you about on your other woocommerce theme development video.

[@RaddyDev]

Had a lot of issues exporting the video, but it's all good now

[@grantayers6592]

Here's a little tip for ya. You're pretty good with the vs code short cuts when it comes to divs (.row ---> ) but.... you can do it with any other html tag like the section tag (section.row --> ) and if you want to give it an id: (section.row#mysection --> )

[@grantayers6592]

You can also chain them, like .bg-primary.text-white -->

[@RodrigoMendoza7]

First of all, thank you very much for such a wonderful tutorial on theme and woocommerce development. The only thing that is missing (you can cover it in a future video) is to make the title and body of each section dynamic as right now they're hard-coded.

[@RaddyDev]

Thanks for the comment, Rodrigo. I was planning to do the front page dynamic in another tutorial, but totally forgot about it. I might have to revisit it

[@RodrigoMendoza7]

@@RaddyDev Great. Looking forward to it.

[@evzyl8409]

tysm sir this helped so much i cant belive its free

[@Gaming-by-Susy]

Raddy, thanks for sharing good approach , its wonderful tutorial.

[@RaddyDev]

You are very welcome

[@BucurIonNiculae]

This tutorial is amazing. Congratulations.

[@RaddyDev]

Thank you, Bucur!

[@dannycastro1710]

This video was really helpfull, thanks you so much for your work... greetings from El Salvador

[@Viktorres1]

Thank you for your video and your channel, Raddy!

[@ApoorvDwivedi]

You are a genuine lifesaver man

[@RaddyDev]

Haha, thank you! Glad to hear that you found it helpful

[@shadow_3213]

A very helpful tutorial, with lots of useful information, it helped me a lot, thank you very much!!

[@RaddyDev]

Thanks for the comment, Shadow! Glad that you found it useful

[@javiermeza4178]

love uuuuu youre my master!, you save me a lot of time of documentation

[@RaddyDev]

haha thank you!

[@eugenyk6936]

I watched all the video. Good job!

[@RaddyDev]

I hope that you found them useful and you put the skills and knowledge to practice

[@zygarde2076]

Hi, at 18:28 I have a issue where it doesn't make any CSS changes such as turning the background to aqua. I did change the name consistently from the start of the project to a different name. Does it have to be pawsgang or can be it a different name?

[@RaddyDev]

You'll have to do some debugging to see why your stylesheet isn't linked. You can inspect the source code and look for "main.css" to see if it has been added. The name doesn't matter as long as you calling the correct function function yourthemename_scripts() { } and then add_action( 'wp_enqueue_scripts', 'yourthemename_scripts' );

[@varunpal-bz8ex]

Hey did you find the solution?

[@adil8132]

Thank you this is amazing ! 👏👏

[@mostafizurrahman5648]

I think this tutorial will help begginer like me. Thanks a lot brother.

[@RaddyDev]

There is always something new to learn. I hope that you find it useful! Thanks for the comment!

[@alex--255]

Thanks for the great work, Raddy!

[@RaddyDev]

Thank you for watching! I hope that you found it valuable and I am looking forward to make more WordPress related videos

[@mazdak6952]

always make tutorial like this one you are a hero

[@RaddyDev]

haha thank you, Coolio! I will do

[@mazdak6952]

@@RaddyDev ❤️❤️❤️❤️🌹🌹🌹🌹

[@adnanamin3666]

Loving this! KEEP UP THE NOBLE WORK! :) Thank you.

[@RaddyDev]

Thank you! Will do!

[@wafafatima5042]

Thank you so much for this wonderful tutorial

[@RaddyDev]

Thank you for watching, Wafa! I am glad that you liked it

[@anujkumar-wk2df]

Big thumbs up. Very helpful for a beginner like me.

[@RaddyDev]

Thank you, Anuj! I appreciate it

[@ginger-the-brave-cat]

Just one word to say "SUBSCRIBED !"

[@RaddyDev]

Thank you! 👊😎

[@susa8401]

This was reaĺly helpful. Thank you🙏

[@RaddyDev]

Glad it was helpful!

[@deciosales]

Great tutorial my friend, really well explained, thank you very much :)

[@RaddyDev]

Thank you, Decio! This one turned out well 👌

[@DevBossMa]

Thank you so much @Raddy 😘

[@RaddyDev]

you are most welcome my friend

[@yuris6244]

outstanding tutorial!

[@RaddyDev]

Thank you!

[@karansingh-jx8nc]

Thanks Bro for these kind of videos ....❤️

[@RaddyDev]

My pleasure 😊

[@lionelgibaudan3592]

Hello , at @1:30:00 you tie jQuery as a dependency into the array() but in Bootstrap 5 jQuery is no more needed I guess........

[@RaddyDev]

I don't see jQuery in there, but I guess that you are talking about the popper.min.js. I don't know if I ended up using that and I probably should have just included the bootstrap.bundle.js instead so we have everything. The popper.js is only for tooltips and popovers and the bootstrap.bundle.js has everything. You are right that Bootstrap 5 uses Vanilla JS now - no more jQuery. Usually, you have jQuery as default with WP

[@muneebahmad8772]

My question is why you are not using drag and drop builder like elementor etc.? I have heard about wordpress that it doesn't require any coding?

[@RaddyDev]

I have done before, whenever it made sense to do so. WordPress is great for both programmers and non-programmers. Drag-and-drop editors like Elementor let you build websites without coding which is great. They've improved significantly over the years. Saying this, knowing how to code and understanding WordPress on a deeper level removes limitations, you have complete control and flexibility of what you can build. Sometimes we need custom solutions and drag and drop editors are just not enough. At the same time, drag and drop editors are all you need sometimes. I guess, choose the right approach for the job that you need to do

[@Adrina-y8f]

Thank you very much, I have a problem main.css is not apply on website!!! I already compile the css files exactly like on video but still change is not apply to the front page

[@RaddyDev]

Open and double check your main.css to see if the styles are there. Then double check the path to your stylesheet. What you can do it right click on your page and view the source code. Find the CSS link and click on the file name. If it opens and everything is there then you should be okay. If it breaks, you haven't linked it. Could be a path issue or a typo. Let me know how it goes

[@Adrina-y8f]

@@RaddyDev hi i checked the source code and i can see the CSS and all the files has been linked but still, how can i send you the screenshot of my source code? but i think everything is fine still CSS not apply to the frontend. I'll be appreciate if you can help me with this

[@Adrina-y8f]

@@RaddyDev thanks it has been fix it was path issue, CSS files was in bootstrap folder. Also thanks for such a helpful tutorial that you made i am using it to create my custom theme. thanks a lot one of the best tutorial in the youtube. keep it up

[@RaddyDev]

@@Adrina-y8f Glad to hear that you fixed the issue. Thank you for the kind words, Neda! I appreciate it

[@sumukhakb2701]

Amazing tutorial. I think local is quite slow when compared with xampp.

[@RaddyDev]

Yeah, it might be. It's just nice and easy to set up initially

[@arcacalderon]

Thanks for the great tutorial. Can you please help me on how to apply the mini cart on announcement bar?

[@RaddyDev]

Sure I can. Could you not copy the cart code and put that in the announcement bar?

[@AkkumaruRz]

Hi Raddy, awesome tutorial! I'm watching this to learn to develop a premium Wordpress theme (with a goal to sell it). Is there some kind of requirements checklist a premium theme should satisfy? Thanks again!

[@RaddyDev]

I don't have one in had to send over, but I am sure that you can find something on the web. Also it depends on where you publish your theme. Some websites did have their own requirements for publishing your theme

[@enterodesign2960]

This video really helpful to me. Thanks a lot

[@RaddyDev]

That's awesome to hear, Entero! Thanks for the comment!

[@OZTutoh]

As a new developer, I've always wondering if it was a good idea to mix Javascript with WordPress PHP. I can obviously see that it is a good idea.

[@diy0227]

thx buddy i recommend it to anyone i see

[@RaddyDev]

Thank you! I appreciate that!

[@amirmatadorr]

That was a great tutorial,this video help me in wp & php ThankYou for making video,GoodLuck

[@DavidSut]

Hello, Raddy, I am just expirimenting with web development. What I've learned already is the less the plugins the better. I try to be as lean as I can plugin wise, can you please tell me in which of your video you showed how to create search form without plugin?

[@RaddyDev]

That's great to hear. I hope that you enjoy it. I actually don't know if I have a video where I create a search. The normal WordPress search can be added fairly easy without plugins. Google it and you'll see many examples. It should be fairly easy to do

[@matthewbrown6688]

Great video. I would love if you showed how to upload design from local to actual server such as hostinger or something. Is it as simple as using the "all in one" tool? I have done this with themes, but never a custom theme. Thanks for the great work

[@RaddyDev]

Hey Matt, thanks for the comment. The process is the same with all themes. The All In One tool should do the job to migrate it without any problems. Next time I do a video on WordPress I will include the publishing process

[@Grepsoft]

Thanks for hard work. I hope you get more exposure and subscribers :)

[@RaddyDev]

Thanks for the nice comments. It's slowly growing and I think that is just going to take some time and tons of work. I want to do so much more, but the longer videos always slow me down

[@marioroberto55]

Excellent video, I followed all the steps but the submenus do not scroll down, they scroll horizontally, how can I do

[@RaddyDev]

Do they look broken, like CSS broken? Bootstrap does have examples of Drop-Down menu's that you can potentially copy-paste and modify to your needs. That would be a good fix as they also do a lot of accessibility stuff

[@marioroberto55]

@@RaddyDev Hello, I have downloaded the template that you have designed throughout the video and when I add several items to a menu it does not display them down, it does it to the right, I am just started. if possible your help to do it

[@rumadztwal8514]

Great video it was just difficult to find. Please make the alternative title "How to create a custom theme in WordPress from scratch" or put it somewhere in the description. That's what I kept typing and I couldn't find your video. Thank you for your work

[@RaddyDev]

That's a great suggestion, thank you!

[@Buddhikasenevirathna]

thank you for such a nice tutorial....

[@RaddyDev]

Thanks, Buddhika. Glad that you like it

[@Sebastian-zs8cp]

Hello, how complex can the project be? Can I have a news site between customer and seller?

[@RaddyDev]

You can make it as complex as you want. Wordpress is fairly flexible. Just try to avoid installing too many plugins

[@Sebastian-zs8cp]

@@RaddyDev i understand i design and program for plug-in

[@angelprema5475]

Great Video! Im new on soft soft, and tNice tutorials tutorial really helped

[@RaddyDev]

Glad to hear that you found it helpful

[@Adrina-y8f]

hi Raddy, why widgets and customization items does not showing in my theme when i want to customize my theme it will said Your theme has 2 widgets area, but this particular page doesn’t display it. I also installed the gutenberg plugin and my wordpress is the latest version but still get the same error when i want to customize my theme. i even can not edit my pages or add any other new pages. Also i am trying to add the slider to my frond page from bootstrap but unfortunately the carouserl will not appears on the front page it just show to block of next and previous and slide-2 will not work. I 'll be appreciate if you help me with this!!!!

[@RaddyDev]

Is it a custom theme that you build? It's hard for me to say why that is happening. Guttenberg should be there as default, you shouldn't have to install it. For the Bootstrap slider, you need to make sure that you have the Bootstrap CSS and JS file to work

[@Sebastian-zs8cp]

hi, is it possible to have 2 different nav one for website and another for the store?

[@RaddyDev]

Yes you can do. You'll have to program that manually, but it's fairly easy to achieve. I am sure that there are plenty of example on the internet

[@horsemanvan]

Thanks a lot for your this great tutorial , i just wondering why the footer Colum doesn't appearing in the widget area , i've checked the code of php many times but it seems it dont work , is it because of the new version of wordpress ? Looking to hear from you . Thanks a lot again big up to you Raddy

[@RaddyDev]

That's strange. I very much doubt that it's the WordPress version, but I will double-check on my project. I will update everything and see if it disapears

[@horsemanvan]

@@RaddyDev Thanks a lot Raddy

[@RaddyDev]

@@horsemanvan Okay so I don't exactly know what has changed, but it looks like Widgets have been removed from WordPress. The solution is to install a plugin called "classic widgets". It has over 1 million downloads. No idea when that happened, but I hope that this helps

[@horsemanvan]

Thanks a lot @Raddy it works ! i faced an other issue while im adding a new page , i couldn't find the template drop down on page attributes , when i switch to standard template 20-20 it works but the custom one not ? in the tutorial 32:06 no template default section , is there any solution for that issue ? Thanks again .

[@martinkaspar5095]

Raddy - i cant thank you enough. 😍 I love how you talk through every step and explain all! Your content is absolutely excellent. I very much appreciate your videos and am learning a lot from them. The global Wordpress-Community is LITERALLY a learing community. So plz help in educating the world. can you come up with a new video that covers the new version . 6.1 This would support the worldwide communuity - We need you!🙏🙏🙏😊👍🏻😳♥

[@RaddyDev]

Thanks for the kind message, Martin! I've already planned two new WP videos using 6.1. I will make it happen

[@peter-grietdecoensel-fiere5537]

Hi Raddy, great tutorial. Do you know how to make the underscores menu to work with amp? kind regards Peter

[@RaddyDev]

I haven't looked into that. I assume that it should just work. I need to test that, did you use the APM plugin?

[@joshbleijenberg4000]

Is it also possible to create a shortcode of the cart? I am making a custom navbar with html and css in wordpress with woocommerce. But I want to add a custom shortcode for the cart functionallity.

[@RaddyDev]

Have a look online to see if there is a shortcode for that already. If not, you can create a custom one. They are not too hard to make, look into the official documentation as they have a lot of good examples. I am sure that there will be a ton on youtube videos on that as well

[@_ajtifix_2424]

Hi Raddy, thanks a lot for this tutorial, it helped me alot to understand WordPress. My question is wihen i copied woocomerce css folder to css folder, it only shows me css files, not scss files. Can you help me understand why is that so?

[@RaddyDev]

So you installed WooCommerce, and inside "wp-content\plugins\woocommerce\assets\css" there is no SCSS files? Only CSS? That's a little bit strange. I will have to re-install the latest WooCommerce and see if that happens to me

[@_ajtifix_2424]

@@RaddyDev Yes, installed it normaly, but when i go to wp-content\plugins\woocommerce\assets\css there is only css files. Not one scss there.

[@RaddyDev]

I just looked it up and it looks like they've done some updates and you can now find the files in "wp-content/plugins/woocommerce/legacy/css". I wasn't aware of that change. I need to look it up and make a note. Thank you for letting me know and I hope that this works for you

[@gabriel1azara]

@@RaddyDev Same thing happend to me, I'm glad you've said where to find the files

[@עמנואלספרד]

thank u so much!

[@RaddyDev]

Thank you for watching!

[@rogelio6742]

Great tutorial! 🙏🏽

[@RaddyDev]

Glad that you like it! Thanks for the comment

[@amirshrestha7091]

First of all really liked the videos, its very helpful. And I want to ask you something about the login and register form if we want to add then which plugin would you suggest and how?

[@RaddyDev]

I think that WooCommerce already offers login / register. Then you have a lot of options depending on what you want to do. Usually the other plugins do cost a little bit

[@pixelmachine]

Hi! I love the course so far! Where can I find the logo for the site? Many thanks!

[@RaddyDev]

Hi and thank you! The link is in the description. It's in the Adobe XD file. Let me know if you don't have Adobe XD and I will extract it for you.

[@ngoclam98242]

Thank you so much, this is an amazing video

[@RaddyDev]

Glad you liked it!

[@stefanomazziotta1270]

Fantastic explication :)

[@RaddyDev]

Thank you!

[@anhxel]

1:57:16 WTF was that "rouuuuuuuuuuuu" 🤣🤣

[@RaddyDev]

😂😂😂😂😂😂😅

[@anhxel]

@@RaddyDev Awesome tutorial bro, it helped me a lot

[@roboromeo2669]

great video mate !! how can i add a add to wishlist icon on header near cart ?

[@RaddyDev]

Thank you, Robo! There are a couple of Wishlist plugins for WooCommerce that you can try instead of coding one yourself. There is an official one that looks good, but it's not free. Webtoffee Wishlist is supposed to be free, but I am not sure what are the restrictions.

[@PuffEnis]

Bro can you please upload a video telling me how can i add this theme into my original wordpress site?

[@RaddyDev]

All you need to do is to copy the theme folder inside your wordpress site in the /wp-content/themes folder. You'll see the other themes there as well. Then you can activate it from the WordPress dashboard and that's pretty much it

[@starfjord]

1:53:15 Anyone know where do learn php styling if you wanna "go crazy"?

[@RaddyDev]

You can learn CSS in general and that would help you out to style whatever you like. If you want to write custom functions for WooCommerce, they have a lot of examples in their documentation. Then you can style them however you like

[@ハン.タイントゥアン]

Tks for your imformative and useful video.

[@RaddyDev]

Glad to hear that you found it informative! 👊😎

[@jordinodejs3291]

Hi, I wander why you don't need to use navwalker to integrate bootstrap structure into wordpress . By the way, great video!!

[@RaddyDev]

I don't know too much about it and I don't understand the benefit. I have to try it out

[@pratikshamangrulkar70]

"Hey there! Your videos are great. I wanted to ask if we use platforms like Underscore and Bootstrap, will we be able to sell these themes on ThemeForest legally without any copyright clam for frameword / blueprint we are using or may be some license issues? I'm concerned about licensing. Also, where can we get a custom license for the themes we create?"

[@Manhleban]

Hi Raddy! Nice tutorial. But I believe you don't need to write $theme-colors: ( "primary": $primary ); after overridden $primary variable. It is set in Bootstrap’s $theme-colors map already. But I have not tested it though )

[@RaddyDev]

I think that you might be right. The variable $primary already exist so I could have overwritten it and not do the map. Thank you for pointing it out and thanks for the comment! 😊

[@yummybims2991]

Hello, please I still see the below code in style.css $theme-colors: ( "primary": $primary, "primary-opacity-8": $primary-opacity-8, "gray": $gray, "sale": $sale ); Please what do I need to change it to? Thank you.

[@RaddyDev]

@@yummybims2991 You need to be working on 'main.scss' and then compile that file into 'main.css'.

[@yummybims2991]

@@RaddyDev I have figured it out. Thank you so much.

[@sid2437]

Luved the tutorial and would love to follow it in due course to get some better expertese in WP Theme Development. Wished I could request you for a detailed session/video on SAAS and Bootstrap stuff that you did here. The one here is too much for a beginner like me.

[@RaddyDev]

I like the idea, Sid. It's definitely something that I would like to do

[@sid2437]

@@RaddyDev Would be looking forward to it. Sorry for arriving late here.

[@DávidMészáros-d3c]

Hi Raddy, I've started to work on a new theme based on your video and I've noticed a strange behaviour of shopping cart update. If I add a product to cart from ex. the home page featured product section or basically from anything but the single product page, the cart counter won't update only if I refresh the page. However, if I add it from the single product page, then it refreshes the cart immediately. Why?

[@RaddyDev]

That's strange that it doesn't work on your home page but it works on the others. It makes me think that you might have something on your home page that conflicts with the script somehow. Could you inspect your website, open the console and try adding a product to the cart? See if you get any errors. Also enabling WP_DEBUG could help out... could be a plugin conflict.

[@DávidMészáros-d3c]

@@RaddyDev Hi Raddy, Thanks for your response. Probably my situation was not transparent enough. Cart refresh does not work in cases where product add-to-cart button is class="button product_type_simple add_to_cart_button ajax_add_to_cart", however it works when it is class="single_add_to_cart_button button alt". It does not matter where the cart counter is placed, ex. header, footer, main etc. Somehow it is related to button classes. I have investigated your video and it works for you flawlessly. Plugins were deactivated for the sake of troubleshooting, but it did not help sadly. What I am using: Clean Underscores theme + Bootstrap 5.3 Plugins: - Advanced Custom Fields - Advanced Woo Search - Duplicate Page - Safe SVG - The SEO Framework - WooCommerce

[@DávidMészáros-d3c]

Well, I implemented your theme content from github, and it works. Then for sure I have something wrong at my files. I start the investigation and provide with the solution once I found it. It will be useful for someone maybe.

[@DávidMészáros-d3c]

Resolved: in functions.php ther was this section: function woocommerce_header_add_to_cart_fragment( $fragments ) { global $woocommerce; ob_start(); ?>

[@vmedia7048]

Thank you for your videos , Ive watched them twice and it has really helped me. i have been in the game for a while now and im familiar with bootstrap... watching your videos i noticed you didnt use the bootstrap css cdn why is that ?. And , after adding that file ...absolutley nothing works like how bootstrap would normally work.. none of the columns .rows extra they just align one above the other, is this becasue of flex box

[@RaddyDev]

Using CDN is also fine, maybe better in some cases. You'll probably get a faster load. It shouldn't be any different. Double check to see if you have the correct path and file. I remember on one of my videos giving a row the class of flex which already has flex as default, but that was my mistake, but it makes no difference. To me it sounds like you haven't included the bootstrap file and that's why the responsive web design isn't working

[@vmedia7048]

@@RaddyDev Thats why youre the master, yeah thats what it was. thanks alot man, you really helped me out big time

[@vanangnguyen9873]

to respect. how wonderful

[@RaddyDev]

Thanks, Văn!

[@mubashirbashir4753]

I've watched your video, and I'm facing a client request to add an admin dashboard to their WooCommerce site, with a reference site in mind. Could you provide some guidance on how to accomplish this task? Your assistance would be greatly appreciated

[@RaddyDev]

WordPress already has the admin dashboard and you can enable the Screen element - WooCommerce from the Screen options. What does your client need to see?

[@Hebhansen]

Hey Raddy - Can you explain how I can add a single product template I can customize in Gutenberg. 1) I want a safe template that is never overwritten at upgrade or new theme 2) setting up in blocks is important. I am on WP 611, Theme Twenty Twenty Three and latest Woo. It would be a great help

[@西田ラウィハン]

another great video! Thank you hope you make it hd not 360p

[@RaddyDev]

Thanks for the comment. Give it a few hours and it should become 4K. Not sure why KZbin is taking so long to process the HD version

[@RaddyDev]

The HD version is now available here

[@tee-hee9553]

Raddy Sir, I would like to ask why my theme auto delete the whole file of my theme that i download from underscore when I change some code inside the folder ? this is so painful💀💀

[@RaddyDev]

Hmm that's strange. Did you figure it out?

[@garyferguson8275]

Hey Raddy I'm having an issue with my theme when I upload it onto wordpress. The product images aren't showing on the gallery or product page, when I remove the srcset with devtools it shows up on the gallery, tried disabling them in function.php but didn't seem to work. Do you have any ideas on how to fix this? Thanks in advance!

[@RaddyDev]

It's hard to tell without having a look, but I would assume that it's the source of the images. Make sure that you use get_template_directory_uri and then link your image. This goes to the directory of the theme and then you add /img/yourimage.jpg ...

[@lionelgibaudan3592]

Hello, I don't understand why you put sometimes 'd-flex' class on a .row div, as all the .row divs are already in display: flex now in Bootstrap. You can also replace identical values of padding or margin with a shortcode about the axis, eg: replacing 'pt-2 pb-2' with 'py-2' (padding on the y axis) , the same about x axis (right and left)

[@RaddyDev]

I don't remember putting d-flex on the rows. On everything else is so we can enable the flex behaviours. The py is cool, but most of the time I was kind of guessing how much space I want. It didn't cross my mind either. Thanks for the suggestion anyway, and I hope that you have a great day!

[@lionelgibaudan3592]

@@RaddyDev So you did a few times, look at @2:39:30 line 37 for example, but it's not a crime ;-) it doesn't hurt, and sometimes it helps, to accentuate the default values (as a reminder) ;-)

[@humayunsheikh56]

Hi sir, i got this error this site's wordpress url settings do not match the host set in Local How can i solve it...?

[@RaddyDev]

It might be because the site domain name is different from what is in your database. Have a look at the 'siteurl' in your database. If it's different that might be the reason. I hope this works for you my friend

[@ovidiublaga1]

Hello. Can we add a class or attribute to the slider ( carousel) on the first page to make it start automatically and not by clicking the arrow? Thanks

[@RaddyDev]

You can add the attribute interval="2000" and that will cycle the items. Change the "2000" to have the speed the way you want. Default is 5000. You can also do keyboard events, pause on hover and soo on

[@pythonyousufparyani8407]

I am unable to find logo svg picture in your github repository. Also, for your other WooCommerce tutorial, I don't know where to get the pictures and other files. Please help.

[@RaddyDev]

I have the Adobe XD file on my blog. Link in the description. You can open the file and extract the logo from there. All photos that I use are from unsplash dot com and they are linked in the description and under each blog post. I hope this helps

[@alihamdane]

hi, i have an issue, in your amazing tutorial you dont kae a filter, can you help me ho to i ge filter by price in my shop page

[@RaddyDev]

I am not sure if this is going to work, but have you tried the shortcode: [woocommerce_product_filter_price]

[@AkhilrajKARKCREATION]

Pls do all pages and paymwnt gateway

[@RaddyDev]

Thanks for the suggestion, Akhil. I should do that. I need to think about it and figure it out

[@raysupport4088]

Thank you!

[@RaddyDev]

👊😎

[@harichris4171]

Hi bro how to download your theme.

[@RaddyDev]

The link should be in the description. Click on the link and you should be able to download it from there

[@hardikchosla1610]

it Amazing ❤❤

[@wodusOS]

I would like to open my shop on wordpress, is this method 100% safe for commercial use? btw great tutorial!

[@RaddyDev]

WordPress and WooCommerce are secure by themselves, however you need to make sure that you are using a reputable host and keep your website up to date. Other than that it's safe for commercial use.

[@wodusOS]

@@RaddyDev thanks for the answer

[@robbiemoore6383]

Hey, I am brand new to coding and web dev. This is a great tutorial to follow so thank you! At the moment, I am trying to input the "hamburger icon" and I have copied your code and can't seem to get it working. The code is the same but the icon just wont appear. I skipped the announcement bar section as for what I am trying to create, it is not needed. Is there anything in that section that couldve effected how this works? If not then do you have any suggestions on what the problem may be?

[@RaddyDev]

Is it just the icon that is not showing up? To be able to use bootstrap icons you need to link this CSS file:

[@robbiemoore6383]

@@RaddyDev Yes, it's just the icon. There is no error for the code, and you can see it is supposed when you go on inspect but you cant visibly see it. Where do I place this code?

[@robbiemoore6383]

@@RaddyDev Nevermind, I have got it! thank you very much for your help, very appreciated.

[@dahamnet]

I have been looking wrong. I found it

[@vishwa9696]

it was helpfull 🙂

[@Twannnn01]

Very good video! I do however wonder.. What if Woocommerce needs to be updated? I noticed you copied woocommerce css directory to your own theme folder. However, if woocommerce decides to have an important update, how would you handle this? Since you added the changes directly in your theme you cannot copy the new woocommerce version to your theme since that would overwrite your previous settings. Can you elaborate more on this?

[@RaddyDev]

You have a valid point here and this is an interesting topic. I will try to be as concise as possible. To avoid upgrade issues, it's best not to do that. If you want a custom theme you won't be able to avoid issues from time to time. Light CSS Changes You can use the official WooCommerce CSS as a reference if you want to overwrite styles. This way when you upgrade everything should be fine unless they have braking changes. In this case, you still need to provide a fix/update. This is probably the safest option if you want to customise. Fully Custom You can disable the official WooCommerce styles and write your own. Then essentially it's up to you to write the updates for your theme. If there is a breaking change in Woo, then it's up to you to keep up to date and fix it. When you go to buy a custom theme sometimes you see advertised "Compatible with WooCommerce 6.0". In this case, the developers had to ensure that the theme is up to date and compatible. I'll be happy to hear your view on this

[@Twannnn01]

​@@RaddyDev Hi Raddy, thanks for your quick reply! I guess using the official WooCommerce as a reference and then creating a new stylesheet overwriting certain layouts would be a safe bet, since updating WooCommerce will not affect that "new" stylesheet. However, then I wonder why you would bother copy the WooCommerce style folder at all, since most of the classes/id's will be overwritten anyways? Additionally, what's your take on editing WooCoommerce functions and templates? The way that is proposed by Automaticc is to copy a certain WooCommerce template (let's take Cart.php as an example) and copy that file to "yourtheme/woocommerce/cart/cart.php". However, what if Automaticc finds out that there seems to be an exploit or bug with that specific WooCommerce template or functions inside that template. They would publish a new version that MUST be updated. But since I have changed cart.php in a significant matter, it would break and the page would not show the correct layout anymore. I guess the only way would be to go line by line and check what does / does not work. Perhaps the safest bet would be to strictly use the WooCommerce hooks (action and filters). That way you do not actually edit the core files. I am curious what you think about this!

[@RaddyDev]

@@Twannnn01 Regarding copying the styles it's really up to you. Whatever works best. You might want to just modify the classes instead of starting blank. There might be styles that you want to also keep. I think that it's almost unrealistic to think that you won't have to update a few things from time to time when they have a major version update or if they find an exploit. Hooks is defiantly the safest bet in my opinion. I feel like there were some layout limitations last time I was messing around. I couldn't move the product picture or something like that. Maybe things have changed, I need to look into it again. This is an interesting conversation. I almost feel like adding it to my blog if you don't mind. Otherwise, it will be lost in the comments on KZbin.