How To Use Product Badges Manager

Welcome to your Ocean eComm Treasure Box!

The Product Badges Manager is a new feature, available as of Ocean eComm Treasure Box 1.2.0. And, as of Ocean eComm Treasure Box 1.4.0, besides textual badges, you'll be able to add image type badges and choose between multiple built-in libraries for all sale intents and purposes.

By default, WooCommerce has 2 types of badges: sale items and out of stock items.

With the Product Badges Manager you can create as many product badges as you like and style them independently. Likewise, you can apply them to single products, or entire product categories or tags per need.

With the OceanWP Product Badges Manager, you can also combine textual and image badges at once, there's nothing to stop you to really nail that sale.

Want to apply multiple badges at once? You got it!

The Product Badges Managers also provides a live preview of your settings to simplify the customization and styling process for you.

Product Badges Manager

To enable and use the Product Badges Manager feature, navigate to your WP dashboard, open the eCommerce OTB dashboard, and go to the Modules tab.

Click the "cog" icon next to the Product Badges manager option to load the settings.

To enable the Product Badges Manager and see inner settings, set the slider next to the Enable Module option to ON.

Product Badges Manager General Settings

Before you go on and create and style new badges, you can apply some general settings to all badges:

Position: from the dropdown choose the position of the badge on the front end.
Badge Padding from Container: add the value for the distance of the badge (top/bottom and side) where the badge is going to be displayed.
Enable Custom Badges on Archive Pages: if set to ON, custom badges will appear on the Shop page, product categories and tags pages.
Enable Custom Badges on Single Product Page: if set to ON, custom badges will appear on single product pages.
Show Default WooCommerce Sale Badge: if set to ON, the default WooCommerce sale badge will continue to display as usual.

Of course, there are additional options:

Save Changes: save all your changes.
Reset to Default: though the button looks like disabled, it's very much active. This option will delete all your custom settings and reset the Products Purchase Notifier options to default. The option requires confirmation.
← BACK: Go back to the main Modules screen.

Now you can create and customize your product badges.

Create & Customize Product Badges

If the Product Badges Manager module is enabled, navigate to your WP Dashboard, and under the eCommerce OTB locate the Product Badges option.

If you're not seeing this option even though the Product Badges Manager is enabled, refresh your page.

Create a Product Badge

Create a new product badge by clicking the Add New button.

After that, add a name for your badge and proceed with further settings:

Badge Type:
- General: for any type you want. For example, you can create a badge related to your coupons.
- Discount: related to product which are on sale. Names are generated automatically for this type, based on the percentage.
- Sold Out: for items that are out of stock,
- Image: for any type you want. Choose between multiple built-in image libraries, classified by occasion therefore choose the desired Image Badge Type and pick the image. This feature is available as of Ocean eComm Treasure Box 1.4.0.
Badge Name: enter the name that will be displayed. Not applicable to the Discount badge type.
Badge Expiry Date: choose the date when the badge should stop displaying.
Badge Color: background color.
Text Color: badge name color.
Padding: space around the text and related to the background:
- Example 1: 10px (applies 10px all around the text);
- Example 2: 10px 20px (applies 10px top and bottom and 20px on the sides);
- Example 3. 10px 20px 5px 30px (applies 10px on the top, 20px on the right, 5px on the bottom and 30px on the left).
Border Radius: apply border radius to the badge background. See Padding examples for details.
Width: add a custom width for the badge.
Height: add a custom height for the badge.
Custom CSS Class: add a custom CSS class name that will be applied to the badge. For example, if you created a custom CSS code in the Customizer > Custom CSS.

When you're done, publish your badge. After that, you can assign the badge either to single products or product categories.

Apply Product Badges To Single Products

To apply product badge(s) to a single product, you need to edit the particular product as usual (Products > All Products > Edit), then scroll down to the Product Data settings, go to Badges section and choose the badges you want.

After that, update the product.

Apply Product Badges To Product Categories

To apply product badge(s) to product category(ies), you need to edit the particular product category as usual (Products > Categories > Edit), then from the Custom Badges section check the option for badges you want to use.

After that, update the category.

Apply Product Badges to Product Tags

To apply product badge(s) to product tag(s), you need to edit the particular product tag as usual (Products > Tags > Edit), then from the Custom Badges section check the option for badges you want to use.

After that, update the tag.

That's it!

Enjoy building your custom eCommerce website with OceanWP and Ocean eComm Treasure Box!