Last active
October 28, 2024 06:16
-
-
Save bekarice/ce7b04fe8158dc736e0c to your computer and use it in GitHub Desktop.
Add content and notices to the WooCommerce checkout - sample code
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Each of these samples can be used - note that you should pick one rather than add them all. | |
* | |
* How to use WC notices: https://github.com/woothemes/woocommerce/blob/master/includes/wc-notice-functions.php#L96 | |
* Tutorial: http://www.skyverge.com/blog/edit-woocommerce-templates/ | |
**/ | |
/** | |
* Add a content block after all notices, such as the login and coupon notices. | |
* | |
* Reference: https://github.com/woothemes/woocommerce/blob/master/templates/checkout/form-checkout.php | |
*/ | |
add_action( 'woocommerce_before_checkout_form', 'skyverge_add_checkout_content', 12 ); | |
function skyverge_add_checkout_content() { | |
echo 'This content that you can use to tell customers stuff. You could make it a div class="checkout-message" and style it if you wanted.'; | |
} | |
/** | |
* Add a content in a notice instead. Let's add it before other notices with a priority = 9 | |
* | |
* Reference: https://github.com/woothemes/woocommerce/blob/master/templates/checkout/form-checkout.php | |
*/ | |
add_action( 'woocommerce_before_checkout_form', 'skyverge_add_checkout_success', 9 ); | |
function skyverge_add_checkout_success() { | |
wc_print_notice( __( 'A success message with high priority.', 'woocommerce' ), 'success' ); | |
} | |
/** | |
* Add an info notice instead. Let's add it after other notices with priority = 11 | |
* | |
* Reference: https://github.com/woothemes/woocommerce/blob/master/templates/checkout/form-checkout.php | |
*/ | |
add_action( 'woocommerce_before_checkout_form', 'skyverge_add_checkout_notice', 11 ); | |
function skyverge_add_checkout_notice() { | |
wc_print_notice( __( 'A notice message instead.', 'woocommerce' ), 'notice' ); | |
} | |
/** | |
* Add add a notice before the payment form - let's use an eror notice. Could also use content, etc. | |
* | |
* Reference: https://github.com/woothemes/woocommerce/blob/master/templates/checkout/review-order.php | |
*/ | |
add_action( 'woocommerce_review_order_before_payment', 'skyverge_before_paying_notice' ); | |
function skyverge_before_paying_notice() { | |
wc_print_notice( __( 'An error message.', 'woocommerce' ), 'error' ); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Just a quick note to say that this is still working flawlessly in 2023!
For anyone wondering how to control where your message will appear, it all depends on the action hook:
woocommerce_before_checkout_form
will place it at the top of the pagewoocommerce_review_order_before_payment
will place it in the middle of the page near where the order total is displayedIf you just drop the code as shown above into your main functions.php file it will always display on the checkout page no matter what, so make sure you wrap your message inside of the appropriate conditionals if you only want it to display under specific conditions.
The color of the message is controlled by the keyword at the end of the
wc_print_notice()
call:NULL
leaving it blank isn't showing up for me in the current version, though it doesn't seem to trigger an error, eithersuccess
shows the message inside of a GREEN boxnotice
shows the message inside of a BLUE boxerror
shows the message inside of a RED boxHope that helps people finding this to get the most out of it. Thanks again to the author for posting a great reference for it!