Necessary codes for Product page design

Leave a Comment / ওয়ার্ডপ্রেস টিপ্স / By

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

image 5
<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:

image 6
<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

image 7
<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>

Offer countdown

image 8
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown Timer</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600;700&family=Lato:wght@400;700&display=swap');

  * { box-sizing: border-box; margin: 0; padding: 0; }

  .countdown-wrapper {
    background: #fff;
    border: 2px solid #e8e8e8;
    border-radius: 6px;
    padding: 22px 30px 26px;
    text-align: center;
    max-width: 100%;
    margin: 0;
    font-family: 'Lato', sans-serif;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    position: relative;
    overflow: hidden;
  }

  .countdown-wrapper::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #e31c23, #ff4b52);
  }

  .countdown-title {
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
  }

  .countdown-subtitle {
    font-size: 13px;
    color: #888;
    margin-bottom: 18px;
    letter-spacing: 0.2px;
  }

  .countdown-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
  }

  .time-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
  }

  .time-number {
    font-family: 'Oswald', sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
    letter-spacing: -1px;
    transition: transform 0.15s ease;
  }

  .time-number.tick {
    transform: scale(1.08);
  }

  .time-label {
    font-size: 11px;
    font-weight: 700;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 6px;
  }

  .time-separator {
    font-family: 'Oswald', sans-serif;
    font-size: 42px;
    font-weight: 700;
    color: #e31c23;
    padding: 0 2px;
    margin-bottom: 18px;
    animation: blink 1s step-start infinite;
  }

  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }

  .urgency-bar {
    margin-top: 18px;
    height: 4px;
    background: #f0f0f0;
    border-radius: 2px;
    overflow: hidden;
  }

  .urgency-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #e31c23, #ff7b00);
    border-radius: 2px;
    transition: width 1s linear;
  }

  .urgency-text {
    font-size: 11px;
    color: #e31c23;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 8px;
  }
</style>
</head>
<body style="background:transparent; margin:0; padding:0;">

<div class="countdown-wrapper">
  <div class="countdown-title">Bijna voorbij...</div>
  <div class="countdown-subtitle">Deze exclusieve aanbieding eindigt over</div>

  <div class="countdown-timer">
    <div class="time-unit">
      <div class="time-number" id="days">03</div>
      <div class="time-label">Dagen</div>
    </div>
    <div class="time-separator">:</div>
    <div class="time-unit">
      <div class="time-number" id="hours">00</div>
      <div class="time-label">Uren</div>
    </div>
    <div class="time-separator">:</div>
    <div class="time-unit">
      <div class="time-number" id="minutes">00</div>
      <div class="time-label">Minuten</div>
    </div>
    <div class="time-separator">:</div>
    <div class="time-unit">
      <div class="time-number" id="seconds">00</div>
      <div class="time-label">Seconden</div>
    </div>
  </div>

  <div class="urgency-bar">
    <div class="urgency-bar-fill" id="urgencyFill" style="width:100%"></div>
  </div>
  <div class="urgency-text">⚡ Beperkte voorraad beschikbaar!</div>
</div>

<script>
  // 3 DAY COUNTDOWN CONFIG
  const COUNTDOWN_HOURS   = 72;   // 3 days
  const COUNTDOWN_MINUTES = 0;
  const COUNTDOWN_SECONDS = 0;

  const STORAGE_KEY = 'flatsome_countdown_end_v3';
  let endTime;

  if (sessionStorage.getItem(STORAGE_KEY)) {
    endTime = parseInt(sessionStorage.getItem(STORAGE_KEY));
  } else {
    endTime = Date.now() + ((COUNTDOWN_HOURS * 3600) + (COUNTDOWN_MINUTES * 60) + COUNTDOWN_SECONDS) * 1000;
    sessionStorage.setItem(STORAGE_KEY, endTime);
  }

  const totalDuration = ((COUNTDOWN_HOURS * 3600) + (COUNTDOWN_MINUTES * 60) + COUNTDOWN_SECONDS) * 1000;

  function pad(n) { return String(n).padStart(2, '0'); }

  function tick(el, newVal) {
    if (el.textContent !== newVal) {
      el.classList.add('tick');
      el.textContent = newVal;
      setTimeout(() => el.classList.remove('tick'), 150);
    }
  }

  function update() {
    const now = Date.now();
    let remaining = Math.max(0, endTime - now);

    const days    = Math.floor(remaining / 86400000);
    remaining    -= days * 86400000;
    const hours   = Math.floor(remaining / 3600000);
    remaining    -= hours * 3600000;
    const minutes = Math.floor(remaining / 60000);
    remaining    -= minutes * 60000;
    const seconds = Math.floor(remaining / 1000);

    tick(document.getElementById('days'),    pad(days));
    tick(document.getElementById('hours'),   pad(hours));
    tick(document.getElementById('minutes'), pad(minutes));
    tick(document.getElementById('seconds'), pad(seconds));

    const elapsed = now - (endTime - totalDuration);
    const pct = Math.min(100, Math.max(0, (elapsed / totalDuration) * 100));
    document.getElementById('urgencyFill').style.width = (100 - pct) + '%';

    if (endTime - now <= 0) {
      clearInterval(timer);
      document.querySelector('.countdown-title').textContent = 'Aanbieding verlopen!';
      document.querySelector('.countdown-subtitle').textContent = 'Deze aanbieding is helaas niet meer geldig.';
    }
  }

  update();
  const timer = setInterval(update, 1000);
</script>

</body>
</html>

Blackarts Product Page Coutdown

<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown Timer</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600;700&family=Lato:wght@400;700&display=swap');

  * { box-sizing: border-box; margin: 0; padding: 0; }

  .countdown-wrapper {
    background: #fff;
    border: 2px solid #e8e8e8;
    border-radius: 6px;
    padding: 22px 30px 26px;
    text-align: center;
    max-width: 100%;
    margin: 0;
    font-family: 'Lato', sans-serif;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    position: relative;
    overflow: hidden;
  }

  .countdown-wrapper::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #e31c23, #ff4b52);
  }

  .countdown-title {
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
  }

  .countdown-subtitle {
    font-size: 13px;
    color: #888;
    margin-bottom: 18px;
    letter-spacing: 0.2px;
  }

  .countdown-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
  }

  .time-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
  }

  .time-number {
    font-family: 'Oswald', sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
    letter-spacing: -1px;
    transition: transform 0.15s ease;
  }

  .time-number.tick {
    transform: scale(1.08);
  }

  .time-label {
    font-size: 11px;
    font-weight: 700;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 6px;
  }

  .time-separator {
    font-family: 'Oswald', sans-serif;
    font-size: 42px;
    font-weight: 700;
    color: #e31c23;
    padding: 0 2px;
    margin-bottom: 18px;
    animation: blink 1s step-start infinite;
  }

  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }

  .urgency-bar {
    margin-top: 18px;
    height: 4px;
    background: #f0f0f0;
    border-radius: 2px;
    overflow: hidden;
  }

  .urgency-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #e31c23, #ff7b00);
    border-radius: 2px;
    transition: width 1s linear;
  }

  .urgency-text {
    font-size: 11px;
    color: #e31c23;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 8px;
  }
</style>
</head>
<body style="background:transparent; margin:0; padding:0;">

<div class="countdown-wrapper">
  <div class="countdown-title">Bijna voorbij...</div>
  <div class="countdown-subtitle">Deze exclusieve aanbieding eindigt over</div>

  <div class="countdown-timer">
    <div class="time-unit">
      <div class="time-number" id="days">03</div>
      <div class="time-label">Dagen</div>
    </div>
    <div class="time-separator">:</div>
    <div class="time-unit">
      <div class="time-number" id="hours">00</div>
      <div class="time-label">Uren</div>
    </div>
    <div class="time-separator">:</div>
    <div class="time-unit">
      <div class="time-number" id="minutes">00</div>
      <div class="time-label">Minuten</div>
    </div>
    <div class="time-separator">:</div>
    <div class="time-unit">
      <div class="time-number" id="seconds">00</div>
      <div class="time-label">Seconden</div>
    </div>
  </div>

  <div class="urgency-bar">
    <div class="urgency-bar-fill" id="urgencyFill" style="width:100%"></div>
  </div>
  <div class="urgency-text">⚡ Beperkte voorraad beschikbaar!</div>
</div>

<script>
  // 3 DAY COUNTDOWN CONFIG
  const COUNTDOWN_HOURS   = 72;   // 3 days
  const COUNTDOWN_MINUTES = 0;
  const COUNTDOWN_SECONDS = 0;

  const STORAGE_KEY = 'flatsome_countdown_end_v3';
  let endTime;

  if (sessionStorage.getItem(STORAGE_KEY)) {
    endTime = parseInt(sessionStorage.getItem(STORAGE_KEY));
  } else {
    endTime = Date.now() + ((COUNTDOWN_HOURS * 3600) + (COUNTDOWN_MINUTES * 60) + COUNTDOWN_SECONDS) * 1000;
    sessionStorage.setItem(STORAGE_KEY, endTime);
  }

  const totalDuration = ((COUNTDOWN_HOURS * 3600) + (COUNTDOWN_MINUTES * 60) + COUNTDOWN_SECONDS) * 1000;

  function pad(n) { return String(n).padStart(2, '0'); }

  function tick(el, newVal) {
    if (el.textContent !== newVal) {
      el.classList.add('tick');
      el.textContent = newVal;
      setTimeout(() => el.classList.remove('tick'), 150);
    }
  }

  function update() {
    const now = Date.now();
    let remaining = Math.max(0, endTime - now);

    const days    = Math.floor(remaining / 86400000);
    remaining    -= days * 86400000;
    const hours   = Math.floor(remaining / 3600000);
    remaining    -= hours * 3600000;
    const minutes = Math.floor(remaining / 60000);
    remaining    -= minutes * 60000;
    const seconds = Math.floor(remaining / 1000);

    tick(document.getElementById('days'),    pad(days));
    tick(document.getElementById('hours'),   pad(hours));
    tick(document.getElementById('minutes'), pad(minutes));
    tick(document.getElementById('seconds'), pad(seconds));

    const elapsed = now - (endTime - totalDuration);
    const pct = Math.min(100, Math.max(0, (elapsed / totalDuration) * 100));
    document.getElementById('urgencyFill').style.width = (100 - pct) + '%';

    if (endTime - now <= 0) {
      clearInterval(timer);
      document.querySelector('.countdown-title').textContent = 'Aanbieding verlopen!';
      document.querySelector('.countdown-subtitle').textContent = 'Deze aanbieding is helaas niet meer geldig.';
    }
  }

  update();
  const timer = setInterval(update, 1000);
</script>

</body>
</html>

Plazu Khimar Product Page

<style>
@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;600;700&display=swap');
.ms-info-box {
    font-family: 'Hind Siliguri', sans-serif;
    margin: 14px 0;
}
.ms-stars {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}
.ms-stars-icons { color: #d4a017; font-size: 17px; letter-spacing: 1px; }
.ms-stars-text  { font-size: 13px; color: #666; }
.ms-features {
    background: #e8f5ed;
    border: 1px solid #b2dfc2;
    border-radius: 10px;
    padding: 14px 16px;
}
.ms-feature-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid #c8e6c9;
    font-size: 14px;
    color: #1a1a1a;
    line-height: 1.5;
}
.ms-feature-row:last-child { border-bottom: none; padding-bottom: 0; }
.ms-feature-row:first-child { padding-top: 0; }
.ms-feature-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.ms-feature-text strong { font-weight: 700; color: #0f5228; }
</style>

<div class="ms-info-box">
    <!-- Stars -->
    <div class="ms-stars">
        <span class="ms-stars-icons">★★★★★</span>
        <span class="ms-stars-text">৪.৯ (৫৫০০+ জন কিনেছেন)</span>
    </div>

    <!-- Features -->
    <div class="ms-features">
        <div class="ms-feature-row">
            <span class="ms-feature-icon">✅</span>
            <span class="ms-feature-text">ফেব্রিক → সফট লিলেন  |  লং/বডি → ফ্রি সাইজ</span>
        </div>
        <div class="ms-feature-row">
            <span class="ms-feature-icon">🎁</span>
            <span class="ms-feature-text"><strong>সাথে পাচ্ছেন ফ্রি: ১টি লেডিস হাত ঘড়ি + ১টি কটনের ইনার ক্যাপ</strong></span>
        </div>
        <div class="ms-feature-row">
            <span class="ms-feature-icon">📦</span>
            <span class="ms-feature-text">প্যাকেজিং: সুন্দর গিফট বক্সে ডেলিভারি</span>
        </div>
        <div class="ms-feature-row">
            <span class="ms-feature-icon">🚚</span>
            <span class="ms-feature-text">ঢাকায় ১-২ দিন  |  ঢাকার বাইরে ২-৩ দিন</span>
        </div>
    </div>
</div>
<br>
<div style="background:#fdf6e3;border:1px solid #e8d08a;border-radius:8px;padding:10px 14px;font-family:'Hind Siliguri',sans-serif;font-size:13px;font-weight:600;color:#7a5c00;margin-bottom:12px;">
  ⚠️ সীমিত স্টক! মাত্র কয়েকটি বাকি আছে — এখনই অর্ডার করুন
</div>

Leave a Comment