Create custom wishlist in wordpress without plugin.
Paste in style.css
<style>
.wishlist-wrapper {
font-size: 12px;
height: 30px;
display: inline-block;
line-height: 30px;
border-radius: 30px;
background: #f1f1f1;
padding: 0px 10px;
}
span.wishlist-title {
float: left;
margin-right: 5px;
}
span.little-heart {
float: left;
display: inline-block;
margin-top: 5px;
}
.wishlist-wrapper:hover {
//background: #ff9900;
}
.wishlist-wrapper:hover > span.wishlist-title
{
//color:#fff;
}
.products .wishlist-title
{
display:none;
}
.products .wishlist-wrapper
{
height:40px;
width:40px;
border-radius:40px;
}
.products span.little-heart {
float: left;
display: inline-block;
margin-top: 11px;
margin-left: 1px;
}
.added .wishlist-wrapper
{
background:#ff9900;
}
.added span.wishlist-title
{
color:#fff;
}
.product_thumb {
width: 15%;
float: left;
}
.wishlist_left_cont {
float: right;
width: 85%;
display: block;
padding: 40px 60px;
}
.full_wishlist_cont {
background: #fff;
width: 100%;
border-bottom: 1px solid #dcdcdc;
margin: 0 !important;
display: inline-block;
box-sizing: border-box;
}
h4.wishlist_title {
color: #5a5a5a;
font-family: Titillium -webkit-body;
font-size: 24px;
font-weight: 700;
letter-spacing: 0px;
margin: 0;
}
p.wishlist_reg_price {
color: #FF9900;
font-size: 17px;
font-family: Titillium -webkit-body;
font-weight: 600;
margin: 0;
letter-spacing: 1px;
}
.wishlist_outer:hover .wishlist_title{
color:#0b3288;
}
span.wishlist_sale_price {
color: #9a9a9a;
font-size: 19px;
font-family: Titillium -webkit-body;
font-weight: 300;
letter-spacing: 1px;
}
.remove_wishlist_product {
display: block;
color: #cccccc;
position: absolute;
top: 28px;
right: 35px;
font-size: 17px;
cursor:pointer;
}
.remove_wishlist_product:hover i {
color: #FF9900;
}
.wishlist_outer{
position:relative;
margin:0px !important;
width: 100% !important;
max-width: 100% !important;
}
a.return-to-shop_from_wishlist {
color: white;
font-size: 18px;
font-weight: 400;
font-family: Titillium -webkit-body;
display: inline;
background: #020202;
padding: 11px 21px;
border-radius: 6px;
}
.wishlist_status {
color: black;
font-size: 19px;
font-weight: 400;
font-family: Titillium -webkit-body;
display: block;
border-radius: 6px;
}
.wishlist_wrap {
max-width: 100% !important;
}
.home .products .wishlist-toggle
{
display:none !important;
}
</style>
In function.php
/* wishlist coding */
// Add wishlist to product
add_action('woocommerce_before_shop_loop_item_title','wishlist_toggle',15);
add_action('woocommerce_single_product_summary','wishlist_toggle');
function wishlist_toggle(){
?>
<script>
</script>
<?php
global $product;
$productid = $product->get_id();
$wishclassname = "removed";
$wstatus = "Add to wishlist";
if(is_user_logged_in()){
global $current_user;
get_currentuserinfo();
$current_user = wp_get_current_user();
$user_id = $current_user->ID;
$hasusermeta = get_users('meta_key='.$user_id.'wishlist');
if(empty($hasusermeta)) {
$wishclassname = "removed";
$wstatus = "Add to wishlist";
}
else
{
$current_user_wishlist = get_user_meta( $user_id, $user_id.'wishlist',true);
if(empty($current_user_wishlist))
{
$wishclassname = "removed";
$wstatus = "Add to wishlist";
}else
{
$current_user_wishlist_array = explode( ',', $current_user_wishlist );
if (in_array($productid, $current_user_wishlist_array))
{
$wishclassname = "added";
$wstatus = "In your wishlist";
}
else
{
$wishclassname = "removed";
$wstatus = "Add to wishlist";
}
}
}
//$wishclassname = "removed";
}
else
{
$wishclassname = "removed";
$wstatus = "Add to wishlist";
}
echo '<a class="wishlist-toggle '.$wishclassname.'" data-product="'.esc_attr($product->get_id()).'" title="'.esc_attr__("Add to wishlist","text-domain").'"><div class="wishlist-wrapper"><span class="wishlist-title">'.$wstatus.'</span><span class="little-heart">'.file_get_contents(get_stylesheet_directory_uri() . '/svgicons/heart.svg').'</span></div></a>';
}
function add_to_wishlist(){
if(is_user_logged_in()){
$productid = $_POST['productid'];
global $current_user;
get_currentuserinfo();
$current_user = wp_get_current_user();
$user_id = $current_user->ID;
$hasusermeta = get_users('meta_key='.$user_id.'wishlist');
if(empty($hasusermeta)){
update_user_meta( $user_id, $user_id.'wishlist', $productid);
echo "added";
}
else
{
/* ethe chalu coding takdi */
$current_user_wishlist = get_user_meta( $user_id, $user_id.'wishlist',true);
//print_r($current_user_wishlist);
if(empty($current_user_wishlist))
{
update_user_meta( $user_id, $user_id.'wishlist', $productid);
echo "added";
}
else
{
$current_user_wishlist_array = explode( ',', $current_user_wishlist );
//print_r($current_user_wishlist_array);
if (in_array($productid, $current_user_wishlist_array))
{
$current_user_wishlist_array = array_diff($current_user_wishlist_array, array($productid));
$current_user_wishlist_array = implode( ',', $current_user_wishlist_array );
update_user_meta( $user_id, $user_id.'wishlist', $current_user_wishlist_array);
//print_r($current_user_wishlist_array);
echo "removed";
}
else
{
update_user_meta( $user_id, $user_id.'wishlist', $current_user_wishlist.','.$productid);
echo "added";
}
}
}
}
else
{
echo "redirect";
}
die();
}
add_action("wp_ajax_add_to_wishlist","add_to_wishlist");
add_action("wp_ajax_nopriv_add_to_wishlist","add_to_wishlist");
function wishlist_items(){
if(is_user_logged_in()){
global $current_user;
get_currentuserinfo();
$current_user = wp_get_current_user();
$user_id = $current_user->ID;
//$hasusermeta = get_users('meta_key='.$user_id.'wishlist');
$current_user_wishlist = get_user_meta( $user_id, $user_id.'wishlist',true);
$current_user_wishlist_array = explode( ',', $current_user_wishlist );
//print_r($current_user_wishlist_array);
count($current_user_wishlist_array);
?>
<div class="empty_box"></div>
<div class="wishlist_wrap">
<?php
foreach ($current_user_wishlist_array as $current_user_wishlist_id)
{
$_product = wc_get_product( $current_user_wishlist_id );
if ( has_post_thumbnail( $current_user_wishlist_id ) ) {
$attachment_ids[0] = get_post_thumbnail_id( $current_user_wishlist_id );
$attachment = wp_get_attachment_image_src($attachment_ids[0], 'full' ); ?>
<div class="wishlist_outer">
<a href="<?php echo get_permalink($current_user_wishlist_id) ?>">
<div class="full_wishlist_cont">
<div class="product_thumb">
<img src="<?php echo $attachment[0] ; ?>" class="card-image" />
</div>
<div class="wishlist_left_cont">
<h4 class="wishlist_title"><?php echo get_the_title( $current_user_wishlist_id ); ?></h4>
<div class="wishlist_price_cont">
<p class="wishlist_reg_price"><?php echo $_product->get_regular_price(); ?> <del><span class="wishlist_sale_price"><?php echo $_product->get_sale_price(); ?></span></del></p>
</div>
</div>
</div>
</a>
<div class="remove_wishlist_product" data-value="<?php echo $current_user_wishlist_id; ?>" ><i class="fas fa-trash-alt"></i></div>
</div>
<?php }
//echo $_product->get_price();
}
echo "</div>";
}
else{
}
}
add_shortcode("wishlist_products","wishlist_items");In custom.js
jQuery(document).ready(function($){
/* wishlist */
jQuery('.wishlist-toggle').each(function() {
$(this).click(function(){
/* if($(this).hasClass( "removed" )){
$(this).addClass("added");
$(this).removeClass("removed");
} */
var $this = $(this);
//$this.siblings().removeClass();
if($this.hasClass('removed')){
$this.removeClass('removed').addClass('added')
$this.find('.wishlist-title').html('In your wishlist');
}else{
$this.removeClass('added').addClass('removed');
$this.find('.wishlist-title').html('Add to wishlist');
}
var productid = $(this).attr("data-product");
var data = {
'action' : "add_to_wishlist",
'productid' : productid
}
$.post(myajax.ajax_url, data, function(response){
});
});
});
});
jQuery(document).ready(function($){
if ($('.wishlist_wrap').is(':empty')){
$('.empty_box').html('<p class="wishlist_status">Your wishlist is currently empty.</p><p class=""><a class="return-to-shop_from_wishlist" href="http://localhost/lensforu/shop/">Return to shop</a></p>');
}
jQuery('.remove_wishlist_product').each(function() {
$(this).click(function(){
var productid = $(this).attr("data-value");
$(this).closest('.wishlist_outer').remove();
//alert(productid);
var data = {
'action' : "add_to_wishlist",
'productid' : productid
}
$.post(myajax.ajax_url, data, function(response){
$('.wishlist_wrap').length;
if ($('.wishlist_wrap').is(':empty')){
$('.empty_box').html('<p class="wishlist_status">Your wishlist is currently empty.</p><p class=""><a class="return-to-shop_from_wishlist" href="http://localhost/lensforu/shop/">Return to shop</a></p>');
}
});
});
});
});