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

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

Hostgator: Hostgator.com

Theme Link: NitroTheme

HomePage CSS Code

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

About Nayyar Shaikh

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

Check Also

flatsome-theme-wordpress-themeforest-best-theme-for-ecommerce-website

Best WordPress Themes for eCommerce Websites 2017

In this list we have collected the most Perfect and most Professional themes, that are ...

Leave a Reply

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