WooCommerce is a popular WordPress plugin that enables users to create an online store with ease. With WooCommerce code snippets, you can customize your website’s cart and checkout pages to provide a better user experience. However, customizing these pages can be challenging if you’re not familiar with the plugin’s codebase.

But In this blog, we will discuss 10 WooCommerce snippets that can help you customize your cart and checkout pages.
Before customizing Woocommerce checkout, I am assuming that you already have an E-commerce Store if you still don’t have one, this blog might helpful for you.

  • I. Overview of WooCommerce
  • 2. Why customize the cart and checkout pages?
  • 3. Top 10 woocommerce custom code snippets
  • 4. Conclusion

2:Why Customize the cart and Checkout Pages

Woocommerce checkout page comes with default fields.I f you want to get more information about customer for billing, you can add more custom fields by using following woocommerce Code snippets.You can also remove some fields which may be irrelevant for you.

  • You can also do cross-selling by customizing Checkout pages. You can show more relevant products related to the main product.
  • Well-designed and simple custom carts make it easy for customers to purchase product. You can make checkout pages customer friendly by using code snippets.
  • A customized cart and checkout process can also help increase conversions and sales. By removing irrelevant fields and optimizing the design layout you can make it easy for users to make shopping without any hustle.

Top 10 Woocommerce Code Snippets

1:customizing the Checkout Page Title

By default, WooCommerce displays the title “Checkout” on the checkout page. If you want to change the title to something else, you can use the following snippet:

add_filter( 'woocommerce_checkout_page_title', 'change_checkout_title' );
function change_checkout_title( $title ) {
    $title = 'New Title';
    return $title;
}

2:Adding Custom Fields to the Checkout Page

If you need to collect additional information from customers during checkout, you can add custom fields to the checkout page. For example, you may want to collect a customer’s phone number or date of birth.
Here is a code snippet that shows how to add a phone number field:

add_filter( 'woocommerce_checkout_fields' , 'add_phone_field_checkout' );
function add_phone_field_checkout( $fields ) {
    $fields['billing']['billing_phone'] = array(
        'label'       => __('Phone', 'woocommerce'),
        'placeholder' => _x('Phone', 'placeholder', 'woocommerce'),
        'required'    => true,
        'class'       => array('form-row-wide'),
        'clear'       => true
    );
    return $fields;
}

3:Customizing the Cart Page

You can use this snippet to remove any other elements you don’t want on the cart page as well.

remove_action( 'woocommerce_proceed_to_checkout', 'woocommerce_button_proceed_to_checkout', 20 );

4:Modifying the Order of Checkout Fields

You can change the order of pre-deafult fields of checkout according to your requirement.
In this example, the checkout fields are ordered by billing first name, last name, company, country, address 1, address 2, city, state, postcode, email, and phone number. You can change this order according to your needs.

add_filter("woocommerce_checkout_fields", "order_fields");

function order_fields($fields) {
    $order = array(
        "billing_first_name",
        "billing_last_name",
        "billing_company",
        "billing_country",
        "billing_address_1",
        "billing_address_2",
        "billing_city",
        "billing_state",
        "billing_postcode",
        "billing_email",
        "billing_phone"
    );
    foreach($order as $field)
    {
        $ordered_fields[$field] = $fields["billing"][$field];
    }
    $fields["billing"] = $ordered_fields;
    return $fields;
}

5:Customizing the Order Received Page

The order received page is where customers are redirected after completing a purchase. You can customize this page to include additional information or branding. Here is an example snippet that adds a custom message to the order received page:

add_filter( 'woocommerce_thankyou_order_received_text', 'change_thankyou_text' );
function change_thankyou_text( $thankyou_text ) {
    $thankyou_text = 'New Thank You Text'; // Replace "New Thank You Text" with your desired text
    return $thankyou_text;
}

6:Removing the “Order Notes” Field on the Checkout Page

add_filter( 'woocommerce_checkout_fields' , 'remove_order_notes' );
function remove_order_notes( $fields ) {
    unset($fields['order']['order_comments']);
    return $fields;
}

7:Changing the Text on the “Place Order” Button

By default, the “Place Order” button on the checkout page says “Place Order”. You can customize this text using this code snippet:

add_filter( 'woocommerce_order_button_text', 'custom_order_button_text' );
function custom_order_button_text( $button_text ) {
    return __( 'Custom Text', 'woocommerce' );
}

Replace “Custom Text” with the desired text you want to appear on the button.

8:Hiding the Coupon Field on the Cart and Checkout Pages

If you don’t want to offer coupons on your store, you can use this code snippet to hide the coupon field on the cart and checkout pages:

add_filter( 'woocommerce_coupons_enabled', '__return_false' );

9:Changing the Font Size of the Checkout Fields

add_filter( 'woocommerce_checkout_fields', 'custom_checkout_fields_css' );
function custom_checkout_fields_css( $fields ) {
    $fields['billing']['billing_first_name']['class'][0] = 'form-row-wide custom-class';
    $fields['billing']['billing_last_name']['class'][0] = 'form-row-wide custom-class';
    $fields['billing']['billing_email']['class'][0] = 'form-row-wide custom-class';
    foreach( $fields as &$fieldset ) {
        foreach( $fieldset as &$field ) {
            $field['input_class'][] = 'my-input-class';
        }
    }
    return $fields;
}

You can change “custom-class” to any class you want to use, and adjust the font size accordingly.

10:Remove last name :

you can use the following code snippet to remove the last name field from the checkout page:

add_filter( 'woocommerce_checkout_fields', 'custom_checkout_fields_css' );
function custom_checkout_fields_css( $fields ) {
    $fields['billing']['billing_first_name']['class'][0] = 'form-row-wide custom-class';
    $fields['billing']['billing_last_name']['class'][0] = 'form-row-wide custom-class';
    $fields['billing']['billing_email']['class'][0] = 'form-row-wide custom-class';
    foreach( $fields as &$fieldset ) {
        foreach( $fieldset as &$field ) {
            $field['input_class'][] = 'my-input-class';
        }
    }
    return $fields;
}

Conclusion:You will read in the blog about the importance of woocommerce checkout customiztion and how it can improve your sales conversion.You will also get 10 Examples of code snippets which you can use to customize woocommerce checkout page and customization.You can also find more useful code snippets in this blog post.
If you have any confusion ,let me know.Thanks!

Categorized in: