
<style>
.pro-1-2 {
	padding: 20px 40px;
}
</style>
<div class="box-checkout-nakin">

<div class="box-checkout-1400-1 noosh-19 noosh-191">

<i class="fi fi-rr-shopping-bag" style="font-size: 18px;"></i></br>
سبد خرید</div>
<div class="box-checkout-1400-1 noosh-20 noosh-201">
<i class="mdi mdi-clipboard-text-outline"></i>
</br>
جزئیات پرداخت
</div>

<div class="box-checkout-1400-1">
<div class="mahvine">
<i class="mdi mdi-check-decagram"></i>
</br>
تکمیل سفارش</div>
</div>
<div class="div-bars-checkout-1400"></div>
</div>

<?php
/**
 * Checkout Form
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/checkout/form-checkout.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see 	    https://docs.woocommerce.com/document/template-structure/
 * @author 		WooThemes
 * @package 	WooCommerce/Templates
 * @version     9.4.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

wc_print_notices();

do_action( 'woocommerce_before_checkout_form', $checkout );

// If checkout registration is disabled and not logged in, the user cannot checkout
if ( ! $checkout->is_registration_enabled() && $checkout->is_registration_required() && ! is_user_logged_in() ) {
	echo apply_filters( 'woocommerce_checkout_must_be_logged_in_message', esc_html__( 'You must be logged in to checkout.', 'woocommerce' ) );
	return;
}

?>

	<form name="checkout" method="post" class="checkout woocommerce-checkout row checkoutnew-1" action="<?php echo esc_url( wc_get_checkout_url() ); ?>" enctype="multipart/form-data">

		<?php if ( $checkout->get_checkout_fields() ) : ?>

			<?php do_action( 'woocommerce_checkout_before_customer_details' ); ?>

			<div class="woocommerce-checkout-main" id="customer_details">

                <div class="inner-box">
                    <div class="first-row">
		                <?php do_action( 'woocommerce_checkout_billing' ); ?>
                    </div>

                    <div class="second-row">
		                <?php do_action( 'woocommerce_checkout_shipping' ); ?>
                    </div>
                </div>

			</div>

			<?php do_action( 'woocommerce_checkout_after_customer_details' ); ?>

		<?php endif; ?>

		<div id="navbar" class="woocommerce-checkout-side sticky-sidebar">

			<div class="inner-box">

                <h3 id="order_review_heading"><?php esc_html_e( 'Your order', 'woocommerce' ); ?></h3>

				<?php do_action( 'woocommerce_checkout_before_order_review' ); ?>

                <div id="order_review" class="woocommerce-checkout-review-order">
					<?php do_action( 'woocommerce_checkout_order_review' ); ?>
                </div>

				<?php do_action( 'woocommerce_checkout_after_order_review' ); ?>
            </div>
		</div>

	</form>

<?php do_action( 'woocommerce_after_checkout_form', $checkout ); ?>

<script>
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};

// Get the navbar
var navbar = document.getElementById("navbar");

// Get the offset position of the navbar
var sticky = navbar.offsetTop;

// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
} 
</script>