Add content to the checkout page
Another way to edit the WooCommerce checkout page is by adding some content. With a solid knowledge of WC checkout hooks, you can easily insert any kind of content such as images, titles, text, and so on wherever you want. For example, you can use this script to add a trust badge image before the Place order button on the checkout page:
add_action('woocommerce_review_order_before_submit','quadlayers_checkout_content'); function quadlayers_checkout_content(){ echo '<img src="https://www.heresylab.com/wp-content/uploads/2019/01/paypal-1.png" />; }
Apart from images, you can also add a simple header text at the top of the checkout:
add_action(woocommerce_checkout_before_customer_details ,'quadlayers_checkout_header'); function quadlayers_checkout_header(){ echo "<h2>This is a custom Header<h2> "; }
Another interesting alternative is to add a message to your checkout page. Typically, stores mention things related to shipping, delivery, and so on. For example, let’s say you want to remind customers that they might need to wait 5 business days to receive their products. In the functions.php file of your file theme, add:
add_action( 'woocommerce_after_order_notes', 'wc_add_message' ); function wc_add_message () { echo 'Please remember that delivery may take up to 5 business days.'; }
2.5) Add Fees to the checkout page
Let’s have a look at how to edit the WooCommerce checkout page and add extra fees. Most of the time, there are two types of additional fees:
- Fixed
- Percentage
In this section, we’ll show you how to add both to your checkout.
Add a fixed fee
A typical example of a fixed fee is express delivery. Let’s say you want to include a $10 fixed fee for express delivery.
Simply use the script below and edit the text for the field name. In this example, we’ll call the “Extra Charge” and it will add $10 to the order.
add_action('woocommerce_cart_calculate_fees', function() { if (is_admin() && !defined('DOING_AJAX')) { return; } WC()->cart->add_fee(__('Extra Charge', 'txtdomain'), 10); });
Keep in mind that this code will automatically add a $10 fixed fee to the total of the customers’ order during checkout.
Add a percentage-based fee
Another alternative is to charge a percentage-based fee. This can be useful if there are extra taxes or you want to add an extra cost for certain payment gateways charges. Let’s say we want to add a 3% fee to the total price of the order (products + shipping).
add_action('woocommerce_cart_calculate_fees', function() { if (is_admin() && !defined('DOING_AJAX')) { return; } $percentage = 0.03; $percentage_fee = (WC()->cart->get_cart_contents_total() + WC()->cart->get_shipping_total()) * $percentage; WC()->cart->add_fee(__('Tax', 'txtdomain'), $percentage_fee); });
This script will add a 3% fee to the shopper’s total order during checkout.