OhhMuaOhhMua
  • Home
  • Hosting
    • Best Web Hosting
    • Free Web Hosting
    • VPS Hosting
  • WordPress
    • Solutions & Troubleshooting
    • Installation & Setup
    • Themes & Plugins
    • Security
  • Build PC
    • High-end Builds
    • Mid-range Builds
    • Entry-level Builds
  • Computer
    • Computer Glossary
    • Computer Hardware
      • CPU (Processors)
      • GPU (Graphics Cards)
      • Motherboards
      • RAM (Memory)
      • Storage (SSD & HDD)
      • PSU (Power Supply Units)
      • Cases & Cooling
      • Monitors & Peripherals
    • Computer Tips
      • Hardware Tips
      • Software Tips
    • PC Troubleshooting
    • Gaming Errors & Solutions
  • Coupons & Deals
  • Tools
    • veo3 prompt generator
Reading: How to Create a Stunning Notification Box for Your Website
Notification Show More
OhhMuaOhhMua
  • Computer Tips
  • Hosting
  • WordPress
Search
  • Home
  • WordPress
    • Installation & Setup
    • Security
    • Solutions & Troubleshooting
    • Themes & Plugins
    • Troubleshooting
  • Hosting
    • Free Web Hosting
    • VPS Hosting
    • Best Web Hosting
  • Computer Tips
    • PC Troubleshooting
    • Gaming Errors & Solutions
    • Computer Hardware
  • Coupons & Deals
  • veo3 prompt generator
Follow US
Copyright © 2024 ohhmua. All rights reserved.
OhhMua > Blog > WordPress > Solutions & Troubleshooting > How to Create a Stunning Notification Box for Your Website
Solutions & Troubleshooting

How to Create a Stunning Notification Box for Your Website

Admin (Nghia Vo)
Last updated: September 20, 2024 1:44 pm
Admin (Nghia Vo)
Share
3 Min Read
Guide to Creating a Beautiful Promotion Notification Box for Your Website
Guide to Creating a Beautiful Promotion Notification Box for Your Website
SHARE
Contents
Step 1: Add HTML code to the desired positionStep 2: Add CSS code for stylingStep 3: Save and enjoy your results

Hello everyone, today I’ll guide you on how to create a beautiful promotion notification box for your website, as shown in the image below:

Guide to Creating a Beautiful Promotion Notification Box for Your Website
Guide to Creating a Beautiful Promotion Notification Box for Your Website

This tutorial is demonstrated on the Flatsome theme, using WooCommerce.

Step 1: Add HTML code to the desired position

Decide where you want to place the promotion box, then find that spot and get ready to copy the HTML code into it.

As shown in the image, the promotion notification box is positioned between the short description and the Add to Cart button. Therefore, the quickest way to add the HTML is:

In the Flatsome theme, go to Appearance – Customize – WooCommerce (shop) – Product Page – HTML before Add to Cart. Then, copy and paste the entire HTML code below into that section:

<div class="promotion-hb"> 
<span class="title"><i class="icon-gift"></i> Special Promotion</span> 
   <ul>
 	<li>30% off when registering for 3 years of hosting</li>
 	<li>10% off service fees when you like and share the website</li>
 	<li>Free online SEO writing course</li>
   </ul>
</div>
Guide to Creating a Beautiful Promotion Notification Box for Your Website 1

You can edit the content by changing the text within the <li> tags above!

Step 2: Add CSS code for styling

Go to Appearance – Customize – Style – Custom CSS and then add the CSS code below:

.promotion-hb {
	margin-bottom:2px;
	margin-top:2px;
	background:white;
	padding:10px;
	border-radius:5px;
	border:1px solid #ef0b0b;
	font-size:15px;
	width:100%;
}
.promotion-hb .title {
	background:#e31616;
	padding:2px 20px;
	margin-top:-24px;
	font-size:15px;
	font-weight:500;
	color:#ffffff;
	display:block;
	max-width:207px;
	border-radius:99px;
}
 
.promotion-hb ul {
   margin-bottom:4px;
   list-style-image:url(tick.png);	
}

Step 3: Save and enjoy your results

Good luck! If you encounter any difficulties, please feel free to comment, and I’ll assist you as soon as possible!

480520387 657957633334779 6814038772835954285 n
Admin (Nghia Vo)

Hi, I’m Nghia Vo: a computer hardware graduate, passionate PC hardware blogger, and entrepreneur with extensive hands-on experience building and upgrading computers for gaming, productivity, and business operations.

As the founder of Vonebuy.com, a verified ecommerce store under Vietnam’s Ministry of Industry and Trade, I combine my technical knowledge with real-world business applications to help users make confident decisions.

I specialize in no-nonsense guides on RAM overclocking, motherboard compatibility, SSD upgrades, and honest product reviews sharing everything I’ve tested and implemented for my customers and readers.

You Might Also Like

SEO in the Age of AI: How to Make Google Understand and Value Your Content

Cannot Fetch Sitemap in Google Search Console

Discovered – Currently Not Indexed in Google Search Console: What It Means & How to Fix It

Why 2 Backlinks per Article Might Be Killing Your SEO

What is Obsidian? Why Developers Love This Note-Taking App

TAGGED:notification box
Share This Article
Facebook Twitter Email Print
By Admin (Nghia Vo)
Follow:

Hi, I’m Nghia Vo: a computer hardware graduate, passionate PC hardware blogger, and entrepreneur with extensive hands-on experience building and upgrading computers for gaming, productivity, and business operations.

As the founder of Vonebuy.com, a verified ecommerce store under Vietnam's Ministry of Industry and Trade, I combine my technical knowledge with real-world business applications to help users make confident decisions. I specialize in no-nonsense guides on RAM overclocking, motherboard compatibility, SSD upgrades, and honest product reviews sharing everything I’ve tested and implemented for my customers and readers.
Leave a comment Leave a comment

Leave a Reply Cancel reply

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

Trending

How to Reset Graphics Drivers on Windows 11
Software Tips

How to Reset Graphics Drivers on Windows 11: A Complete Guide

September 16, 2025
6 PC Components to Avoid When Building Your PC in 2025
Hardware Tips

6 PC Components to Avoid When Building Your PC in 2025

July 30, 2025
Comprehensive Computer Beep Codes [Help You Fix Errors]
Computer Hardware

Comprehensive Computer Beep Codes [Help You Fix Errors]

August 22, 2020
4 Hidden Features of Your Motherboard You're Not Using
Hardware Tips

4 Hidden Features of Your Motherboard You’re Not Using

July 25, 2025
What Is a File System (NTFS, FAT32, exFAT)
Computer Glossary

What Is a File System (NTFS, FAT32, exFAT)?

September 21, 2025
GPU Fan Not Spinning
Computer Hardware

GPU Fan Not Spinning: Causes and Solutions

July 22, 2023
Previous Next

You Might Also Like

Optimize WordPress
Solutions & Troubleshooting

Want Faster Load Times? Optimize WordPress This Way

Admin (Nghia Vo) Admin (Nghia Vo) May 16, 2025
My Google Discover traffic skyrocketed after I did these 10 things
Solutions & Troubleshooting

My Google Discover traffic skyrocketed after I did these 10 things

Admin (Nghia Vo) Admin (Nghia Vo) May 14, 2025
How to Add a Read More to Product Descriptions in WooCommerce
Solutions & Troubleshooting

How to Add a “Read More” and “Show Less” Button to Product Descriptions in WooCommerce

Admin (Nghia Vo) Admin (Nghia Vo) May 5, 2025
WordPress Covers Every Website Type
Solutions & Troubleshooting

Blog, E-Commerce, or Forum? WordPress Covers Every Website Type!

Admin (Nghia Vo) Admin (Nghia Vo) April 29, 2025
Optimized Pagination thumbnail
Solutions & Troubleshooting

How I Optimized Pagination and Skyrocketed Traffic

Admin (Nghia Vo) Admin (Nghia Vo) April 28, 2025
How to Pick the Ideal Blogging Platform for Your Needs
Solutions & Troubleshooting

How to Pick the Ideal Blogging Platform for Your Needs

Admin (Nghia Vo) Admin (Nghia Vo) April 1, 2025
Previous Next
newsletter featured

Always Stay Up to Date

Subscribe to our newsletter to get our newest articles instantly!

Follow US on Social Media

Facebook Youtube Steam Twitch Unity

Copyright © 2024 ohhmua. All rights reserved.

OhhMua

Information

  • About
  • Terms & Conditions
  • Privacy Policy
Welcome Back!

Sign in to your account

Lost your password?