Select Page
WooCommerce 加入商品一鍵結帳功能

WooCommerce 加入商品一鍵結帳功能

在台灣的消費習慣就是需要極致的快和簡單,所以我們就是要有能在 WordPress WooCommerce 中一鍵結帳的功能,這功能其實有很多外掛可以達成,但為了一個按鈕加了一個外掛,總覺得用牛刀在殺雞,還是直接在 functions.php 中加入程式碼比較快,能改的東西也比較多。

woocommerce 商品 一鍵購物

修改 functions.php

找到佈景主題下的 functions.php 在後面加入以下的程式碼

add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 15 );
function addOneClickCheckoutBtn() {
    // 取得商品ID
    $current_product_id = get_the_ID();
    // 依據商品ID取得商品
    $product = wc_get_product( $current_product_id );
    // 取得結帳網址
    $checkout_url = WC()->cart->get_checkout_url();
    // 只在簡單商品中運行
    if( $product->is_type( 'simple' ) ){
        ?>
        <script>
            jQuery(function($) {
                   $(".custom-checkout-btn").on("click", function() 
                    {
                       $(this).attr("href", function() 
                        {
                            return this.href + '&quantity=' + $('input.qty').val();
                        });
                    });?>
            });
        </script>
        <style>
        .raiseup_one_click_checkout_btn {
            margin: 0px 1em !important;
        }
        </style>
        <?php
        echo '<a href="'.$checkout_url.'?add-to-cart='.$current_product_id.'" class="single_add_to_cart_button button raiseup_one_click_checkout_btn">直接結帳</a>';
    }
}
add_action( 'woocommerce_after_add_to_cart_button', 'addOneClickCheckoutBtn' );

修改位置、顏色 CSS 已符合你的商品頁面

程式碼中,有新增一個 CSS 的類別 raiseup_one_click_checkout_btn ,可以透過以下的程式碼去修正按鈕的顏色、字型大小

        <style>
        .raiseup_one_click_checkout_btn {
            margin: 0px 1em !important;
        }
        </style>
如何讓手機瀏覽 wordpress 的網頁時候,導到手機版本的頁面

如何讓手機瀏覽 wordpress 的網頁時候,導到手機版本的頁面

手機版本以及電腦版本的網頁共存的方法很多種,但總是要很多時候需要最佳化,當然現在流行的是採用AMP來處理手機頁面,每一種都有自己適用的場景,今天要介紹的是全手動自刻PHP程式碼處理的方法,透過 WP 內建的兩個函式來偵測使用者是否用手機看你的網頁,是的話就導引到手機專用的網頁上。

先準備好可以在你的頁面內直接寫PHP的外掛 Insert PHP Code Snippet

在外掛內搜尋 Insert PHP Code Snippet,如下圖打勾處

安裝完畢後,你可以在後台的主選單中找到 XYZ PHP Code,選擇 PHPCode Snippets,我們來寫一支很簡單的程式碼,當然你也可以用自己習慣的程式碼外掛處理

PHPCode Snippets

新增一筆程式碼,我把它命名為 checkMobile,裡面內容也很簡單,就是偵測到客戶用手機看,我們就導引到手機的頁面上

新增 PHP Code Snippet

利用 WP 內建的 wp_is_mobile()wp_redirect() 就可以達到想要的效果

<?php
if( wp_is_mobile())
{
	wp_redirect("https://rain.tips/phone/");
	exit;
}
wp checkmobile

寫完存檔後,就可以看到 Snippet Short Code 狀態是 Active ,把Short Code複製起來,並且貼到你的頁面或是文章中就可以用了

windows server iis 下的 wordpress web.config 設定

在 windows server 的 iis 下,預設情況下安裝 php 架構的 wordpress 總是會遇到很多的困難,像是如果遭遇到想要訪問 wordpress 目錄下的目錄資料,例如:https://rain.tips/uploads/,會跟你說找不到資料,原因是wordpress所有的入口要先透由 index.php 去做路由,解決方案則是用 web.config 去指定路由要透過 index.php 即可

請在web.config檔案中添加 rewrite rules

    <rewrite>
      <rules>
			<rule name="WordPress: https://yoururl.com" patternSyntax="Wildcard">
				<match url="*"/>
					<conditions>
						<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/>
						<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true"/>
					</conditions>
				<action type="Rewrite" url="index.php"/>
			</rule></rules>
    </rewrite>

最後會長成這樣子

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
			<rule name="WordPress: https://yoururl.com" patternSyntax="Wildcard">
				<match url="*"/>
					<conditions>
						<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/>
						<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true"/>
					</conditions>
				<action type="Rewrite" url="index.php"/>
			</rule></rules>
    </rewrite>
  </system.webServer>
</configuration>

同場加映

WordPress logout 登出的轉址設定

WordPress 想要自訂登出後導引到某一個頁面,可以採用下面的程式碼,並且放於 functions.php 中即可

// 登出轉址
add_action('wp_logout','auto_redirect_after_logout');
function auto_redirect_after_logout(){
  wp_safe_redirect( home_url() );
  exit;
}

其中 home_url() 是首頁,這段程式碼的意思是,當登出使用者後,導引到首頁

最完整的 woocommerce $order info 使用大全

在寫 woocommerce 的程式時候,最常使用到的就是 $order 這個參數了,每次都要用 Google 查找很不方便,這次把它整理並且記錄起來,當作簡易字典查找,就快速且簡單的多了,也謝謝 Rodolfo Melogli 大神分享了好用的文章。

// Get Order ID and Key
$order->get_id();
$order->get_order_key();
 
// Get Order Totals $0.00
$order->get_formatted_order_total();
$order->get_cart_tax();
$order->get_currency();
$order->get_discount_tax();
$order->get_discount_to_display();
$order->get_discount_total();
$order->get_fees();
$order->get_formatted_line_subtotal();
$order->get_shipping_tax();
$order->get_shipping_total();
$order->get_subtotal();
$order->get_subtotal_to_display();
$order->get_tax_location();
$order->get_tax_totals();
$order->get_taxes();
$order->get_total();
$order->get_total_discount();
$order->get_total_tax();
$order->get_total_refunded();
$order->get_total_tax_refunded();
$order->get_total_shipping_refunded();
$order->get_item_count_refunded();
$order->get_total_qty_refunded();
$order->get_qty_refunded_for_item();
$order->get_total_refunded_for_item();
$order->get_tax_refunded_for_item();
$order->get_total_tax_refunded_by_rate_id();
$order->get_remaining_refund_amount();
  
// Get and Loop Over Order Items
foreach ( $order->get_items() as $item_id => $item ) {
   $product_id = $item->get_product_id();
   $variation_id = $item->get_variation_id();
   $product = $item->get_product(); // see link above to get $product info
   $product_name = $item->get_name();
   $quantity = $item->get_quantity();
   $subtotal = $item->get_subtotal();
   $total = $item->get_total();
   $tax = $item->get_subtotal_tax();
   $tax_class = $item->get_tax_class();
   $tax_status = $item->get_tax_status();
   $allmeta = $item->get_meta_data();
   $somemeta = $item->get_meta( '_whatever', true );
   $item_type = $item->get_type(); // e.g. "line_item"
}
 
// Other Secondary Items Stuff
$order->get_items_key();
$order->get_items_tax_classes();
$order->get_item_count();
$order->get_item_total();
$order->get_downloadable_items();
$order->get_coupon_codes();
  
// Get Order Lines
$order->get_line_subtotal();
$order->get_line_tax();
$order->get_line_total();
  
// Get Order Shipping
$order->get_shipping_method();
$order->get_shipping_methods();
$order->get_shipping_to_display();
  
// Get Order Dates
$order->get_date_created();
$order->get_date_modified();
$order->get_date_completed();
$order->get_date_paid();
  
// Get Order User, Billing & Shipping Addresses
$order->get_customer_id();
$order->get_user_id();
$order->get_user();
$order->get_customer_ip_address();
$order->get_customer_user_agent();
$order->get_created_via();
$order->get_customer_note();
$order->get_address_prop();
$order->get_billing_first_name();
$order->get_billing_last_name();
$order->get_billing_company();
$order->get_billing_address_1();
$order->get_billing_address_2();
$order->get_billing_city();
$order->get_billing_state();
$order->get_billing_postcode();
$order->get_billing_country();
$order->get_billing_email();
$order->get_billing_phone();
$order->get_shipping_first_name();
$order->get_shipping_last_name();
$order->get_shipping_company();
$order->get_shipping_address_1();
$order->get_shipping_address_2();
$order->get_shipping_city();
$order->get_shipping_state();
$order->get_shipping_postcode();
$order->get_shipping_country();
$order->get_address();
$order->get_shipping_address_map_url();
$order->get_formatted_billing_full_name();
$order->get_formatted_shipping_full_name();
$order->get_formatted_billing_address();
$order->get_formatted_shipping_address();
  
// Get Order Payment Details
$order->get_payment_method();
$order->get_payment_method_title();
$order->get_transaction_id();
  
// Get Order URLs
$order->get_checkout_payment_url();
$order->get_checkout_order_received_url();
$order->get_cancel_order_url();
$order->get_cancel_order_url_raw();
$order->get_cancel_endpoint();
$order->get_view_order_url();
$order->get_edit_order_url();
  
// Get Order Status
$order->get_status();
 
// Get Thank You Page URL
$order->get_checkout_order_received_url();

參考資料

https://woocommerce.github.io/code-reference/