WordPress Tricks

Add “Why Shop With Us” section in your site to increase your sales.

why shop with use section in wordpress html or php pages

If you want to add a beautiful “Why Shop With Us”  section in your wordpress or html or php sites then this post is for you. It will help to increase your site’s credibility and popularity.  Here I am sharing you the  HTML and related CSS Codes. Just add the HTML code in the respective position where you want to add it, and put the CSS code in Custom CSS portion.
You can ask question regarding any issue you are facing.

Or can take my personal help.

**** HTML CODES ****

<div id="omma">
<div class="features features_desctop hidden-xs hidden-sm">
<div class="p-heading1">
<section class="shopper-product-section shopper-recent-products" aria-label="Recent Products">
<h2 class="section-title"><span> Why shop with us</span></h2>
</section></div>
<div class="col-md-15 col-sm-30">
<div class="">
<div class="img-feat">

.cls-1{fill:#222;fill-rule:evenodd}</div>
<div class="text-feat"><b>700+</b> Clients Love Us!</div>
</div>
We offer best service and great prices on high quality products</div>
<div class="col-md-15 col-sm-30">
<div class="">
<div class="img-feat">

.cls-1{fill:#222;fill-rule:evenodd}</div>
<div class="text-feat">Shipping to <b>185</b> Countries</div>
</div>
Our store operates worldwide and you can enjoy free delivery of all orders</div>
<div class="col-md-15 col-sm-30">
<div class="">
<div class="img-feat">

.cls-1{fill:#222;fill-rule:evenodd}</div>
<div class="text-feat"><b>100%</b>  Safe Payment</div>
</div>
Buy with confidence using the world’s most popular and secure payment methods</div>
<div class="col-md-15 col-sm-30">
<div class="">
<div class="img-feat">

.cls-1{fill:#222;fill-rule:evenodd}</div>
<div class="text-feat"><b>2000+</b> Successful Deliveries</div>
</div>
Our Buyer Protection covers your purchase from click to delivery</div>
</div>
</div>

**** CSS CODES ****

.features,.features div{overflow:hidden}.features div .img-feat{float:left;text-align:left;margin:0 10px 0 0}
.features div .text-feat{padding-right:45px;font-weight:400;font-size:13px;line-height:14px}
.features div .text-feat b{color:#ae322f;font-weight:700}
.features p{font-size:12px;line-height:18px;margin-bottom:0;margin-top:10px;padding-right:30px}

 .shopper-product-section .section-title span {
    position: relative;
    background: #ffffff;
    display: inline-block;
    padding: 0 15px;
    z-index: 2;
}
.shopper-product-section .section-title:before {
    content: '';
    width: 100%;
    height: 3px;
    position: absolute;
    background-color: #ddd;
    left: 0;
    top: 50%;
    z-index: 1;
}
.shopper-product-section .section-title {
    text-align: center;
    margin-bottom: 1.618em;
    position: relative;
    font-size: 1.2135em;
    text-transform: uppercase;
}
	.col-md-15.col-sm-30 {
    margin-bottom: 30px;
}
	.features, .features div {
    overflow: hidden;
    /* margin-bottom: 32px; */
}
	@media (min-width: 768px){
.col-md-15 {
    width: 25%;
	float:left;
	}
	.p-heading {
    font-family: EB Garamond,serif;
    color: #2d2d2d;
    font-weight: 400;
    position: relative;
    line-height: 1;
    text-align: center;
    -webkit-border-radius: 0;
    border-radius: 0;
    margin-top: 20px;
    margin-bottom: 20px;
    overflow: hidden;
}
	.p-heading:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: block;
    margin: auto;
    height: 1px;
    background: #333;
    width: 100%;
}
		.p-heading .p-title {
    margin: 0;
    display: inline-block;
    position: relative;
    font-size: 20px;
    line-height: 20px;
    text-align: center;
    text-transform: uppercase;
    -webkit-border-radius: 0;
    border-radius: 0;
    padding: 5px 10px;
    background: #fff;
}
		div#omma {
    overflow: hidden;
    margin-bottom: 30px;
   margin-top: 30px;
}
	}

If you have any issue feel free to ask me question here in comments section

OR

Pay me some, I will help you for CSS Issue Personally CLICK HERE….

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s