How to Transform the WooCommerce Shopping Flow into a Wishlist Flow without a Plugin

on in Blog, WordPress
Last modified on

WooCommerce Wishlist

WooCommerce is highly customizable, allowing developers to adapt its default behaviour to fit various business needs. In this tutorial, we’ll guide you step-by-step on how to change the default shopping and checkout flow into a wishlist-based flow. This includes renaming cart-related terminology, modifying checkout processes, and customizing button behaviours.

Table of Contents

Overview

The changes in this tutorial will:

  • Replace “Cart” and “Checkout” terminology with “Wishlist” and “Send Wishlist”.
  • Update buttons and links to reflect the wishlist concept.
  • Simplify the checkout process by removing unnecessary fields.
  • Customize messages and labels throughout the user experience.

Code Breakdown and Implementation

1. Modify the “Proceed to Checkout” Button

Replace the default “Proceed to Checkout” button with a custom one that aligns with the wishlist concept.

// Remove the default checkout button
remove_action('woocommerce_proceed_to_checkout', 'woocommerce_button_proceed_to_checkout', 20);

// Add a custom checkout button
add_action('woocommerce_proceed_to_checkout', 'cfg_woo_custom_checkout_button_text', 20);

function cfg_woo_custom_checkout_button_text() {
    $checkout_url = WC()->cart->get_checkout_url(); ?>

    <a href="<?php echo $checkout_url; ?>" class="checkout-button button alt wc-forward">
        <?php _e('Send Order List', 'woocommerce'); ?>
    </a>
    <?php
}

2. Update Cart Totals and Empty Cart Message

Change terminology related to the cart, such as “No products in the cart.”

function change_no_product_text($translated) {
    $translated = str_ireplace('No products in the cart.', 'No products in the Order List.', $translated);
    return $translated;
}
add_filter('gettext', 'change_no_product_text');

3. Customize Mini-Cart Buttons

Replace the default mini-cart buttons with custom ones that reflect the wishlist flow.

add_action('woocommerce_widget_shopping_cart_buttons', function() {
    // Remove default buttons
    remove_action('woocommerce_widget_shopping_cart_buttons', 'woocommerce_widget_shopping_cart_button_view_cart', 10);
    remove_action('woocommerce_widget_shopping_cart_buttons', 'woocommerce_widget_shopping_cart_proceed_to_checkout', 20);

    // Add custom buttons
    add_action('woocommerce_widget_shopping_cart_buttons', 'cfg_widget_shopping_cart_button_view_cart', 10);
    add_action('woocommerce_widget_shopping_cart_buttons', 'cfg_widget_shopping_cart_proceed_to_checkout', 20);
}, 1);

// Custom "View Wishlist" button
function cfg_widget_shopping_cart_button_view_cart() {
    $custom_link = home_url('/wishlist/');
    echo '<a href="' . esc_url($custom_link) . '" class="button wc-forward">' . esc_html__('View Order List', 'woocommerce') . '</a>';
}

// Custom "Send Wishlist" button
function cfg_widget_shopping_cart_proceed_to_checkout() {
    $custom_link = home_url('/checkout/');
    echo '<a href="' . esc_url($custom_link) . '" class="button checkout wc-forward">' . esc_html__('Send Order List', 'woocommerce') . '</a>';
}

4. Simplify the Checkout Form

Remove unnecessary fields from the checkout form to streamline the process.

You can find all the checkout fields here.

function cfg_remove_billing_fields_from_checkout($fields) {
    unset($fields['billing_company']);
    unset($fields['billing_address_1']);
    unset($fields['billing_address_2']);
    unset($fields['billing_state']);
    unset($fields['billing_city']);
    unset($fields['billing_phone']);
    unset($fields['billing_postcode']);
    unset($fields['billing_country']);

    return $fields;
}
add_filter('woocommerce_checkout_fields', 'cfg_remove_billing_fields_from_checkout');

5. Update Labels and Translations

Modify various labels to reflect the wishlist flow.

function cfg_wc_billing_field_strings($translated_text, $text, $domain) {
    switch ($translated_text) {
        case 'Billing details':
            $translated_text = 'Contact Information';
            break;
        case 'Update cart':
            if (is_cart()) {
                $translated_text = 'Update Wishlist';
            }
            break;
    }
    return $translated_text;
}
add_filter('gettext', 'cfg_wc_billing_field_strings', 20, 3);

// General translation updates
function cfg_custom_wc_translations($translated) {
    $text = array(
        'Your order' => 'Your Wishlist',
        'Order notes' => 'Wishlist notes',
        'Place order' => 'Place Wishlist',
        'Cart' => 'Wishlist',
        'cart' => 'wishlist',
        'Order details' => 'Wishlist',
    );
    $translated = str_ireplace(array_keys($text), $text, $translated);
    return $translated;
}
add_filter('gettext', 'cfg_custom_wc_translations', 20);

6. Customize the “Thank You” Page

Replace the default thank-you page message.

function cfg_thankyou() {
    $added_text = '<p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received">
        Thank you. Your order has been received. We will be in contact shortly.
    </p>';

    return $added_text;
}
add_filter('woocommerce_thankyou_order_received_text', 'cfg_thankyou');

7. Modify the Add-to-Cart Button Text

Change the “Add to Cart” button text to “Add to Wishlist”.

function cfg_woocommerce_custom_product_add_to_cart_text_wishlist() {
    return 'Add to Wishlist';
}
add_filter('woocommerce_product_add_to_cart_text', 'cfg_woocommerce_custom_product_add_to_cart_text_wishlist');

function cfg_woocommerce_custom_single_add_to_cart_wishlist_single() {
    return 'Add to Wishlist';
}
add_filter('woocommerce_product_single_add_to_cart_text', 'cfg_woocommerce_custom_single_add_to_cart_wishlist_single');

8. Additional Customizations

  • Remove related products:
remove_action('woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20);
  • Auto-check the “Create an Account” option during checkout:
add_filter('woocommerce_create_account_default_checked', function ($checked) {
    return true;
});
  • Change the “Order Received” page title:
function cfg_title_order_received($title, $id) {
    if (function_exists('is_order_received_page') && is_order_received_page() && get_the_ID() === $id) {
        $title = 'Your wishlist has been received.';
    }
    return $title;
}
add_filter('the_title', 'cfg_title_order_received', 10, 2);

By implementing the steps above, you can fully transform WooCommerce’s shopping flow into a wishlist flow. This approach can be ideal for businesses focused on quote requests or personalized orders. Tailor the changes to fit your specific needs and provide a seamless experience for your users.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *