While in most situations this default option works fine, in some cases you may want greater control over the way customers on your site are notified.
Using a single line of jQuery, we can easily replace these alert boxes with styled notification messages that you can completely customize using your own CSS.
Step 1. Include the jQuery library
For this example, we’ll include the script tags in our default site-wide template – this way we can be sure the library is present on all of our product pages.
We’ll insert the following code inside the head of our template:
You’ll notice that we’re using the latest version of jQuery hosted on jQuery’s own CDN. If you’d like to host the jQuery .js file on your own site, simply replace the script source with the path to your hosted version.
Step 2. Create and style your message box
Next up, we need to create a DIV element that we’ll render the notification message inside.
We’ll navigate to our site-wide template, switch over to HTML mode and then insert the following code at the end of the template, just before the the closing body tag:
It’s important that we assign our DIV the ID of “messageBox” as we’ll be using this unique identifier to select and manipulate it using jQuery.
You can completely customize the look and feel of your message box using CSS. For this example, we’ll position the box in the bottom-right corner of the customer’s screen, make the font white, and background color black. To get you started, below is our sample CSS styling:
To use this styling for your message box, either a) insert it in the head of your template or b) add it to your CSS stylesheet.
Step 3. Insert the code
The final step is to include the jQuery code that supresses the default alert box and triggers our custom notifiation instead.
We’ll insert the following code at the end of our site-wide template, just before the closing body tag.
Save and publish the template.
Now, when a customer clicks the “Add to cart” button, jQuery will grab the alert message and populate our message box DIV with it’s text. The default alert box will be supressed and the customer will no longer be required to click the “Ok” button.
We’re using one of jQuery’s built-in transition effects to fade in the message box and fade it back out after a 2 second delay.
This is just a basic example of how you can customize your online shop alert messages using jQuery. Using this method as a starting point, you can completely customize the styling of your message boxes to suit the look and feel of your online shop.