How to Make an eCommerce Website using WordPress – 2017 | Online Store like Amazon and Flipkart

Hostgator: Hostgator.com

Theme Link: NitroTheme

HomePage CSS Code

[sociallocker id=”5204″]

.wpb_revslider_element.wpb_content_element,
.sc-product-list.widget {
margin-bottom: 0;
}
.nitro-services.tl .icon-wrap.left {
margin-bottom: 0;
}
.nitro-services .content h4 {
font-weight: bold;
}
.nitro-services .content p {
margin: 0;
line-height: 1.5em;
}
.icon-wrap > span {
font-size: 32px;
}
.image-banner.text.style-2 .content {
bottom: -5px;
}
.image-banner.text.style-2 .content h2 {
font-size: 22px;
}
.image-banner.text.style-2 .content > * {
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
.section-pd .vc_tta.vc_general .vc_tta-panel-body {
padding: 0;
}
.list-blog article {
margin-bottom: 20px !important;
}
.list-blog article .entry-title a,
.list-blog article .more-link {
text-transform: uppercase;
color: #363636;
font-weight: bold;
}
.list-blog article .more-link {
font-size: 10px;
}
.list-blog.minimal .entry-meta + .entry-content p {
line-height: 1.5em;
}
.list-blog article .entry-title a:hover,
.list-blog article .more-link:hover {
color: #95bc39;
}
.wpb_image_grid .wpb_image_grid_ul .isotope-item {
margin: 0 20px 20px 0;
}
@media screen and (max-width: 1024px) {
.section-1 .vc_column-inner {
margin-top: 0 !important;
}
}
@media screen and (max-width: 768px) {
.list-blog .cs-6 {
width: 100%;
}
.section-pd {
padding: 0 10px;
}
.image-banner .back {
display: none;
}
.nitro-services > img {
float: none;
margin-bottom: 20px !important;
}
.nitro-services .content {
padding: 0;
}
.section-subscribe *,
.section-subscribe h3 {
text-align: center !important;
}
.section-subscribe form {
margin-top: 20px;
}
.section-pd .vc_col-md-3 .vc_column-inner > .wpb_wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
.section-pd .vc_column-inner > .wpb_wrapper > .latest-products {
display: none;
}
.section-pd .vc_column-inner > .wpb_wrapper .wpb_single_image,
.section-pd .vc_column-inner > .wpb_wrapper .sc-product-list {
width: 50%;
}
.section-pd > .wpb_column:first-child .vc_column-inner > .wpb_wrapper > * {
padding: 0 15px;
}
.section-pd .vc_column-inner > .wpb_wrapper .wpb_single_image *,
.sc-subscribe-form {
width: 100% !important;
}
.section-pd .vc_column-inner > .wpb_wrapper .sc-product-list li:first-child {
padding-top: 0;
}
.nitro-services.tl .icon-wrap.left {
margin-bottom: 20px;
}
.wpb_image_grid .wpb_image_grid_ul .isotope-item {
position: static !important;
margin: 5px;
}
}
@media (max-width: 767px) {
.vc_column_container>.vc_column-inner {
padding-right: 15px !important;
padding-left: 15px !important;
}
.products .product.clear {
clear: none !important;
}
.wpb_single_image.vc_align_left {
text-align: center;
}
#rev_slider_2_2_wrapper .rev-btn {
transform: scale(.7) !important;
-ms-transform: scale(.7) !important;
-webkit-transform: scale(.7) !important;
margin-left: -30px !important;
margin-top: 0px !important;
}
.latest-blog .vc_custom_heading {
padding-left: 25px !important;
}
.section-pd .wpb_column:first-child {
padding-bottom: 20px;
}
.nobd-767 .vc_column-inner {
border: 0 !important;
}
}
@media (max-width: 568px) {
#rev_slider_2_2_wrapper .rev-btn {
margin-top: -10px !important;
}
.wpb_image_grid .wpb_image_grid_ul .isotope-item {
margin: 0;
position: static !important;
padding: 10px;
width: 33%;
}
}
@media (max-width: 480px) {
.section-pd .vc_column-inner > .wpb_wrapper,
.section-pd .vc_column-inner > .wpb_wrapper > .latest-products {
display: block;
}
.section-pd .vc_column-inner > .wpb_wrapper .wpb_single_image,
.section-pd .vc_column-inner > .wpb_wrapper .sc-product-list.widget {
width: 100%;
}
.section-pd > .wpb_column .vc_column-inner > .wpb_wrapper > *,
.woocommerce [class*="cm-"],
.list-blog article {
padding-right: 0 !important;
padding-left: 0 !important;
}
.latest-blog .vc_custom_heading,
.section-pd,
.list-blog.standard {
padding: 0;
}
}
@media (max-width: 375px) {
#rev_slider_2_2_wrapper .rev-btn {
display: none;
}
.entry-meta span:not(:last-child) {
margin-right: 15px;
}
.sc-subscribe-form input[type="email"] {
width: auto;
}
.wpb_image_grid .wpb_image_grid_ul .isotope-item {
padding: 5px;
}
}

 

Footer Area 1 – CSS Code

From Below do not copy <pre><code> and </code></pre>

<pre><code><p style="margin-bottom: 30px;"><img src="http://nitro.woorockets.com/niche-03/wp-content/uploads/2016/08/niche03-logo.png" alt="Hiway Shop" width="154" height="42" /></p> <ul> <li><i class="fa fa-map-o mgr10"></i>81 Gordon Rd, Mandurah WA 6210</li> <li><i class="fa fa-paper-plane-o mgr10"></i><a href="mailto:nitro@woorockets.com">nitro@woorockets.com</a></li> <li><i class="fa fa-phone-square mgr10"></i><a href="tel:(00) 123 456 789">(00) 123 456 789</a></li> </ul></code></pre>

Copyright Code

From Below do not copy <pre><code> and </code></pre>

<pre><code><div class="fc jcsb"><div>© 2017 Nitro theme Tutorial by <a href="https://www.youtube.com/nayyarshaikh">Nayyar Shaikh</a>. All Rights Reserved.</div><img src="http://nitro.woorockets.com/niche-03/wp-content/uploads/2016/01/payment.png" width="266" height="24" /></div></code></pre>

 

Contact us Page CSS Code

.nitro-services .content h4 {
font-weight: bold;
}
.nitro-services .content p {
margin: 0;
}
.icon-wrap > span {
font-size: 32px;
}
.wpcf7-form input:not([type="submit"]):not([type="button"]):not(.submit):not(.button):not(.extenal-bdcl),
.wpcf7-form textarea {
background: none;
max-width: 100%;
border-radius: 0;
border: 0;
padding: 0;
border-bottom: 1px solid;
}
@media (max-width: 768px) {
.wpcf7-form {
padding: 20px;
}
.wpcf7-form input,
.wpcf7-form textarea,
.sc-subscribe-form {
width: 100% !important;
}
}

Contact Form

From Below do not copy <pre><code> and </code></pre>

<pre><code><div class="vc_row wpb_row vc_inner vc_row-fluid contact-form">
 <div class="wpb_column vc_column_container vc_col-md-4 vc_col-sm-12"><div class="vc_column-inner"><p> [text* your-name placeholder "Full Name"] </p></div></div>
 <div class="wpb_column vc_column_container vc_col-md-4 vc_col-sm-12"><div class="vc_column-inner"><p>[tel* tel-27 placeholder "Phone Number"] </p></div></div>
 <div class="wpb_column vc_column_container vc_col-md-4 vc_col-sm-12"><div class="vc_column-inner"><p> [email* your-email placeholder "Your Email"] </p></div></div>
</div>
<p class="textareabox contact-form mgt20"> [textarea your-message 80x4 placeholder "Messages "]</p>
[submit "SUBMIT FORM"]</pre></code>

 

About Us Code

.wpb_text_column.featured { font-size: 1.6em; line-height: 1.5em; } @media (min-width: 768px) .lead { font-size: 21px; } .lead { margin-bottom: 20px; font-size: 16px; font-weight: 300; line-height: 1.4; }

 

Ninja Popup Code

GET YOUR DAILY OFFERS
letter-spacing: 4px;

 

INPUT CODE
border-bottom: 1px solid #c6c6c6;
background: none !important;
padding-left: 30px;
margin-left: -30px;
font-weight: 300;

Custom Code for Pages

.site-title {
border-bottom: 1px solid #ebebeb;
}
.mm-container > ul > li {
margin: 0;
}
.site-navigator .categories {
margin-left: 30px;
}
.categories .mm-container .menu-item-link,
.mm-container .mm-last-row .menu-item-link {
padding: 0 15px;
}
body:not(.home) .hidden.menu-item {
display: block !important;
background: #95bc39;
}
body:not(.home) .hidden.menu-item .mm-container-outer {
box-shadow: none;
border: 1px solid #e5e5e5;
border-top: 3px solid #95bc39;
}
body:not(.home) .hidden.menu-item > a {
color: #fff !important;
}
.sc-cat-list ul a {
color: #363636;
text-transform: uppercase;
font-size: 12px;
}
.sc-cat-list ul a:hover {
color: #95bc39;
}
.sc-subscribe-form {
float: right;
}
.sc-subscribe-form input[type="email"] {
margin-right: 20px;
padding-left: 0;
background: none !important;
}
.widget-title {
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
}
.hb-search.boxed.has-category-outer .cate-search {
font-size: 10px;
color: #363636;
text-transform: uppercase;
font-weight: bold;
}
.mm-container-outer {
border-bottom: 3px solid #95bc39;
}
.btn-browser-all a {
background: #95bc39;
color: #fff !important;
text-align: center;
margin: 20px;
font-weight: bold !important;
}
.footer .top .widget ul li {
margin-top: 10px;
}
.footer .top .top-inner {
padding: 60px 0 !important;
border-top: 1px solid #e5e5e5;
}
.footer .top {
padding: 0;
}
.footer .bot {
padding: 30px 0 !important;
}
@media (max-width: 1024px) {
.wr-mobile .site-title {
padding-top: 20px;
min-height: 150px;
}
}
@media (max-width: 568px) {
.footer .bot .info > div {
display: block;
}
}
.rtl .vc_custom_heading {
text-align: right !important;
}

[/sociallocker]

Nayyar Shaikh

A Professional Blogger, YouTuber, Freelancer, WordPress enthusiast, Affiliate Marketer and Web Developer.

This Post Has 15 Comments

  1. I am not able to open your videos , they are seen to be deleted from the youtube ?!!

  2. Dear Bro,
    I Am Rehan , I Follow Your Videos Always And YouTube Channel But Today I Found You YouTube Channel Is Terminate.Dear I Buy Theme Nitro Only behalf On Your Video But Today Your Youtube Id Block Please Can You Send Me Your Video
    If Upload From Another Youtube Channel Please Inform me.im On Facebook. Name Rehan Ghani Solahria

  3. Dear Nayyar,
    I Have Many Categories of products so how can i manage or make drop down

  4. bro i purchased domain and hosting from go daddy
    i created and installed wordpress and i purchased theme frm themeforest ,i cannot install nitro bro,im finding error like this
    (The uploaded file exceeds the upload_max_filesize directive in php.ini.)

    1. i can help you in installation of the theme for free

  5. hi i am intrested to have a website like amazon i had seen ur video on youtube and found ur website please let me know how and how much will it cost as i am a start online

  6. Hello Nayyar can You please develop a Online E learning website please sir i will be thankful to you

  7. hi .. can u send me HomePage CSS Code

  8. hi… can u send the nitro theme CSS Code Page

  9. Aoa, can you please tell me how to hide categories on mobile

  10. this is a great tutorial and also a beautiful, professional looking website, i love it, may i please have the images

  11. can you please send me this website picture

  12. Bloggdude NEVER answers his emails. Terrible! Just terrible!

Leave a Reply

Close Menu

Become WordPress Hero!

Hi, Sign Up to get the Latest WordPress Videos, Deals & Discounts, Free Templates And Wordpress News!

Your Information will never be shared with any third party