Just look for the line where it says so $newness = 7in the code. You can change that number 7 to whatever number of days you want, like 14 for two weeks or 30 for a month.
Finally, click the “Inactive” button until it changes to “Active,” then click “Save Snippet.”
WPCode custom snippet for displaying WooCommerce product badges
Next, we need to style our badges so they look great on your products. Let’s add some CSS to tweak their appearance.
To add a new snippet, follow the same steps as above, but this time choose “CSS Snippet” when prompted.
Selecting CSS Snippet as the Code Type
Give your snippet a descriptive name, such as “Product Badge Styles.” This will help you find it easily if you need to make changes later.
Here’s the CSS code that will make your physician database badges look professional. Just paste it into the “Code Preview” box:
1-click Use in WordPress
Let's detail what you can customize in this code.
Want your badges to be in a different location? To do this, you can change the superiorand values direito. For example, changing top: -10pxto top: 10pxwill move the badge down.
Don't like the colors? It's really easy to change them. Just find the lines de cor de fundoand replace the color codes.
For example, if you want a blue sale badge instead of a red one, change it #FF0000to #0000FF. You can also make the badges larger or smaller by adjusting the value do tamanho da fonte.
Want to learn more about how to adjust these styles? Check out our beginner’s guide to CSS in WordPress .
When you’re done, just click the “Inactive” button to make it “Active,” then click “Save Snippet.”
WPCode custom snippet for styling product badges
That's it!
Your badges should now appear on your product images. Here's an example of what ours looks like using our CSS code:
Example of WooCommerce product badges made with WPCode.
Want to adjust how long a product is considered “new”?
-
- Posts: 72
- Joined: Thu Dec 26, 2024 5:28 am