303 votes

1 answers

php - Custom WooCommerce message/notice at checkout

I would like to display a custom message/notice at the WooCommerce checkout page for logged out users only. I would like the message to appear every time a non logged in user enters the checkout page and have a button/link inside the notice that would hide it.

Here's an example on fiverr.com:

How can this be achieved?

---

EDIT:

$('.hide-notice').on('click', function(e) {
  e.preventDefault();
  $(this).parents('.checkout-notice').slideUp("slow", function() {
    $(this).parents('.checkout-notice').remove();
  });
});Copy code

.woocommerce-info {
  padding: 20px;
  background-color: #f5f5f5;
}Copy code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<div class="checkout-notice">
  <div class="woocommerce-info">
    Custom message custom message custom message custom message.
    <a href="" class="hide-notice">Hide message</a>
  </div>
</div>Copy code

Undefined asked

2021-12-5

Write your answer

---

149

votes

Answer

Solution:

You can usewoocommerce_before_checkout_form to add a custom message. check the below code. code goes in your active theme function.php file.

Add CSS as per your requirement.

add_action( 'woocommerce_before_checkout_form', 'add_custom_message_to_checkout', 1 );
function add_custom_message_to_checkout() {

    if( !is_user_logged_in() ){

        echo '<div class="custom-checkout-message">This is custom checkout message. you can add CSS as per your requirement. <a href="" class="hide-me">close me</a></div>';
        ?>
        <script type="text/javascript">
            (function($){
                $('.hide-me').on('click',function(e){
                    e.preventDefault();
                    $(this).parent('.custom-checkout-message').fadeOut(300, function() { 
                        $(this).parent('.custom-checkout-message').remove(); 
                    });
                });
            })(jQuery);
        </script>
        <?php
        
    }
}
Copy code

Tested and works.

$('.hide-me').on('click',function(e){
    e.preventDefault();
    $(this).parent('.custom-checkout-message').fadeOut(300, function() { 
        $(this).parent('.custom-checkout-message').remove(); 
    });
});Copy code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-checkout-message">This is custom checkout message. you can add CSS as per your requirement. <a href="" class="hide-me">close me</a></div>Copy code

Write your answer

---

Share solution ↓

Additional Information:

Date the issue was resolved:

2021-12-5

Link To Source
Link To Answer People are also looking for solutions of the problem: foreach() argument must be of type array|object, null given

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

---

Similar questions

Find the answer in similar questions on our website.

50 php - Wordpress custom post status of "expired"

752 Using PHP have a MySQL statement into multiple PHP variables

501 php - Prestashop 1.6 - Show Customer Group in Account page (Front End)

785 php - How many instances of a class have been created

533 php - How to change the content of a page with javascript based on select input?

155 php - Array 2 string conversion while using CURLOPT_POSTFIELDS

940 php - How do I convert Word smart quotes and em dashes in a string?

719 php - Symfony2 Response

443 php - Get dates for specific weekdays

332 mysql - php video upload doesn't work

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

About the technologies asked in this question

PHP

PHP (from the English Hypertext Preprocessor - hypertext preprocessor) is a scripting programming language for developing web applications. Supported by most hosting providers, it is one of the most popular tools for creating dynamic websites. The PHP scripting language has gained wide popularity due to its processing speed, simplicity, cross-platform, functionality and distribution of source codes under its own license.
https://www.php.net/

JavaScript

JavaScript is a multi-paradigm language that supports event-driven, functional, and mandatory (including object-oriented and prototype-based) programming types. Originally JavaScript was only used on the client side. JavaScript is now still used as a server-side programming language. To summarize, we can say that JavaScript is the language of the Internet.
https://www.javascript.com/

JQuery

JQuery is arguably the most popular JavaScript library with so many features for modern development. JQuery is a fast and concise JavaScript library created by John Resig in 2006. It is a cross-platform JavaScript library designed to simplify client-side HTML scripting. Over 19 million websites are currently using jQuery! Companies like WordPress, Facebook, Google, IBM and many more rely on jQuery to provide a kind of web browsing experience.
https://jquery.com/

CSS

CSS (Cascading Style Sheets) is a formal language for describing the appearance of a document written using a markup language. It is mainly used as a means of describing, decorating the appearance of web pages written using HTML and XHTML markup languages, but can also be applied to any XML documents, such as SVG or XUL.
https://www.w3.org/TR/CSS/#css

HTML

HTML (English "hyper text markup language" - hypertext markup language) is a special markup language that is used to create sites on the Internet. Browsers understand html perfectly and can interpret it in an understandable way. In general, any page on the site is html-code, which the browser translates into a user-friendly form. By the way, the code of any page is available to everyone.
https://www.w3.org/html/