Skip to main content

How to create custom wishlist in wordpress without plugin?

Create custom wishlist in wordpress without plugin.


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

  
  });
});
});



Comments

Post a Comment

Popular posts from this blog

How to use inner html value or data in php from javascript(innerHTML)?

 use inner html value or data in php from javascript(innerHTML)? <html> <body> <p id="demo">use inner html value in php(innerhtml)</p> <script>   var jassi = document.getElementById("demo").innerHTML;   //document.write(jassi); </script> <?php $jassi = '<script>document.write(jassi);</script>'; echo $jassi; ?> </body> </html>
Post a Comment
Read more

How to get store data from WCFM(Best Multi Vendor Marketplace) Plugin?

 Get store data from WCFM(Best Multi Vendor Marketplace) Plugin. global $WCFM, $WCFMmp, $wp, $WCFM_Query, $post; $store_id = ''; if ( isset( $attr['id'] ) && !empty( $attr['id'] ) ) { $store_id = absint($attr['id']); } if (  wcfm_is_store_page() ) { $wcfm_store_url = get_option( 'wcfm_store_url', 'store' ); $store_name = apply_filters( 'wcfmmp_store_query_var', get_query_var( $wcfm_store_url ) ); $store_id  = 0; if ( !empty( $store_name ) ) { $store_user = get_user_by( 'slug', $store_name ); } $store_id    = $store_user->ID; } $user_id = $store_id;  $vendor_data = get_user_meta( $user_id, 'wcfmmp_profile_settings', true ); $street_1 = $vendor_data['address']['street_1']; $street_2 = $vendor_data['address']['street_2']; $city     = $vendor_data['address']['city']; $zip      = $vendor_data['address']['zip&#
Post a Comment
Read more

How to create login with phone number in woocommerce wordpress?

Create login with phone number in woocommerce wordpress. function wooc_extra_register_fields() {?>        <p class="form-row form-row-wide">        <label for="reg_billing_phone"><?php _e( 'Phone', 'woocommerce' ); ?><span class="required">*</span></label>        <input type="text" class="input-text" name="billing_phone" id="reg_billing_phone" value="<?php esc_attr_e( $_POST['billing_phone'] ); ?>" />        </p>            <?php  }  add_action( 'woocommerce_register_form_start', 'wooc_extra_register_fields' );  function wooc_validate_extra_register_fields( $username, $email, $validation_errors ) { if ( isset( $_POST['billing_phone'] ) ) {    $hasPhoneNumber= get_users('meta_value='.$_POST['billing_phone']);    if ( !empty($hasPhoneNumber)) {      $validation_er
Post a Comment
Read more