Raddy Website Design & Development Tutorials

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

By Raddy in WooCommerce / WordPress ·

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

If you wish to learn how to design the layout watch the full video here: https://youtu.be/9jv1E4hgxPo

Design Files

Download this product

Fonts

Useful Links

Thank you for reading this article. Please consider subscribing to my YouTube Channel.

Credit

  1. Liam Tylor says:

    A good tutorial Raddy. Learned alot. I was stuck in my theme and you helped me out in a big way man.
    If you can please do product slider as well. and a way to make a plug in . looking forward to great contents.

    1. Raddy says:

      That’s great to hear, Liam! Thank you for the comments and I am liking the suggestions.

  2. Rasha says:

    Hi , categories opacity is not working at all with me
    .categories__col {
    height: 212px;

    img {
    width: 100%;
    height: 100%;
    //object-fit: cover;
    }

    }
    i had to comment object-fit and add height 100%
    any solution please ?

    1. Rasha says:

      I mean object-fit:cover is the one that not working , i had to add height: 100% to the image to make it fit

      1. Raddy says:

        Hey Rasha,
        You do need width and height on the image to make the object-fit work.
        I must have missed adding the height of 100% to the image. Sorry about that!

  3. sarthak says:

    Hi ,
    how can I add a woocommerce sidebar to this theme.

    1. Raddy says:

      There is one called sidebar.php. You just have to include it with PHP in the area you want and put the content that you want to appear in it.

  4. Omri says:

    Hi Raddy!
    Thank you so much for this tutorial, it was awesome and very helpful.
    I have 2 things I can’t seem to figure out, hope you can help me:

    1. All of the different WordPress pages such as cart, checkout, user login etc. display a bunch of blocks on the bottom that I don’t want to have (recent posts, comments etc.). How do I get rid of them? see image – https://ibb.co/GMyb0XD

    2. I’ve created my own card design to be displayed on the homepage and I would like it to display dynamic data that is based on product details. Can you help me learn to communicate with the product database or refer me please?

    Thanks again 🙂

    1. Raddy says:

      Hey Omri,

      I am glad that you like the tutorial and that you found it useful.

      On the first question, I have the feeling that this might be coming from “page.php”. Check the code on that page, and remove the things that you don’t need.

      For the second question, you can write custom code to access the WooCommerce product details. Here is a simple product loop that you can do: https://woocommerce.com/document/sample-products-loop/ For any further details that you would like to get out you can use their documentation.

      I hope this helps!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.