How to Configure Wishlist Functionality in Woocommerce without Plugin?

To implement a wishlist functionality in WooCommerce without using a plugin, you’ll need to custom code that stores user-selected products in a wishlist. You can do this by utilizing custom post types, user meta, and WooCommerce hooks.

Here’s a step-by-step guide to adding wishlist functionality in WooCommerce manually:

1. Create a Wishlist Button:

You’ll need a button that customers can click to add products to their wishlist. This button can be placed on the product page, shop page, or wherever you want.

Example code to add a wishlist button to product pages:

In your theme’s functions.php, add the following code to create a button for adding products to the wishlist.

<?php
function add_wishlist_button() {
global $product;
// Check if the product is already in the wishlist
$wishlist = get_user_meta(get_current_user_id(), '_wishlist', true);
$wishlist = is_array($wishlist) ? $wishlist : array();
$is_in_wishlist = in_array($product->get_id(), $wishlist);
// Display a button based on whether the product is already in the wishlist
echo '<button class="add-to-wishlist' . ($is_in_wishlist ? ' added' : '') . '" data-product_id="' . $product->get_id() . '">';
echo $is_in_wishlist ? 'Remove from Wishlist' : 'Add to Wishlist';
echo '</button>';
}
add_action('woocommerce_after_shop_loop_item', 'add_wishlist_button', 20); // On the shop page
add_action('woocommerce_single_product_summary', 'add_wishlist_button', 35); // On the single product page
?>

This will add an “Add to Wishlist” button that toggles based on whether the product is already in the wishlist.

2. Save the Wishlist Data:

When the user clicks the “Add to Wishlist” button, you need to store the product ID in the user’s meta data.

Here’s how to handle the request using AJAX and store the wishlist data:

Enqueue the necessary JavaScript in your functions.php file:

<?php
function wishlist_ajax_script() {
wp_enqueue_script('wishlist-ajax', get_template_directory_uri() . '/js/wishlist.js', array('jquery'), null, true);
wp_localize_script('wishlist-ajax', 'wishlist_ajax_params', array(
'wishlist_nonce' => wp_create_nonce('wishlist_nonce'),
'wishlist_url' => admin_url('admin-ajax.php')
));
}
add_action('wp_enqueue_scripts', 'wishlist_ajax_script');
?>

2. Create the JavaScript file (wishlist.js) in your theme’s js/ directory:

jQuery(document).ready(function($){
$(‘button.add-to-wishlist’).on(‘click’, function(e){
e.preventDefault();

var productID = $(this).data(‘product_id’);
var action = $(this).hasClass(‘added’) ? ‘remove’ : ‘add’;

// Perform the AJAX request
$.ajax({
url: wishlist_ajax_params.wishlist_url,
type: ‘POST’,
data: {
action: ‘update_wishlist’,
product_id: productID,
action_type: action,
wishlist_nonce: wishlist_ajax_params.wishlist_nonce
},
success: function(response) {
if(response.success) {
if(action === ‘add’) {
$(‘button[data-product_id=”‘ + productID + ‘”]’).addClass(‘added’).text(‘Remove from Wishlist’);
} else {
$(‘button[data-product_id=”‘ + productID + ‘”]’).removeClass(‘added’).text(‘Add to Wishlist’);
}
}
}
});
});
});

3. Add the corresponding PHP function to handle the AJAX request in functions.php:

function update_wishlist() {
if ( !isset($_POST[‘wishlist_nonce’]) || !wp_verify_nonce($_POST[‘wishlist_nonce’], ‘wishlist_nonce’) ) {
die(‘Permission denied’);
}
$user_id = get_current_user_id();
if ($user_id === 0) {
wp_send_json_error(array(‘message’ => ‘User not logged in.’));
}
$product_id = intval($_POST[‘product_id’]);
$action_type = sanitize_text_field($_POST[‘action_type’]);
// Get current wishlist
$wishlist = get_user_meta($user_id, ‘_wishlist’, true);
$wishlist = is_array($wishlist) ? $wishlist : array();
if ($action_type === ‘add’ && !in_array($product_id, $wishlist)) {
$wishlist[] = $product_id;
} elseif ($action_type === ‘remove’ && in_array($product_id, $wishlist)) {
$wishlist = array_diff($wishlist, array($product_id));
}
// Save updated wishlist to user meta
update_user_meta($user_id, ‘_wishlist’, $wishlist);
wp_send_json_success(array(‘message’ => ‘Wishlist updated’));
}
add_action(‘wp_ajax_update_wishlist’, ‘update_wishlist’);

3. Display the Wishlist:

To display the wishlist to the user, you can create a custom page template or a shortcode. This page will show all the products in the user’s wishlist.

For example, you could add a shortcode to show the wishlist:

function display_wishlist() {
if (!is_user_logged_in()) {
return ‘<p>You need to be logged in to view your wishlist.</p>’;
}

$user_id = get_current_user_id();
$wishlist = get_user_meta($user_id, ‘_wishlist’, true);
$wishlist = is_array($wishlist) ? $wishlist : array();

if (empty($wishlist)) {
return ‘<p>Your wishlist is empty.</p>’;
}

$output = ‘<ul class=”wishlist-products”>’;
foreach ($wishlist as $product_id) {
$product = wc_get_product($product_id);
if ($product) {
$output .= ‘<li>’;
$output .= ‘<a href=”‘ . get_permalink($product->get_id()) . ‘”>’ . $product->get_name() . ‘</a>’;
$output .= ‘ – ‘ . wc_price($product->get_price());
$output .= ‘</li>’;
}
}
$output .= ‘</ul>’;

return $output;
}
add_shortcode(‘user_wishlist’, ‘display_wishlist’);

4. Optional: Display Product Count and Update Wishlist Page:

To make it more user-friendly, you can display the number of items in the wishlist in the header or the navigation menu.

For example, you can show the wishlist count in the header:

function wishlist_count() {
$user_id = get_current_user_id();
if ($user_id === 0) return;

$wishlist = get_user_meta($user_id, ‘_wishlist’, true);
$count = is_array($wishlist) ? count($wishlist) : 0;

echo ‘<span class=”wishlist-count”>’ . $count . ‘</span>’;
}
add_action(‘wp_footer’, ‘wishlist_count’);

5. Conclusion:

This setup gives you basic wishlist functionality without using a plugin. You can customize it further by adding features like removing items from the wishlist directly from the wishlist page, sending notifications when items go on sale, or adding social sharing options.

Note: Ensure your theme and child theme (if applicable) are set up properly to handle custom scripts and actions. You may also want to implement caching strategies for better performance, especially if you have many users and products.