In this rather long tutorial, I’m going to show you how to create a WordPress theme from scratch, and then incorporate WooCommerce into it. You can then go for your life and customise it with CSS how you want.
Specifically, I will be talking about:
– Using Webpack (from Laravel) for CSS and JS (With SASS)
– Creating a new WordPress theme from scratch
– Using Menus, Widgets and Post Thumbnails
– Different WordPress page templates
– Installing and Configuring WooCommerce and then making it work in the simple theme we developed.
I am using Webpack to combine my SASS and JS, but you do not have to use it if you do not want to. You can simply enqueue your CSS and JS directly in functions.php.
Two hours is not enough to explain everything about developing a WordPress theme with WooCommerce, but it gives you a good idea of how to start and the absolute basics.
WooCommerce is an excellent E-Commerce solution for small to medium sized websites that need a way to sell products easily. WooCommerce in WordPress allows this.
Let me know what you think and if you have any questions and I can help you learn more! Cheers.
source
Thanks!
1:41:00 woocommerce start (note for myself)
Hey , thanks for the video , i coundt have the node_modules after running the commend npm install : giving me this : up to date, audited 1 package in 451ms does anyone have a solution for this issue ?
Beast, thank you a lot!
Hi great tutorial I loved it I have implement it I am getting problem showing products at shop page when I click shop no data show can you help where I am wrong
Thank you
Madman. It is not WooCommerce tutorial. You should say it is wordpress environment setup tutorial.
I have been looking everywhere online for documentation for this thing. I was under the impression that you'd create a loop for your products and make the structure yourself. I was utterly baffled by the sheer lack of documentation on the woocommerce website. Only to find out that this is pre-built. I appreciate the tutorial and my comment is not against you at all but this plugin annoys me. As a developer I like to build these structures, not have it done for me with a single function that spits out all the HTML for me. It's as if they think we're idiots who can't create out own pages and our own HTML structures.
Mine had an error while running "npm run watch".. will you please help me to fix it? below is the error message;
THANK YOU!!!!!!!!!!!!!!!!!!
i understand this is great if you're a starting out dev, but all the extra stuff like the css and adding a hero image is a bit painful for those who are more advanced, its 1 hour and 40 minutes before we get to setting up woo commerce in a 1:58 min video,
PID means process identifier 🙂
Que tutorial mas completo! una joya de verdad 😉 Thanks a lot for this, gonna help me to start building eCommerce from scratch.
Awesome video! Really helped me understand how WordPress works
Please upload a video to adapt the woocommerce single product page into a figma draft.
Excellent tutorial. It's great that you started on a clean system to see how to set up everything. I wish you spent more time on WC though
You are the king of WP IMHO
Great stuff sir. Could you please make a video how to develop or maybe customise woocommerce product layout?
and/or woocommerce product widgets ?
Hi, sorry to bother but this video has really helped me but somehow I can't uppload most of the coppied files to the "theme_name/woocommerce" folder. I can have all the folder and files with same names but when the code is almost the same, or the same then the file is deleted. I tried doing this both from sublime and filezilla and only managed to uppload the files from wordpress > theme editor, Which is not very useful..I assume that the program cancels the file transfer when it sees they are duplicate, but I can't find any solution or exactly why.
thank you. Great tut.
The laravel github has changed a lot so maybe a coming about how to update this would help
Thanks a lot
BTW Laravel's webpack isn't necessary for those of you who wish to write all their styling in a single file you can simply do the following:
install ruby
gem install sass
Write your sass code in a file called main.sass
cd path/to/my/sass/file
sass –watch main.sass:main.css
If scss file:
sass –watch main.scss:main.css
This is how tutorials should be.