如何在 WooCommerce 中添加願望清單

已發表: 2021-04-22

如何在 WooCommerce 中添加願望清單你想在 WooCommerce 中添加願望清單嗎？重要的是要注意 WooCommerce 沒有願望清單功能。它允許用戶標記某些產品，將它們添加到列表中以供將來參考。

亞馬遜等熱門商店允許在線購物者創建多個願望清單。

如何在 WooCommerce 中添加願望清單

在本教程中，我們將為 WooCommerce 創建願望清單功能。我們將使用 AJAX、WordPress REST API 和 SVG 圖形。

在帖子結束時，您將能夠創建一個願望清單插件。

讓我們看看如何實現這一目標。

創建願望清單插件

首先，我們需要創建插件結構。

創建一個名為“wishlist”的文件夾和一個同名的 PHP 文件。

之後，將以下代碼段添加到 PHP 文件中：


/*

Plugin Name: Woocommerce wishlist

Description: Ajax wishlist for WooCommerce

Author: Njengah

Version: 1.0

*/

if ( ! defined( 'ABSPATH' ) ) {

exit; // Exit if accessed directly

}

添加結構

現在是添加功能的時候了。這是我們要做的：

使用 WooCommerce 鉤子將願望清單切換到循環和單個頁面中的產品
創建願望清單表短代碼以保存添加到願望清單的產品
在用戶個人資料中創建願望清單自定義選項

請務必注意，所有插件代碼都將進入插件的 init 操作中。

在開始之前，我們需要確保 WooCommerce 插件處於活動狀態。在插件詳細信息後添加以下代碼：


add_action('init','plugin_init');

function plugin_init(){

if (class_exists("Woocommerce")) {

// Plugin code starts here

}

}

下一步是通過將以下代碼添加到主插件文件中來將我們的插件腳本和样式排入隊列：

function wishlist_plugin_scripts_styles(){
    wp_enqueue_style( 'wishlist-style', plugins_url('/css/style.css', __FILE__ ), array(), '1.0.0' );
    wp_enqueue_script( 'wishlist-main', plugins_url('/js/main.js', __FILE__ ), array('jquery'), '', true);
    wp_localize_script(
        'main',
        'opt',
        array(
            'ajaxUrl'        => admin_url('admin-ajax.php'),
            'ajaxPost'       => admin_url('admin-post.php'),
            'restUrl'        => rest_url('wp/v2/product'),
            'shopName'       => sanitize_title_with_dashes(sanitize_title_with_dashes(get_bloginfo('name'))),
            'inWishlist'     => esc_html__("Already in wishlist","text-domain"),
            'removeWishlist' => esc_html__("Remove from wishlist","text-domain"),
            'buttonText'     => esc_html__("Details","text-domain"),
            'error'          => esc_html__("Something went wrong, could not add to wishlist","text-domain"),
            'noWishlist'     => esc_html__("No wishlist found","text-domain"),
        )
    );
}
add_action( 'wp_enqueue_scripts', 'wishlist_plugin_scripts_styles' );

在這部分代碼中，我們將主 style.css 文件和插件的 main.js 文件排入隊列。我們還向 main.js 文件傳遞了一些參數以供使用：

ajaxUrl
ajaxPost
休息網址
店鋪名稱

添加代碼後，創建一個 css 和 js 文件夾，並將相應的文件放入這些文件夾中：css 文件夾中的 style.css 和 js 文件夾中的 main.js。

掛鉤願望清單 Toggle

要掛鉤Wishlist Toggle ，請在 init 操作中添加以下代碼：


// Add wishlist to product
add_action('woocommerce_before_shop_loop_item_title','wishlist_toggle',15);
add_action('woocommerce_single_product_summary','wishlist_toggle',25);
function wishlist_toggle(){
     global $product;
    echo '<span class="wishlist-title">'.esc_attr__("Add to wishlist","text-domain").'</span><a class="wishlist-toggle" data-product="'.esc_attr($product->get_id()).'" href="#" title="'.esc_attr__("Add to wishlist","text-domain").'">'.file_get_contents(plugins_url( 'images/icon.svg', __FILE__ )).'</a>';
}

上面的代碼為循環中的每個產品和每個產品佈局添加了一個願望清單切換。我們使用了 woocommerce_before_shop_loop_item_title 和 woocommerce_single_product_summary 鉤子。

添加 SVG 圖標

下一步是添加 SVG 圖標。

在插件文件夾中創建一個 images 文件夾並將以下 icon.svg 放入其中：


<svg viewBox="0 0 471.701 471.701">
    <path class="heart" d="M433.601,67.001c-24.7-24.7-57.4-38.2-92.3-38.2s-67.7,13.6-92.4,38.3l-12.9,12.9l-13.1-13.1
            c-24.7-24.7-57.6-38.4-92.5-38.4c-34.8,0-67.6,13.6-92.2,38.2c-24.7,24.7-38.3,57.5-38.2,92.4c0,34.9,13.7,67.6,38.4,92.3
            l187.8,187.8c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-3.9l188.2-187.5c24.7-24.7,38.3-57.5,38.3-92.4
            C471.801,124.501,458.301,91.701,433.601,67.001z M414.401,232.701l-178.7,178l-178.3-178.3c-19.6-19.6-30.4-45.6-30.4-73.3
            s10.7-53.7,30.3-73.2c19.5-19.5,45.5-30.3,73.1-30.3c27.7,0,53.8,10.8,73.4,30.4l22.6,22.6c5.3,5.3,13.8,5.3,19.1,0l22.4-22.4
            c19.6-19.6,45.7-30.4,73.3-30.4c27.6,0,53.6,10.8,73.2,30.3c19.6,19.6,30.3,45.6,30.3,73.3
            C444.801,187.101,434.001,213.101,414.401,232.701z"/>
    <g class="loading">
        <path d="M409.6,0c-9.426,0-17.067,7.641-17.067,17.067v62.344C304.667-5.656,164.478-3.386,79.411,84.479
            c-40.09,41.409-62.455,96.818-62.344,154.454c0,9.426,7.641,17.067,17.067,17.067S51.2,248.359,51.2,238.933
            c0.021-103.682,84.088-187.717,187.771-187.696c52.657,0.01,102.888,22.135,138.442,60.976l-75.605,25.207
            c-8.954,2.979-13.799,12.652-10.82,21.606s12.652,13.799,21.606,10.82l102.4-34.133c6.99-2.328,11.697-8.88,11.674-16.247v-102.4
            C426.667,7.641,419.026,0,409.6,0z"/>
        <path d="M443.733,221.867c-9.426,0-17.067,7.641-17.067,17.067c-0.021,103.682-84.088,187.717-187.771,187.696
            c-52.657-0.01-102.888-22.135-138.442-60.976l75.605-25.207c8.954-2.979,13.799-12.652,10.82-21.606
            c-2.979-8.954-12.652-13.799-21.606-10.82l-102.4,34.133c-6.99,2.328-11.697,8.88-11.674,16.247v102.4
            c0,9.426,7.641,17.067,17.067,17.067s17.067-7.641,17.067-17.067v-62.345c87.866,85.067,228.056,82.798,313.122-5.068
            c40.09-41.409,62.455-96.818,62.344-154.454C460.8,229.508,453.159,221.867,443.733,221.867z"/>
    </g>
    <g class="check">
        <path d="M238.933,0C106.974,0,0,106.974,0,238.933s106.974,238.933,238.933,238.933s238.933-106.974,238.933-238.933
            C477.726,107.033,370.834,0.141,238.933,0z M238.933,443.733c-113.108,0-204.8-91.692-204.8-204.8s91.692-204.8,204.8-204.8
            s204.8,91.692,204.8,204.8C443.611,351.991,351.991,443.611,238.933,443.733z"/>
        <path d="M370.046,141.534c-6.614-6.388-17.099-6.388-23.712,0v0L187.733,300.134l-56.201-56.201
            c-6.548-6.78-17.353-6.967-24.132-0.419c-6.78,6.548-6.967,17.353-0.419,24.132c0.137,0.142,0.277,0.282,0.419,0.419
            l68.267,68.267c6.664,6.663,17.468,6.663,24.132,0l170.667-170.667C377.014,158.886,376.826,148.082,370.046,141.534z"/>
    </g>
</svg>

SVG 動畫具有三種狀態：

默認值：心臟路徑
過程：加載組（g標籤）
結束：檢查組（g標籤）

要設置圖標樣式，請打開 style.css 文件並粘貼以下代碼：


.wishlist-toggle {

display: block;

position: absolute;

top: 16px;

left: 16px;

z-index: 5;

width: 24px;

height: 24px;

outline: none;

border:none;

}

.wishlist-title {

display: none;

}

.entry-summary .wishlist-toggle {

position: relative;

top: 0;

left: 0;

display: inline-block;

vertical-align: middle;

margin-bottom: 8px;

}

.entry-summary .wishlist-title {

display: inline-block;

vertical-align: middle;

margin-right: 8px;

margin-bottom: 8px;

}

.wishlist-toggle:focus {

outline: none;

border:none;

}

.wishlist-toggle svg {

fill:#bdbdbd;

transition: all 200ms ease-out;

}

.wishlist-toggle:hover svg,

.wishlist-toggle.active svg {

fill:#000000;

}

.wishlist-toggle svg .loading,

.wishlist-toggle svg .check {

opacity: 0;

}

.wishlist-toggle.active svg .check {

opacity: 1;

}

.wishlist-toggle.active svg .heart {

opacity: 0;

}

.wishlist-toggle.loading svg .loading,

.wishlist-table.loading:before {

animation:loading 500ms 0ms infinite normal linear;

transform-origin: center;

opacity: 1;

}

.wishlist-toggle.loading svg .heart {

opacity:0;

}

@keyframes loading {

from {transform: rotate(0deg);}

to {transform: rotate(360deg);}

}

我們已經展示了 SVG 的核心路徑。當用戶點擊它時，我們將隱藏心臟路徑並顯示加載路徑。

加載後，我們將顯示該產品已成功添加到願望清單的複選標記。

創建願望清單表簡碼

現在我們需要創建Wishlist 表短代碼。您可以將此短代碼添加到任何頁面，願望清單項目將出現在其中。

我們將通過在 init 插件操作中添加以下代碼來做到這一點：

// Wishlist table shortcode
add_shortcode('wishlist', 'wishlist');
function wishlist( $atts, $content = null ) {
    extract(shortcode_atts(array(), $atts));
     return '<table class="wishlist-table loading">
                <tr>
                    <th><!-- Left for image --></th>
                    <th>'.esc_html__("Name","text-domain").'</th>
                    <th>'.esc_html__("Price","text-domain").'</th>
                    <th>'.esc_html__("Stock","text-domain").'</th>
                    <th><!-- Left for button --></th>
                </tr>
            </table>';
 }

之後，我們必須創建一個願望清單頁面。

在儀表板中，創建一個名為“Wishlist”的頁面並將 [wishlist] 短代碼放入其中。

如果您打開心願單頁面，您將看到一個空表。

下一步是設置願望清單項目的樣式。為此，請打開 style.css 並添加以下代碼：

.wishlist-table {

width:100%;

position: relative;

}

.wishlist-table.loading:after {

display: block;

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

content: "";

background: #ffffff;

opacity: 0.5;

z-index: 5;

}

.wishlist-table.loading:before {

display: block;

width: 24px;

height: 24px;

position: absolute;

top: 50%;

left: 50%;

margin-top:-12px;

margin-left:-12px;

content: "";

background-image: url('../images/loading.svg');

background-repeat: no-repeat;

background-size: 100%;

z-index: 6;

}

.wishlist-table td {

position: relative;

}

.wishlist-table a.details {

padding:4px 16px;

background: #000000;

color: #ffffff;

text-align: center;

border:none !important

}

.wishlist-table a.wishlist-remove {

display: block;

width: 24px;

height: 24px;

position: absolute;

top: 50%;

left: 50%;

margin-top:-12px;

margin-left:-12px;

background-image: url('../images/remove.svg');

background-repeat: no-repeat;

background-size: 100%;

z-index: 6;

border:none;

opacity:0;

}

.wishlist-table td:hover &gt; a.wishlist-remove {

opacity:1;

}

然後，將 loading.svg 圖像添加到 images 文件夾：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 471.701 471.701">
    <path d="M409.6,0c-9.426,0-17.067,7.641-17.067,17.067v62.344C304.667-5.656,164.478-3.386,79.411,84.479
        c-40.09,41.409-62.455,96.818-62.344,154.454c0,9.426,7.641,17.067,17.067,17.067S51.2,248.359,51.2,238.933
        c0.021-103.682,84.088-187.717,187.771-187.696c52.657,0.01,102.888,22.135,138.442,60.976l-75.605,25.207
        c-8.954,2.979-13.799,12.652-10.82,21.606s12.652,13.799,21.606,10.82l102.4-34.133c6.99-2.328,11.697-8.88,11.674-16.247v-102.4
        C426.667,7.641,419.026,0,409.6,0z"/>
    <path d="M443.733,221.867c-9.426,0-17.067,7.641-17.067,17.067c-0.021,103.682-84.088,187.717-187.771,187.696
        c-52.657-0.01-102.888-22.135-138.442-60.976l75.605-25.207c8.954-2.979,13.799-12.652,10.82-21.606
        c-2.979-8.954-12.652-13.799-21.606-10.82l-102.4,34.133c-6.99,2.328-11.697,8.88-11.674,16.247v102.4
        c0,9.426,7.641,17.067,17.067,17.067s17.067-7.641,17.067-17.067v-62.345c87.866,85.067,228.056,82.798,313.122-5.068
        c40.09-41.409,62.455-96.818,62.344-154.454C460.8,229.508,453.159,221.867,443.733,221.867z"/>
</svg>

用戶配置文件中的願望清單自定義選項

將以下代碼添加到 init 操作：

// Wishlist option in the user profile
add_action( 'show_user_profile', 'wishlist_user_profile_field' );
add_action( 'edit_user_profile', 'wishlist_user_profile_field' );
function wishlist_user_profile_field( $user ) { ?>
    <table class="form-table wishlist-data">
        <tr>
            <th><?php echo esc_attr__("Wishlist","text-domain"); ?></th>
            <td>
                <input type="text" name="wishlist" id="wishlist" value="<?php echo esc_attr( get_the_author_meta( 'wishlist', $user->ID ) ); ?>" class="regular-text" />
            </td>
        </tr>
    </table>
<?php }
 add_action( 'personal_options_update', 'save_wishlist_user_profile_field' );
add_action( 'edit_user_profile_update', 'save_wishlist_user_profile_field' );
function save_wishlist_user_profile_field( $user_id ) {
    if ( !current_user_can( 'edit_user', $user_id ) ) {
        return false;
    }
    update_user_meta( $user_id, 'wishlist', $_POST['wishlist'] );
}

給它供電

現在我們已經添加了重要的部分，我們準備打開它。

打開 main.js 文件並將以下代碼放入其中：

(function($){

"use strict";

})(jQuery);

下一步是收集所需的數據並創建一些變量：

var shopName   = opt.shopName+'-wishlist',

inWishlist = opt.inWishlist,

restUrl    = opt.restUrl,

wishlist   = new Array,

ls         = sessionStorage.getItem(shopName),

loggedIn   = ($('body').hasClass('logged-in')) ? true : false,

userData   = '';

如果用戶已登錄：

使用 AJAX 獲取當前用戶數據
如果成功更新願望清單
突出顯示願望清單項目
刪除會話/本地存儲
如果失敗，則在控制台中為開發人員顯示錯誤消息

if(loggedIn) {
    // Fetch current user data
    $.ajax({
        type: 'POST',
        url: opt.ajaxUrl,
        data: {
            'action' : 'fetch_user_data',
            'dataType': 'json'
        },
        success:function(data) {
            userData = JSON.parse(data);
            if (typeof(userData['wishlist']) != 'undefined' && userData['wishlist'] != null && userData['wishlist'] != "") {
                 var userWishlist = userData['wishlist'];
                userWishlist = userWishlist.split(',');
                 if (wishlist.length) {
                    wishlist =  wishlist.concat(userWishlist);
                     $.ajax({
                        type: 'POST',
                        url:opt.ajaxPost,
                        data:{
                            action:'user_wishlist_update',
                            user_id :userData['user_id'],
                            wishlist :wishlist.join(','),
                        }
                    });
                 } else {
                    wishlist =  userWishlist;
                }
                wishlist = wishlist.unique();
                 highlightWishlist(wishlist,inWishlist);
                sessionStorage.removeItem(shopName);
             } else {
                if (typeof(ls) != 'undefined' && ls != null) {
                    ls = ls.split(',');
                    ls = ls.unique();
                    wishlist = ls;
                }
                 $.ajax({
                    type: 'POST',
                    url:opt.ajaxPost,
                    data:{
                        action:'user_wishlist_update',
                        user_id :userData['user_id'],
                        wishlist :wishlist.join(','),
                    }
                })
                .done(function(response) {
                    highlightWishlist(wishlist,inWishlist);
                    sessionStorage.removeItem(shopName);
                });
            }
        },
        error: function(){
            console.log('No user data returned');
        }
    });
}

如果用戶是訪客，我們從會話/本地存儲中獲取願望清單

else {
    if (typeof(ls) != 'undefined' && ls != null) {
        ls = ls.split(',');
        ls = ls.unique();
        wishlist = ls;
    }
}

現在我們有了雙 AJAX 和一些輔助函數。

第一個 AJAX 請求從 WordPress 獲取用戶 ID 和用戶願望清單數據。您可以通過添加到插件代碼文件的自定義 AJAX 操作來實現此目的：

// Get current user data
function fetch_user_data() {
    if (is_user_logged_in()){
        $current_user = wp_get_current_user();
        $current_user_wishlist = get_user_meta( $current_user->ID, 'wishlist',true);
        echo json_encode(array('user_id' => $current_user->ID,'wishlist' => $current_user_wishlist));
    }
    die();
}
add_action( 'wp_ajax_fetch_user_data', 'fetch_user_data' );
add_action( 'wp_ajax_nopriv_fetch_user_data', 'fetch_user_data' );

如果會話/本地存儲中已有願望清單項目，則下一個 AJAX 請求會更新用戶願望清單：

ffunction update_wishlist_ajax(){
    if (isset($_POST["user_id"]) && !empty($_POST["user_id"])) {
        $user_id   = $_POST["user_id"];
        $user_obj = get_user_by('id', $user_id);
        if (!is_wp_error($user_obj) && is_object($user_obj)) {
            update_user_meta( $user_id, 'wishlist', $_POST["wishlist"]);
        }
    }
    die();
}
add_action('admin_post_nopriv_user_wishlist_update', 'update_wishlist_ajax');
add_action('admin_post_user_wishlist_update', 'update_wishlist_ajax');

輔助函數

在進入事件部分之前，讓我們了解更多關於我們的輔助函數的信息

Array.prototype.unique = function() {
  return this.filter(function (value, index, self) {
    return self.indexOf(value) === index;
  });
}
 function isInArray(value, array) {return array.indexOf(value) > -1;}
 function onWishlistComplete(target, title){
    setTimeout(function(){
        target
        .removeClass('loading')
        .addClass('active')
        .attr('title',title);
    },800);
}
function highlightWishlist(wishlist,title){
    $('.wishlist-toggle').each(function(){
        var $this = $(this);
        var currentProduct = $this.data('product');
        currentProduct = currentProduct.toString();
        if (isInArray(currentProduct,wishlist)) {
            $this.addClass('active').attr('title',title);
        }
    });
}

第一個輔助函數通過刪除重複項使數組唯一。

另一方面，第二個檢查給定值是否存在於給定數組中。

最後一個函數在將項目添加到願望清單時執行，最後一個函數顯示願望清單中的項目。

添加切換

下一步是向願望列表切換添加一個點擊事件以支持實際功能。

如果您轉到商店頁面，刷新瀏覽器，然後單擊任何願望清單切換，您將看到它正在工作！

$('.wishlist-toggle').each(function(){
     var $this = $(this);
     var currentProduct = $this.data('product');
     currentProduct = currentProduct.toString();
     if (!loggedIn && isInArray(currentProduct,wishlist)) {
        $this.addClass('active').attr('title',inWishlist);
    }
     $(this).on('click',function(e){
        e.preventDefault();
        if (!$this.hasClass('active') && !$this.hasClass('loading')) {
             $this.addClass('loading');
             wishlist.push(currentProduct);
            wishlist = wishlist.unique();
             if (loggedIn) {
                // get user ID
                if (userData['user_id']) {
                    $.ajax({
                        type: 'POST',
                        url:opt.ajaxPost,
                        data:{
                            action:'user_wishlist_update',
                            user_id :userData['user_id'],
                            wishlist :wishlist.join(','),
                        }
                    })
                    .done(function(response) {
                        onWishlistComplete($this, inWishlist);
                    })
                    .fail(function(data) {
                        alert(opt.error);
                    });
                }
            } else {
                 sessionStorage.setItem(shopName, wishlist.toString());
                onWishlistComplete($this, inWishlist);
             }
         }
     });
});

在願望清單表中列出項目

將以下代碼添加到我們包裝函數最底部的 main.js 中：

setTimeout(function(){
     if (wishlist.length) {
         restUrl += '?include='+wishlist.join(',');
        restUrl += '&per_page='+wishlist.length;
         $.ajax({
            dataType: 'json',
            url:restUrl
        })
        .done(function(response){
            $('.wishlist-table').each(function(){
                var $this = $(this);
                $.each(response,function(index,object){
                    $this.append('<tr data-product="'+object.id+'"><td><a class="wishlist-remove" href="#" title="'+opt.removeWishlist+'"></a>'+object.image+'</td><td>'+object.title["rendered"]+'</td><td>'+object.price+'</td><td>'+object.stock+'</td><td><a class="details" href="'+object.link+'">'+opt.buttonText+'</a></td></tr>');
                });
            });
        })
        .fail(function(response){
            alert(opt.noWishlist);
        })
        .always(function(response){
            $('.wishlist-table').each(function(){
                $(this).removeClass('loading');
            });
        });
     } else {
        $('.wishlist-table').each(function(){
            $(this).removeClass('loading');
        });
    }
 },1000);

在這裡，我們有兩個 REST API 選項：

使用 WordPress REST API
使用 WooCommerce REST API。

轉到主插件文件並在最底部添加以下代碼：

// Extend REST API
function rest_register_fields(){
     register_rest_field('product',
        'price',
        array(
            'get_callback'    => 'rest_price',
            'update_callback' => null,
            'schema'          => null
        )
    );
     register_rest_field('product',
        'stock',
        array(
            'get_callback'    => 'rest_stock',
            'update_callback' => null,
            'schema'          => null
        )
    );
     register_rest_field('product',
        'image',
        array(
            'get_callback'    => 'rest_img',
            'update_callback' => null,
            'schema'          => null
        )
    );
}
add_action('rest_api_init','rest_register_fields');
 function rest_price($object,$field_name,$request){
     global $product;
     $id = $product->get_id();
     if ($id == $object['id']) {
        return $product->get_price();
    }
 }
 function rest_stock($object,$field_name,$request){
     global $product;
     $id = $product->get_id();
     if ($id == $object['id']) {
        return $product->get_stock_status();
    }
 }
 function rest_img($object,$field_name,$request){
     global $product;
     $id = $product->get_id();
     if ($id == $object['id']) {
        return $product->get_image();
    }
 }
 function maximum_api_filter($query_params) {
    $query_params['per_page']["maximum"]=100;
    return $query_params;
}
add_filter('rest_product_collection_params', 'maximum_api_filter');

從願望清單中刪除項目

在 main.js 文件中包裝函數的最底部添加以下代碼：

$(document).on('click', '.wishlist-remove', function(){
     var $this = $(this);
     $this.closest('table').addClass('loading');
     wishlist = [];
     $this.closest('table').find('tr').each(function(){
         if ($(this).data('product') != $this.closest('tr').data('product')) {
             wishlist.push($(this).data('product'));
             if (loggedIn) {
                 // get user ID
                if (userData['user_id']) {
                    $.ajax({
                        type: 'POST',
                        url:opt.ajaxPost,
                        data:{
                            action:'user_wishlist_update',
                            user_id :userData['user_id'],
                            wishlist :wishlist.join(','),
                        }
                    })
                    .done(function(response) {
                        $this.closest('table').removeClass('loading');
                        $this.closest('tr').remove();
                    })
                    .fail(function(data) {
                        alert(opt.error);
                    });
                }
            } else {
                sessionStorage.setItem(shopName, wishlist.toString());
                setTimeout(function(){
                    $this.closest('table').removeClass('loading');
                    $this.closest('tr').remove();
                },500);
            }
        }
     });
 });

這是結果：願望清單

結論

在本教程中，我們創建了一個自定義插件來在 WooCommerce 中添加願望清單。我們希望這篇文章能幫助您將願望清單功能添加到您的商店。

類似文章

註銷後 WooCommerce 重定向 [終極指南]
WooCommerce 結帳後重定向：重定向到自定義感謝頁面
使用 WordPress 自定義 Hook 的完整指南 do_action 和 apply_filters 示例
如何修復未捕獲的類型錯誤：wp.template 不是函數
如果未登錄 WordPress 如何重定向用戶 » 頁面重定向
如何在頁麵店面主題頂部添加搜索框
如何在 WooCommerce 中獲取當前產品類別名稱
如何在 WooCommerce 中隱藏稅標
如何檢查用戶是否登錄WordPress
如何以編程方式創建產品 WooCommerce
如何獲取產品描述和顯示 WooCommerce
如何在 WooCommerce 中按類別禁用運輸
如何在 WooCommerce 中獲取結帳 URL
如何在 WooCommerce 中更改貨幣符號
如何按產品 ID 創建 WooCommerce 添加到購物車按鈕
如何創建 WooCommerce 自定義商店頁面
如何設置 WooCommerce 店面博客
40 多個用於輕鬆聯繫的最佳 WordPress 聯繫表單插件
30 多個 WordPress 最佳評論插件，可提高參與度
如何在 WooCommerce 註冊表單中添加字段
如何將社交媒體圖標添加到頁腳店面主題
如何免費發送到 Mpesa WooCommerce 付款
如何設置 WooCommerce 店面超級菜單
5+ 最佳 WooCommerce 商店示例
如何在 WooCommerce 中以編程方式將產品添加到購物車
如何在結帳頁面 WooCommerce 上獲取訂單 ID
WooCommerce 登錄重定向掛鉤示例說明
如何添加 WooCommerce 我的帳戶頁面重定向