virusword.com-Wordpress

Learn Wordpress

Home/Videos/How to Create a Custom eCommerce Theme on WordPress / WooCommerce – Local, Underscores & Bootstrap

How to Create a Custom eCommerce Theme on WordPress / WooCommerce – Local, Underscores & Bootstrap



⭐ 80% OFF Hostinger (USE CODE: RADDYTHEBRAND):
https://www.hostg.xyz/SH66q

☕ BuyMeACoffee: https://www.buymeacoffee.com/RaddyTheBrand

⭐ Adobe XD: https://raddythebrand.lemonsqueezy.com/checkout?cart=7d61cb96-cd20-46d5-87a0-deb85ea7c56d
⭐ 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

Reader Interactions

Comments

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

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

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

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

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

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

  20. 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!🙏🙏🙏😊👍🏻😳♥

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

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

Leave a Reply

Explore more

Get our Wordpress Guide Get Plugins Get Connected