Welcome Welcome Everyone! Its been about 6 months since i did my last ecommerce wordpress tutorial so i added TONS of new features in this wordpress tutorial. Divi has changed alot in the past few months so i wanted to do a full ecommerce tutorial on it and throw in some real cool features. so lets get started and let me show you what this ecommerce tutorial is all about!

 

So what is new in this ecommerce wordpress tutorial?

AUTOMATED TAXES – No longer will you have the hassle to deal with taxes online or to learn how taxes work. You will get your taxes all automated and automatic!

FREE LIVE CHAT – An amazing free plugin. You can start having a conversation with your visitors right from the comfort of your own computer!

DIVI GLOW – A beautiful effect that will enhance your products and get you sales!

If you want to create an ecommerce website with wordpress, this ecommerce wordpress tutorial will show you how to do it step by step. Remember, you can sell anything you want for your online shop. Its very easy and simple to follow. I have many other woocommerce and ecommerce tutorials in my channel is make sure to check those out as well! This complete tutorial on how to make an ecommerce website with wordpress or online store will show you step by step on how to make a professional and amazing ecommerce website with wordpress 2017!

Always refer back to my youtube video, REMEMBER, The timestamps are in the video below!

 

Step 1. Get Hosting

Get 60% OFF SiteGround Hosting: https://www.darrelwilson.com/siteground

Step 2. Purchase and Install The Divi Theme

Get 10% OFF The DIVI THEME: https://www.darrelwilson.com/divi

Step 3. Customize Your Homepage And Website

Free Images For eCommerce Tutorial: https://www.dropbox.com/sh/3bcgwb1enbc1rd9/AABajlAFf8w4MfxzsqHQl4Vva?dl=0

Remember, get a logo professionally made. Don’t settle for those free logo makers, they suck! Do it the right way!

Get An Amazing Logo: https://www.darrelwilson.com/fiverr

If you want to see the

DEMO eCommerce Website: http://www.quickiesale.com

CSS COMMANDS FOR TUTORIAL

I know that CSS may be new to many of the people watching this tutorial and thats ok! I have put here a small guide on where to enter the CSS for each of the modules to attain certain looks for your ecommerce website

The code below fixes the problem with the images and call to action modules clashing together.

 

For Call To Action On Front Page, Enter This In MAIN ELEMENT –

position: relative;

If you want the text to align center for your modules, simply past this in the CSS. ( put it where appropriate)

Align Text: text-align: center;

Create The Divi-Glow – box-shadow: 0px 0px 30px #673ab7;

Make sure that you put this CSS in the main element module of your wordpress website. Also, you can use this on any module. If you want to change colors, refer back to the backround color option and simply copy the code so you can achieve the look you want for your website!

Border + Shadow On Front Page – box-shadow: 0px 0px 30px #673ab7;

Here i basically just made a border. Along with the border, i wanted to create a shadow that went with it to make it look really cool and really clean. So the first command simply create the border. You can change the color to anything that you want. The second is the box shadow, which at the bottom and right section you can see a small  shadow following the call to action module

Divi Shadow + Center Align – text-align: center;box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.4);

Also ADD THIS COMMAND IN THE OVERLAY SECTION – text-align: center;box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.4);

So basically, the divi shadow creates the shadow around your ecommerce products. The text aligns it centerm and lastly, the overlay will create that glow around the ecommerce products when you hover over it!

 

These Next Two Must be placed in THEME Customizer

The follow command will put the glow on all your products in your ecommerce website

Glow Over All eCommerce Products – li.product:hover {

box-shadow: 0px 0px 30px #673ab7 !important;

}

Center Reviews For eCommerce Website – .woocommerce .products .star-rating, .woocommerce-page .products .star-rating { margin: 4px auto 0.3em!important; }

 

Here is the complete woocommerce tutorial for your ecommerce wordpress website – https://www.youtube.com/watch?v=-nEPFB0e4vs&t=4461s

Thanks again for watching this tutorial on how to make an ecommerce website and online store with wordpress. Here are some goodies for making it this far!

Use CODE DARREL For 10% Off TaxJar: https://darrelwilson.com/taxjar

Use Code Darrel25 at http://www.woomill.com to save 25% OFF any plugin!

20 BEST WEBSITES TO SELL YOUR ECOMMERCE PRODUCTS ONLINE!

 

Good luck guys, truly, i hope this helps. I do my best to bring some really valuable content to make sure that you are being guided every step of the way. I hated learning from tutorials that were always half ass or left me with so many questions. Make sure to subscribe because i will be having a video on ALL the steps you need to have a successful ecommerce wordpress website!

SubscribeFor FREE Offers And Discounts

SubscribeFor FREE Offers And Discounts

Get The Latest Updated For Your Wordpress Website

You have Successfully Subscribed!

Pin It on Pinterest

Share This