Scroll to top

How to create custom wishlist in wordpress without plugin?


Notice: Undefined variable: string in /home/u665484253/domains/wpcodekit.com/public_html/wp-content/themes/twentytwenty-child/functions.php on line 61

Create custom wishlist in wordpress without plugin.

Wishlist on single product
Wishlist on single product

 

Product Wishlist
Product Wishlist

 

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>'); 

   }

    

   });


    });

 });

 });



 

Get more information

Read More Posts

Leave a Reply

Your email address will not be published.