独立站结算页-WooCommerce实战

Table of Contents

提高结算的用户体验 / One Page Checkout
支付网关和结账流程

提高结算的用户体验 / One Page Checkout #

如果您希望减少购物车遗弃现象、提高转化率和增加收入，就必须认真关注WooCommerce的结账页面。

WooCommerce结账页面是什么以及它是如何运作的。然后，我们将引导您了解各种选项，您可以使用这些选项来通过插件、代码、主题等进行样式更改和利用，以优化转化率。

完全学习checkout原理和代码： https://kinsta.com/blog/woocommerce-checkout/

例如：怎样给checkout 加上小费用fee？

add_action('woocommerce_cart_calculate_fees', 
function() {
    if (is_admin() && !defined('DOING_AJAX')) {
    return;
    }
    WC()->cart->add_fee(__('Additional Charge', 'txtdomain'), 5);
    }
);

// checkout的保险费  3%
function wc_percentage_fee_add_checkout_field($checkout)
{
    // if(!isset($checkout->get_value('apply_percentage_fee'))){
    //     $checkout->set_value('apply_percentage_fee',1)
    // }
    woocommerce_form_field('apply_percentage_fee', array(
        'type' => 'checkbox',
        'class' => array('apply-percentage-fee form-row-wide'),
        'label' => __('3% Shipping Insurance Fee'),
        'required' => false,
        'default' => 1,
    ), $checkout->get_value('apply_percentage_fee'));
}

add_action('woocommerce_checkout_before_order_review', 'wc_percentage_fee_add_checkout_field', 10, 2);

// 订单里面也加上保险费 Update the order meta with field value
function wc_percentage_fee_update_order_meta($order_id)
{

    if (isset($_POST['apply_percentage_fee'])) {
        $apply_fee = isset($_POST['apply_percentage_fee']) ? true : false;
    } else {
        $post_data = array_values(explode('&', urldecode($_POST['post_data'])));
        $apply_fee = in_array('apply_percentage_fee=1', $post_data) ? true : false;
    }

    if ($apply_fee) {
        update_post_meta($order_id, 'apply_percentage_fee', 1);
    }
}

add_action('woocommerce_checkout_update_order_meta', 'wc_percentage_fee_update_order_meta');

/**
 * 结算页保费选中与取消，触发结算金额重新计算逻辑
 * @param $cart
 */
function wc_percentage_fee_apply_fee($cart)
{
    $apply_fee = false;
    if (is_admin() && !defined('DOING_AJAX')) {
        return;
    }
    if (isset($_POST['apply_percentage_fee'])) {
        $apply_fee = isset($_POST['apply_percentage_fee']) ? true : false;
    } elseif (isset($_POST['post_data'])) {
        $post_data = array_values(explode('&', urldecode($_POST['post_data'])));
        $apply_fee = in_array('apply_percentage_fee=1', $post_data) ? true : false;
    }

    if ($apply_fee) {
        $percentage = 3; // Set your desired percentage here
        $fee = $cart->get_subtotal() * ($percentage / 100);
        $cart->add_fee(__('Insurance Fee', 'woocommerce'), $fee, true, '');
    }
}

参考：https://quadlayers.com/add-fees-to-woocommerce-checkout/

例如：如何在WooCommerce结账页面添加产品图片？

add_filter( 'woocommerce_cart_item_name', 'quadlayers_product_image_checkout', 9999, 3 ); 
function 'quadlayers_product_image_checkout' ( $name, $cart_item, $cart_item_key ) {
    if ( ! is_checkout() ) 
        {return $name;}
    $product = $cart_item['data'];
    $thumbnail = $product->get_image( array( '50', '50' ), array( 'class' => 'alignleft' ) ); 
    /*Above you can change the thumbnail size by changing array values e.g. array(‘100’, ‘100’) and also change alignment to alignright*/
    return $thumbnail . $name;
}

参考：https://quadlayers.com/how-to-add-product-image-to-woocommerce-checkout/

例如：如何重新排序WooCommerce结账字段？

add_filter( 'woocommerce_checkout_fields', 'quadlayers_email_top' );
//重新排序 结算字段 array
function quadlayers_email_top( $checkout_fields ) {
    $checkout_fields['billing']['billing_email']['priority'] = 5;
    return $checkout_fields;
}

参考： https://quadlayers.com/how-to-reorder-woocommerce-checkout-fields/

Q: 如果改变异步checkout内容？

A: 改变$fragments ：

//异步checkout的请求信息： cart产品列表
function get_updated_order_product_list()
{
    ob_start();
    // Load the order review template
    wc_get_template('checkout/product-list.php');
    return ob_get_clean();
}
add_filter('woocommerce_update_order_review_fragments', 'update_extra_order_review_fragment', 10, 1);
function update_extra_order_review_fragment($fragments)
{
    $fragments['.woocommerce-checkout-review-product-list'] = get_updated_order_product_list();
     return $fragments;
}

模仿Shopify的结账页：

结账过程是任何在线交易的关键环节。这是客户决定是否完成购买或放弃购物车的关键时刻。Shopify的结账页面在电子商务行业中被广泛认为是最好的之一。并且有充分的理由。

最好的结账体验注重让整个过程尽可能简单、快速和可靠。Shopify做到了这一点。它采用清爽的用户友好型设计，采用两栏式布局。这很大程度上解释了为什么shopify样式结算页拥有最高的转化率和最低的购物车放弃率。