What is a Checkout page?

The checkout page gives customers the opportunity to enter payment details and complete their orders in the e-commerce store. Basically, we use the same checkout page for all products in an e-commerce store most of the time. But in some cases, we need to have a separate checkout page for some special products. In such cases, we need to create multiple checkout pages in our WordPress.

Let’s now see how to create multiple checkout pages on a conditional basis without using any plugins:

Step1: Create a Custom Field group and enable this for Products

Create a custom field group using the ‘Custom Fields‘ plugin, with a suitable name, and enable its location to Products.

Step2: Activate custom field on special product

Now go to your product for which you need a separate checkout page and enable/check the box of custom field on your special product.

Step3: Write a Function to find a Special product:

Now in your functions.php file, write a function to find your special product. so that using this function, you can call your special product anywhere and store it into a variable.

//find special product
function is_special_product( ) {
    $flag = false;
    if ( ! WC()->cart->is_empty() ) {
    foreach(WC()->cart->get_cart() as $cart_item ) {
    $pro_id = $cart_item['product_id'];
    $different_checkout_layout = ---- ;
    if($different_checkout_layout == 1){
        ----;
    }
    }
    }
return $flag;
}

 

Step4: Write a conditional layout code in form-checkout.php

Now in your form-checkout.php add your conditional coding that is only applicable to your special product’s checkout page. Call and store the above function into a global variable and with the help of the IF condition, add all your CSS and PHP codes.

$is_special_product = is_special_product();

if($is_special_product){
Add your HTML code blocks here
}

Step5: Add your custom CSS styles to functions.php

Now, you will create a function with all custom CSS styles and call this function only for the special product with IF condition.

add_action('wp_head', 'my_custom_styles', 100);
function my_custom_styles(){
    if ( is_checkout() && is_special_product()) {
  
        CSS styles goes here with style tag

    }
}

 

Finally, find here the custom checkout page we built for custom/special products: