How to create a custom theme in WordPress from scratch - WooCommerce (Underscores & Bootstrap)
ฝัง
- เผยแพร่เมื่อ 20 ก.ค. 2024
- 💰 20% Referral Hosting Discount: www.hostg.xyz/SHEiZ
☕ BuyMeACoffee: www.buymeacoffee.com/RaddyThe...
⭐ Adobe XD: raddythebrand.lemonsqueezy.co...
⭐ Design Tutorial: • Design eCommerce Websi...
Article: raddy.dev/blog/how-to-create-...
In this video, tutorial we are going to create an E-Commerce website using WordPress as our CMS and the plugin WooCommerce. We are going to heavily use Bootstrap for our layout, but we are also going to save some time by using the software Local for our local server last but not least we will be using a startup theme called Underscores.
If building a custom Shop is something that you want to do please stick around. Don't forget to like the video, share it with friends and family and consider subscribing.
Chapters:
0:00 Introduction:
1:02 Setting up a Development environment
5:23 Creating our theme
8:46 Installing WooCommerce
12:20 Setting Up Bootstrap
29:50 Front Page
35:38 Announcement bar
59:53 Header
01:16:10 Menu
01:27:09 Front Page - Carousel
01:47:04 Front Page - Popular Products
01:55:12 Front Page - Categories
02:18:13 Front Page - Special Offers
02:20:28 Footer
02:28:48 Footer Widgets
02:47:52 Menu Drop Down
02:54:10 Pages Layout
02:58:26 WooCommerce Custom Page
03:01:31 Editing WooCommerce Pages
03:05:30 WooCommerce Styles
03:19:43 Bootstrap Setting Up Google Fonts
03:22:18 Ending - Subscribe, Like & Comment
Discounts:
⚡ Hostinger: www.hostg.xyz/aff_c?offer_id=...
⚡ Elementor: be.elementor.com/visit/?bta=2...
Recording Equipment:
◾ Microphone: amzn.to/3Ppp8Ok
◾ Shotgun Mic: amzn.to/3IVqIot
◾ Camera: amzn.to/3z0bxpF
◾ Lens: amzn.to/3Pw4s7d
◾ Lighting: amzn.to/3PGXvzW
Computer Gear:
◾ Keyboard: amzn.to/3PGXvzW
◾ Headphones: amzn.to/3PJl9fg
◾ Mouse: amzn.to/3z1TGPf
Connect with me:
◾ Website: www.raddy.dev
◾ Newsletter: www.raddy.co.uk/newsletter
#woocommerce
There have been some WooCommerce updates and the SCSS files are now located in "wp-content/plugins/woocommerce/legacy/css"
Hi Raddy, I don't see "legacy" directory in that source /wp-content/plugins/woocommerce/ . Is something was change again in woocommerce plugin?
@@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
@@RaddyDev Thank you for that link and thank you for that awesome tutorial. Thumb up.
@@RaddyDev i am again unable to find the files. I literally went through every folder :D Do they not exist anymore?
@@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
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 TH-cam that gave all the necessary infos for a developer who need to understand the whole Wordpress and start building. Keep going Thanks Sir !!
Great to hear!
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 !
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 :)
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!
You are not alone my friend. ADHD makes my life as a budding web designer so difficult!!
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🙏
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!
It's a great combination for sure. Thank you for the comment!
Oye gringo!!! Te pasaste, este video debería estar de los primeros en TH-cam! es todo lo que busque por mucho tiempo ❤
Thanks man, your channel help me a lot of times, you deserve more attentions really.
People like you inspire me to keep going. Thanks for the nice comment!
Mate spot on. Just what I was asked you about on your other woocommerce theme development video.
Had a lot of issues exporting the video, but it's all good now
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
Thanks, Mr. Pixel! I also tried a few different builders and came to the same conclusion
Please how then can clients edit custom wordpress website themselves without page builder? Please help.
@@yummybims2991 answered your other comment :)
@@RaddyDev Thank you for your time.
hey man, i know it's kinda late but are you still using this method?
3 years later but it helped me a ton! Thank you so much
A very helpful tutorial, with lots of useful information,
it helped me a lot, thank you very much!!
Thanks for the comment, Shadow! Glad that you found it useful
Thank you for your video and your channel, Raddy!
This is the best wordpress tutorial. Hands down!
Thank you, I appreciate you saying that!
Thanks for the great work, Raddy!
Thank you for watching! I hope that you found it valuable and I am looking forward to make more WordPress related videos
Loving this! KEEP UP THE NOBLE WORK! :) Thank you.
Thank you! Will do!
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.
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
@@RaddyDev Great. Looking forward to it.
Thank you this is amazing ! 👏👏
Great tutorial my friend, really well explained, thank you very much :)
Thank you, Decio! This one turned out well 👌
This video was really helpfull, thanks you so much for your work... greetings from El Salvador
Raddy, thanks for sharing good approach , its wonderful tutorial.
You are very welcome
Thank you so much for this wonderful tutorial
Thank you for watching, Wafa! I am glad that you liked it
This tutorial is amazing. Congratulations.
Thank you, Bucur!
tysm sir this helped so much i cant belive its free
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 --> )
You can also chain them, like .bg-primary.text-white -->
You are a genuine lifesaver man
Haha, thank you! Glad to hear that you found it helpful
Big thumbs up. Very helpful for a beginner like me.
Thank you, Anuj! I appreciate it
This video really helpful to me. Thanks a lot
That's awesome to hear, Entero! Thanks for the comment!
This was reaĺly helpful. Thank you🙏
Glad it was helpful!
took me almost three days to complete this awesome video
Nice work!
I think this tutorial will help begginer like me.
Thanks a lot brother.
There is always something new to learn. I hope that you find it useful! Thanks for the comment!
I watched all the video. Good job!
I hope that you found them useful and you put the skills and knowledge to practice
Thank you so much @Raddy 😘
you are most welcome my friend
Great tutorial! 🙏🏽
Glad that you like it! Thanks for the comment
love uuuuu youre my master!, you save me a lot of time of documentation
haha thank you!
That was a great tutorial,this video help me in wp & php
ThankYou for making video,GoodLuck
Thanks for hard work. I hope you get more exposure and subscribers :)
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
thank you for such a nice tutorial....
Thanks, Buddhika. Glad that you like it
Thanks Bro for these kind of videos ....❤️
My pleasure 😊
always make tutorial like this one you are a hero
haha thank you, Coolio! I will do
@@RaddyDev ❤️❤️❤️❤️🌹🌹🌹🌹
thx buddy
i recommend it to anyone i see
Thank you! I appreciate that!
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
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
outstanding tutorial!
Thank you!
thank u so much!
Thank you for watching!
Just one word to say "SUBSCRIBED !"
Thank you! 👊😎
Tks for your imformative and useful video.
Glad to hear that you found it informative! 👊😎
Fantastic explication :)
Thank you!
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?
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
Great Video! Im new on soft soft, and tNice tutorials tutorial really helped
Glad to hear that you found it helpful
to respect. how wonderful
Thanks, Văn!
Thank you!
👊😎
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!🙏🙏🙏😊👍🏻😳♥
Thanks for the kind message, Martin! I've already planned two new WP videos using 6.1. I will make it happen
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!
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
Hi! I love the course so far! Where can I find the logo for the site? Many thanks!
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.
Amazing tutorial. I think local is quite slow when compared with xampp.
Yeah, it might be. It's just nice and easy to set up initially
it Amazing ❤❤
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
Thanks for the comment. Give it a few hours and it should become 4K. Not sure why TH-cam is taking so long to process the HD version
The HD version is now available here
"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?"
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.
I like the idea, Sid. It's definitely something that I would like to do
@@RaddyDev Would be looking forward to it. Sorry for arriving late here.
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 )
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! 😊
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.
@@yummybims2991 You need to be working on 'main.scss' and then compile that file into 'main.css'.
@@RaddyDev I have figured it out. Thank you so much.
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)
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!
@@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) ;-)
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
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
Hi Raddy, great tutorial. Do you know how to make the underscores menu to work with amp?
kind regards
Peter
I haven't looked into that. I assume that it should just work. I need to test that, did you use the APM plugin?
Thanks for the great tutorial. Can you please help me on how to apply the mini cart on announcement bar?
Sure I can. Could you not copy the cart code and put that in the announcement bar?
best of best
Hi, I wander why you don't need to use navwalker to integrate bootstrap structure into wordpress . By the way, great video!!
I don't know too much about it and I don't understand the benefit. I have to try it out
Nice 👍
Thank you
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........
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
Great tutorial! I have a little issue, my theme is showing simple product price as 0.00 on product page, archive page etc and in Woo dashboard is 0. Get_regular_price works well but get_price_html not.
Have somebody this kind of issue?
I am not sure if this helps, but this is what I have in 'woocommerce -> single-products -> price.php'
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!!!!
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
great video mate !! how can i add a add to wishlist icon on header near cart ?
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.
Thanks again for the great video Raddy !
I've encountered a small issue that I wasn't able to find a fix for. The ajax display of the cart item count doesn't get translated (I'm doing the website in french first) and I can't for the life of me find a way to do it. If you know a fix or if anyone else does it would be more than welcome !
After searching for a fix for hours I found the solution by myself right after asking here.. can't believe it took me so long since it was actually so simple.
For those who might need the info you simply have to edit the php in your header and replace 'Item' 'Items' and 'View the shopping cart' by whatever you want.
@@SauceVinaigrette I was literally just looking into it. Glad that you have a solution and thanks for sharing it!
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?
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
Obrigado!
Obrigado por assistir, Carlos!
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.
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
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?
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
@@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!
@@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 TH-cam.
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.
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
hi, is it possible to have 2 different nav one for website and another for the store?
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
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
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
@@RaddyDev Thats why youre the master, yeah thats what it was. thanks alot man, you really helped me out big time
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
That's a great suggestion, thank you!
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?
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' );
Hey did you find the solution?
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
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
@@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
@@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
@@Unicorndimond Glad to hear that you fixed the issue. Thank you for the kind words, Neda! I appreciate it
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?
Is it just the icon that is not showing up? To be able to use bootstrap icons you need to link this CSS file:
@@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?
@@RaddyDev Nevermind, I have got it! thank you very much for your help, very appreciated.
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!
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 ...
How can we purge unnecessary CSS? Please make a video If possible. thanks
I think I showed a little bit of that in the video. You would have to download Bootstrap instead of using the CDN and only include the bits that you need in your SCSS. If you go to the Bootstrap documentation under CSS files you can see some of them there. You can also choose to minify and so on...
I have been looking wrong. I found it
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
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
@@RaddyDev Thanks a lot Raddy
@@rachidbouchra659 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
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 .
how did your pages know which to use, front-page.php and page.php ?
If front-page.php doesn't exist in the directory, it defaults to page.php
To know that check wordpress hierarchy...
Bro, please moreeee
Definitely planning to do more! Thanks for the comment, John!
when I open my file from local sites in visual studio and than I will open functions.php file, all functions have red underline , can anybody tell me why ? how can I fix it ?
One thing that I can think of is the Language Mode. At the bottom right corner of your VSC there is a place where you can change it to PHP
Hello, how complex can the project be? Can I have a news site between customer and seller?
You can make it as complex as you want. Wordpress is fairly flexible. Just try to avoid installing too many plugins
@@RaddyDev i understand i design and program for plug-in
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?
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.
@@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
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.
Resolved:
in functions.php ther was this section:
function woocommerce_header_add_to_cart_fragment( $fragments ) {
global $woocommerce;
ob_start();
?>
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?
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
@@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.
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
@@RaddyDev Same thing happend to me, I'm glad you've said where to find the files
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
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?
Thank you so much for the great tutorial. This is the best on TH-cam. I don't mind donating.
Please I have one question: How can a client (non technical person) edit this type of custom website by themselves? How can they change content like images, texts, etc. without being exposed to the HTML codes? Thank you so much in advance for answering.
Hi @YummyBims, thanks for the comment! I believe that the best way would be to build everything that the client want to be able to update with ACF (Advanced Custom Fields). It makes it straight forward for the client to update and there is less to go wrong
@@RaddyDev Alright. Thank you very much. Do you know of any great tutorial on how to use Advanced Custom Fields? Thanks!
You need to know basic html and css atleast... If u are acf then also you need to know basic things... 👍
@@anirudhachakrabarty2050 I already know advanced HTML, CSS, SASS, SCSS, NPM, JAVASCRIPTS, etc. I was only asking how to build a custom WordPress theme with Advanced Custom Fields so that non technical clients can edit it themselves without being exposed to html codes.
@@yummybims2991 check out this video. It should give you some pointers on how to use ACF th-cam.com/video/jXLbMVDFbpQ/w-d-xo.html
I love this tutorial! but I can't get the opacity to work on the background of the categories. When I inspect my code I see that opacity is getting set on 1. Any help?
this is what I see in the inspect element:
.bg-primary-opacity-8 {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-primary-opacity-8-rgb), var(--bs-bg-opacity)) !important;
}
I've checked my code and everything seems fine but looks like SASS is not converting the rgba value.
Hello! When you set Opacity to 1 it means that the element is fully visible. 0 would be fully transparent and anything in between like would be somewhat transparent. 0.5 would be like 50% transparent
@@RaddyDev thank you for your reply. I know but it looks like the rgba settings are not working.
I have this in main.scss:
$primary-opacity-8: rgba(127, 24, 127, .8);
"primary-opacity-8": $primary-opacity-8,
and in frontpage.php I have:
bg-primary-opacity-8
but that doesn't seems to work.
@@petergrietdc-f7918 This is a little bit confusing as in your first comment you are using CSS variables, but then in your second comment you have SCSS variables and I am not sure what "primary-opacity-8": $primary-opacity-8 does as it won't be valid
Ignoring all this, I will try to give you the answer in two possible ways.
With CSS Veriables:
:root {
--bs-bg-opacity: 1;
--bs-primary-opacity-8-rgb: 127, 24, 127;
}
.bg-primary-opacity-8 {
background-color: rgba(var(--bs-primary-opacity-8-rgb), var(--bs-bg-opacity));
}
With SCSS Veriables
$bs-bg-opacity: 1;
$bs-primary-opacity-8-rgb: rgb(127, 24, 127);
.bg-primary-opacity-8 {
background-color: rgba($bs-primary-opacity-8-rgb, $bs-bg-opacity);
}
This will result in the background color to be converted to hex value. If you put, 0.5 for the opacity it will work, and convert it to rgba. I hope this answers the question haha. If not maybe send a codepen so I can see and understand better. I hope this helps
@@RaddyDev Hi Raddy, sorry for the confusion. I will try to explain :-)
As in your tutorial I'm using scss, and this is the part that's in main.scss:
// Include custom variables default overrides here
$primary-opacity-8: rgba(127, 24, 127, .8);
$theme-colors: (
"primary-opacity-8": $primary-opacity-8,
);
and then in front-page.php:
Toys
But that's not working.
@@petergrietdc-f7918 I genuinely can't spot anything wrong with that. I tested it and it works here. Could it be something else around it breaking it? If you inspect your H2 you should see the class name with the following properties:
.bg-primary-opacity-8 {
background-color: rgba(127, 24, 127, 0.8) !important;
}
If you can replicate the problem in any Code playground I could have a look, otherwise I keep playing a guessing game here 😅
Thank you so much, this is an amazing video
Glad you liked it!
Bro can you please upload a video telling me how can i add this theme into my original wordpress site?
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
I would like to open my shop on wordpress, is this method 100% safe for commercial use? btw great tutorial!
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.
@@RaddyDev thanks for the answer
My Site Host is showing locahost:10003 & SSL Note: HTTPS is not available when using localhost routing
That's a strange one. Are you using Local? There might be an answer on their forums. I am not so sure what it could be