πŸ’° 20% Referral Hosting Discount: https://www.hostg.xyz/SHEiZ

β˜• BuyMeACoffee: https://www.buymeacoffee.com/RaddyTheBrand

⭐ Adobe XD: https://raddythebrand.lemonsqueezy.com/checkout/buy/2437b58c-c370-4794-9112-4d4d284e128b
⭐ Design Tutorial: https://youtu.be/9jv1E4hgxPo

Article: https://raddy.dev/blog/how-to-create-a-custom-ecommerce-theme-on-wordpress-woocommerce-local-underscores-bootstrap/

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: https://www.hostg.xyz/aff_c?offer_id=408&aff_id=69300
⚑ Elementor: https://be.elementor.com/visit/?bta=26518&brand=elementor

Recording Equipment:
β—Ύ Microphone: https://amzn.to/3Ppp8Ok
β—Ύ Shotgun Mic: https://amzn.to/3IVqIot
β—Ύ Camera: https://amzn.to/3z0bxpF
β—Ύ Lens: https://amzn.to/3Pw4s7d
β—Ύ Lighting: https://amzn.to/3PGXvzW

Computer Gear:
β—Ύ Keyboard: https://amzn.to/3PGXvzW
β—Ύ Headphones: https://amzn.to/3PJl9fg
β—Ύ Mouse: https://amzn.to/3z1TGPf

Connect with me:
β—Ύ Website: https://www.raddy.dev
β—Ύ Newsletter: https://www.raddy.co.uk/newsletter

#woocommerce

source

50 Comments

  1. 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 Youtube that gave all the necessary infos for a developer who need to understand the whole WordPress and start building. Keep going Thanks Sir !!

  2. 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

  3. "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?"

  4. Never use br tag like that. There is a css property that makes text lines balanced.

    Use text-wrap: balance;

    Also for top and bottom padding use py-5 , or px-5 (left, right padding), same for margin

  5. 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?

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

  7. 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

  8. 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?

  9. 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 !

  10. 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?

  11. I spent hours following this tutorial but eventually abandoned it because the custom categories section does not scale well responsively. That section looks so bad on small screens while everything else is fantastic , but ultimately i couldn't use it because of that.

  12. peace be with you dear.
    unfortunately variable over rides not working for me..
    Following is my code

    $primary: rgb(127, 24, 127);

    $theme-colors: (
    "primary": $primary
    );

    @import "../bs52/scss/bootstrap";

    Please consider to correct me, as i am unable to figure it out…

  13. 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

  14. One more thing. I can't change shop page. When I edit archive-product.php site, nothing change. When I make changes in cart, customer account dashboard, checkout or other place everything working good. Is archive-product.php is not good place for making changes in shop page?

  15. Raddy, I've just started learning PHP and WordPress, and yours has been the best tutorial by far to get started with. There have been minor changes since this video was published, but nothing that I couldn't navigate around with a little help from Google. Thanks so much for being so thorough in all your explanations/demonstrations — all of it was extremely beginner-friendly and I never felt out of my depth, despite being relatively new to the development world.

    I'll definitely be following your channel for more excellent content like this. I look forward to learning and growing my skills with you. Cheers!

  16. 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!πŸ™πŸ™πŸ™πŸ˜ŠπŸ‘πŸ»πŸ˜³β™₯

  17. 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!

Leave A Reply

Please enter your comment!
Please enter your name here