Necessary codes for Product page design

এখানে আমি Flatsome Theme – এর Before Add to cart and After Add to Cart -এ ব্যবহার করার জন্য কিছু html কোড

<div class="delivery-info">
  <h4>🚚 Delivery Information</h4>

  <ul>
    <li><strong>Inside Dhaka (1–2 Days):</strong> ৳60</li>
    <li><strong>Outside Dhaka (2–3 Days):</strong> ৳100</li>
  </ul>

  <p class="free-delivery">
    🎉 ১৫০০ টাকার পণ্য অর্ডার করলেই <strong>ফ্রী ডেলিভারি</strong>
  </p>
</div>

<style>
.delivery-info {
  border: 1px dashed #ddd;
  padding: 16px 18px;
  border-radius: 10px;
  background: #fafafa;
  font-family: Arial, sans-serif;
  max-width: 420px;
}

.delivery-info h4 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
}

.delivery-info ul {
  padding-left: 18px;
  margin: 0 0 12px;
}

.delivery-info li {
  font-size: 14px;
  margin-bottom: 6px;
}

.free-delivery {
  background: #000;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  text-align: center;
  margin: 0;
}
</style>

Fomo Badge:

<div class="fomo-box">
  ⏰ <strong>Hurry Up!</strong> Few items left in stock.<br>
  <span>Order now before it’s gone!</span>
</div>

<style>
.fomo-box {
  background: linear-gradient(90deg, #ff3d00, #ff6f00);
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 12px;
  animation: pulse 1.5s infinite;
}

.fomo-box span {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-top: 2px;
}

/* subtle pulse animation */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
</style>

Scarcity Badget

<div class="psy-scarcity">
  ⚠️ <strong>Limited Stock!</strong> Only a few items left today.
</div>

<style>
.psy-scarcity {
  background: #fff3cd;
  color: #856404;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}
</style>

Urgency Trigger (Time Pressure)

<div class="psy-urgency">
  ⏰ Order within <strong>today</strong> to get fast delivery!
</div>

<style>
.psy-urgency {
  background: #ffecec;
  color: #c62828;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}
</style>

Social Proof:

⭐ Trusted by 500+ happy customers across Bangladesh

<div class="psy-social">
  ⭐ Trusted by <strong>500+ happy customers</strong> across Bangladesh
</div>

<style>
.psy-social {
  background: #f1f8ff;
  color: #0d47a1;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}
</style>

🔒 7 Days Easy Return | No Risk Shopping

<div class="psy-risk">
  🔒 7 Days Easy Return | No Risk Shopping
</div>

<style>
.psy-risk {
  background: #e8f5e9;
  color: #1b5e20;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
}
</style>

🎁 Free Delivery on orders over ৳1500

<div class="psy-bonus">
  🎁 Free Delivery on orders over ৳1500
</div>

<style>
.psy-bonus {
  background: #000;
  color: #fff;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  margin-top: 10px;
}
</style>

✔ Quality Checked & Verified by Our Team

<div class="psy-authority">
  ✔ Quality Checked & Verified by Our Team
</div>

<style>
.psy-authority {
  background: #f9f9f9;
  color: #333;
  padding: 10px 12px;
  border-left: 4px solid #000;
  font-size: 14px;
  font-weight: 600;
  margin-top: 10px;
}
</style>

💬 Order on WhatsApp

<a 
  href="https://wa.me/8801604228176?text=Hello,%20I%20want%20to%20order%20this%20product.%20Please%20share%20details."
  class="whatsapp-order"
  target="_blank"
>
  💬 Order on WhatsApp
</a>

<style>
.whatsapp-order {
  display: block;
  width: 100%;
  text-align: center;
  background: #25D366;
  color: #fff;
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  margin-top: 12px;
  transition: all 0.3s ease;
}

.whatsapp-order:hover {
  background: #1ebe5d;
  transform: scale(1.02);
}
</style>

⚡ Confused? Order directly on WhatsApp 💬 WhatsApp Quick Order

<div class="wa-wrap">
  <p class="wa-text">⚡ Confused? Order directly on WhatsApp</p>

  <a 
    href="https://wa.me/8801604228176?text=Hi,%20I%20want%20to%20order%20this%20product.%20Is%20COD%20available?"
    class="whatsapp-order"
    target="_blank"
  >
    💬 WhatsApp Quick Order
  </a>
</div>

<style>
.wa-wrap {
  margin-top: 14px;
}

.wa-text {
  text-align: center;
  font-size: 13px;
  margin-bottom: 6px;
  color: #555;
}
</style>