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

WooCommerce 加入商品一鍵結帳功能

by | 3 月 10, 2023 | PHP, woocommerce, wordpress, 程式

在台灣的消費習慣就是需要極致的快和簡單，所以我們就是要有能在 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 預設勾選配送到不同的地址
Woocommerce 點選圖片就可以直接加入購物車或是到結帳頁面
Woocommerce Divi Shop的手機版本頁面，要改成兩欄顯示

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

by | 2 月 14, 2023 | CSS, Divi, woocommerce, wordpress, 設計

如果你有需要想要讓 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的位置上就可以了

Divi Theme 繁體中文化