Modify checkout page

Hi @rmiroslav,

It sounds like you want to design your WooCommerce checkout page and style it the same way as shown in the link provided, right?

You could start by overriding the Checkout template files found under wp-content/plugins/woocommerce/templates/checkout/. There are several files but form-checkout.php is the main file. You may find helpful this support guide to get started:

https://docs.woocommerce.com/document/template-structure/

Another way to style is via a page builder like Elementor – which would be probably easier than using hooks, and this article walks you through the process.

Hope this helps.

Hi,
thanks for reply.
That design was to show you what I want to do, but my main problem is that I need a way to intercept checkout submit to update the price, add comment using update_comment_meta( $comment_id, ‘rating’, 1 ); and to send application_fee_amount to stripe for split payment.
I’m a c# developer, I don’t really know what fields do I need to map ??

Thank you,
Emanuel

Hi @rmiroslav,

What you want to accomplish is a fairly complex development topic. I’m going to leave it open for a bit to see if anyone is able to chime in to help you out.

I can also recommend the WooCommerce Developer Resources Portal for resources on developing for WooCommerce.

You can also visit the WooCommerce Facebook Community group or the #developers channel of the WooCommerce Community Slack. We’re lucky to have a great community of open-source developers for WooCommerce, and many of our developers hang out there, as well.

Cheers.

Hi Mirko,
I solved all the requirements.
Thanks.
I will put here some code to show how I’ve done it

//setting up global obj
$stripe_meta_obj = (object) [
    "donation_fee" => 0,
    "donation_fee_percentage" => 0,
	"donation_subtotal" => 0,
	"donation_total"=>0
];

add_filter( 'woocommerce_order_button_html', 'custom_button_html' );

function custom_button_html( $button_html ) {
	$button_html = str_replace( 'Back Campaign Now', 'Donate', $button_html );
	return $button_html;
}
//$donation_fee = 5;
function try_update_cart_form() {
	if( is_page( array( 'checkout' ) ) ){
		
	
	$get_prod_id;
	$get_prod_price;	
	foreach( WC()->cart->get_cart() as $cart_item ){
    	$get_prod_id = $cart_item['product_id'];
		$get_prod_price = $cart_item['line_total'];
	}
?>
<script type="text/javascript">
	jQuery( document ).ready(function($) {
		jQuery('#donation_amount').attr({"type":"number", "min" : 1, "step":1});
		jQuery('#donation_amount_field .woocommerce-input-wrapper').prepend('<span class="currency_symbol"><?php echo get_woocommerce_currency_symbol(); ?></span>');
		//echo get_woocommerce_currency_symbol();
		
					var typingTimer;                //timer identifier
					var doneTypingInterval = 100;  //time in ms, 5 second for example
					var $input = jQuery('#donation_amount');
					$input.val(<?php echo esc_attr($get_prod_price); ?>);
					//on keyup, start the countdown
					$input.on('keyup', function () {
						
					clearTimeout(typingTimer);
						typingTimer = setTimeout(doneTyping, doneTypingInterval);
					});

					//on keydown, clear the countdown 
					$input.on('keydown', function () {
					clearTimeout(typingTimer);
					});

					//user is "finished typing," do something
					function doneTyping () {
					//do something
						if($input.val() <= 0){
							$input.val(1);
						}
						let data = {
							'wpneo_donate_amount_field' :$input.val(),
							'add-to-cart':<?php echo esc_attr(isset($get_prod_id) ? $get_prod_id : 0); ?>
						};
					      jQuery.ajax({
							type: 'post',
							url: wc_add_to_cart_params.ajax_url,
							data: data,
							complete: function (response) {
								//console.log("complete", response);
							},
							success: function (response) {
								//console.log("success", response);
								 $(document.body).trigger('update_checkout');
							},
						});
						//console.log($input.val());
					}
							 
				jQuery('#application_fee_amount').change(function(){
						let data = {
							'wpneo_donate_amount_field' :$input.val(),
							'add-to-cart':<?php echo esc_attr(isset($get_prod_id) ? $get_prod_id : 0); ?>
							//application_fee_amount:0
						};
					      jQuery.ajax({
							type: 'post',
							url: wc_add_to_cart_params.ajax_url,
							data: data,
							complete: function (response) {
								//console.log("complete", response);
							},
							success: function (response) {
								//console.log("success", response);
								 $(document.body).trigger('update_checkout');
							},
						});
				});
	jQuery('#anonymous_checkout_field #anonymous').change(function() {
				$('input[name="mark_name_anonymous"]').prop('checked', this.checked);
	});
	
	
});
</script>
<?php
	}
}
add_action( 'wp_footer', 'try_update_cart_form' );

add_action( 'woocommerce_cart_calculate_fees', 'woo_add_cart_fee' );
function woo_add_cart_fee( $cart ){
	 global $stripe_meta_obj;
	
     if ( ! $_POST || ( is_admin() && ! is_ajax() ) ) {
        return;
    }
	
    if ( isset( $_POST['post_data'] ) ) {
        parse_str( $_POST['post_data'], $post_data );
    } else {
        $post_data = $_POST; // fallback for final checkout (non-ajax)
    }
	
	

    if (isset($post_data['application_fee_amount'])) {
		function getPercentOfNumber($number, $percent){
    		return ($percent / 100) * $number;
		}
		//global $donation_fee;
		
        $donation_fee_amount = $post_data['application_fee_amount'];
		$actual_fee = getPercentOfNumber($post_data['donation_amount'], $donation_fee_amount);
		//$donation_fee = $donation_amount;
        WC()->cart->add_fee( 'Donation Percentage',  $actual_fee);
		//$post_data['donation_amount'] - $actual_fee;
		$stripe_meta_obj->donation_fee = $actual_fee;
		$stripe_meta_obj->donation_fee_percentage = $donation_fee_amount;
		$stripe_meta_obj->donation_subtotal = $post_data['donation_amount'];
		$stripe_meta_obj->donation_total = $post_data['donation_amount'] + $actual_fee;
    }

}

I’m using snippets and woocommerce checkout form
And for the message after payment andstripe metadata

function add_condolences($order_id){
	function IsNullOrEmptyString($str){
    return (!isset($str) || trim($str) === '');
}

	
	foreach( WC()->cart->get_cart() as $cart_item ){
    	$product_id = $cart_item['product_id'];
		$condolance_message = WC()->checkout->get_value('message');
		
		
		

		if($condolance_message){
				$comment_id = wp_insert_comment( array(
				'comment_post_ID'      => $product_id, // <=== The product ID where the review will show up
				'comment_author'       => WC()->checkout->get_value( 'anonymous' ) ? "Anonymous" : WC()->checkout->get_value( 'billing_first_name' ) . " " . WC()->checkout->get_value( 'billing_last_name' ),
				'comment_author_email' => WC()->checkout->get_value( 'anonymous' ) ? WC()->checkout->get_value('billing_email') : " ", // <== Important
				'comment_author_url'   => '',
				'comment_content'      => $condolance_message,
				'comment_type'         => '',
				'comment_parent'       => 0,
				'user_id'              => 0, // <== Important
				'comment_author_IP'    => '',
				'comment_agent'        => '',
				'comment_date'         => date('Y-m-d H:i:s'),
				'comment_approved'     => 1,
			) );
			update_comment_meta( $comment_id, 'rating', 0 );
		}
			
	}
}

//add_action( 'woocommerce_before_checkout_process', 'add_condolences');
add_action( 'woocommerce_payment_complete', 'add_condolences');

function wbdc_filter_wc_stripe_payment_metadata( $metadata, $order, $source ) {
	global $stripe_meta_obj;
	
    $order_data = $order->get_data();
	
	foreach( $order->get_items() as $item_id => $line_item ){
		$product = $line_item->get_product();
		$product_name = $product->get_name();
		$metadata['Campaign Name'] = $product_name;
	}
	
	$string_donation_fee_percentage = strval($stripe_meta_obj->donation_fee_percentage);
	
	$metadata[ __( 'Donation Fee Percentage', 'woocommerce-gateway-stripe' ) ] = $string_donation_fee_percentage . "%";
	$metadata[ __( 'Donation Fee', 'woocommerce-gateway-stripe' ) ] = number_format( $stripe_meta_obj->donation_fee, 2 );
	$metadata[ __( 'Donation Subtotal', 'woocommerce-gateway-stripe' ) ] = number_format($stripe_meta_obj->donation_subtotal, 2 );
	$metadata[ __( 'Donation Total', 'woocommerce-gateway-stripe' ) ] = number_format($stripe_meta_obj->donation_total, 2 ); 
//var_dump( $string_donation_fee_percentage . "%");

    return $metadata;
//	return false;
}
add_filter( 'wc_stripe_payment_metadata', 'wbdc_filter_wc_stripe_payment_metadata', 10, 3 );

Hi @rmiroslav

Glad to hear that the requirements are all solved!

Thanks for sharing the code. It will be helpful for anyone having a similar requirement.

I’ll mark this thread as resolved now. If you have any further questions, feel free to create a new thread.