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>
WooCommerce 透過 LINE 通知訊息以及訂單(WP LINE Notify)

WooCommerce 透過 LINE 通知訊息以及訂單(WP LINE Notify)

這次想要推薦大家用 WP LINE Notify ,在台灣、泰國、日本多數人都有LINE,並且在LINE上檢查訊息的時間遠遠大於檢查EMAIL,所以我們再用 WordPress 以及 WooCommerce 的時候,對於留言、評論、訂單通知,想要透過 LINE 來知道的話,可以使用 WP LINE Notify 外掛。

第一步,先安裝 WP LINE Notify

第二步,啟用 WP LINE Notify 並且設定

這一步驟需要先申請 LINE Notify ,https://notify-bot.line.me/my/ ,申請完畢後,把 token 抄起來,並且複製到 LINE Notify 權杖的欄位中,之後就可以使用了

參考資料

LINE Notify 官網

如何使用woocommerce template (模板)

如何使用woocommerce template (模板)

先來看一下 woocommerce 的樣板目錄結構(template structure)

位置在 /woocommerce/templates/ 我手上的是7.3版本,預設資料有

當你需要在自己的佈景主題 Theme 使用模板時候,只需要把它複製到你的佈景主題下,並且跟著下面的規範就可以了

將templates的字樣拿掉即可

例如:

content/plugins/woocommerce/templates/emails/admin-new-order.php

wp-content/themes/yourtheme/woocommerce/emails/admin-new-order.php

參考資料

Woocommerce Divi Shop的手機版本頁面,要改成兩欄顯示

Woocommerce Divi Shop的手機版本頁面,要改成兩欄顯示

如果你有需要想要讓 WordPress 的 Woocommerce 在手機版本的商店頁面中顯示兩欄的商品,那最好的方法要自訂 CSS ,我在這邊展示的是用 DIVI 佈景主題來做自訂CSS,如果你是別家的也是都一樣的方法。

只要把下面的CSS複製起來

@media only screen and (max-width:768px) {
    .woocommerce-page ul.products{
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
         flex-flow: row wrap;
    }
    .woocommerce-page ul.products li.product{
         flex: 0 0 50%;
         -webkit-box-flex: 0;
         padding: 10px;
    }
}

貼到你的佈景主題中的自訂CSS的位置上就可以了

WooCommerce : GA、GTM 啟用增強型電子商務- WordPress

WooCommerce : GA、GTM 啟用增強型電子商務- WordPress

電子商務、課程、遊戲型的網站,都有其特別要記錄的事件以及標籤,這時候一個一個自己慢慢的建立或是編寫的話,會需要耗費不少心力,還好用 WordPress 在處理我的部落格和商城,可以直接使用外掛 GTM4WP ,並且採用她預先已經定義好的 json 來快速建立電子商務流程或是表單的追蹤程式碼。

設定 WordPress 的 GTM4WP

首先安裝外掛 – GTM4WP

GTM4WP

設定 GTM 代碼 ID

將 woocommerce 追蹤功能啟用

啟用 woocommerce 加強型電子商務追蹤功能

設置 Google GTM

去到 https://tagmanager.google.com/ 設定一個新的 GA4 的代碼

GTM GA4 代碼設定說明

導入GTM4WP Google Analytics 4容器範本

下載範本 https://gtm4wp.com/gtm-containers/gtm4wp-ga4-container-elements-20200419.json

並且去到 「管理」 中的 「匯入容器」上傳範本

gtm4wp ga4 container 範本

過程中會創建預設好的事件以及代碼

預設事件以及代碼

完成新創建的電子商務事件代碼

  • 在前面你應該已經有了 “Google Analyitcs 4: GA4 configuration tag”
  • 打開 “GA4 – Event – Ecommerce events”
  • 打開 Configuration Tag drop down
  • 選擇 GA4 configuration tag
  • 存檔即可

別忘了要驗證是否成功

按下預覽按鈕

看到連線成功就可以了

參考資料

啟用 GA 加強型電子商務報表,追蹤 Woocommerce 銷售數據 | WebLai

為 WooCommerce 啟用 GA 加強型電子商務功能 | applemint Ltd.

谷歌分析4 / GA4 – 增強的電子商務跟蹤 – 如何設置?- 谷歌跟蹤管理器外掛程式為WordPress (gtm4wp.com)

[GA4] 建議事件 – Analytics (分析)說明 (google.com)

https://analytics.google.com/

https://tagmanager.google.com/