Hey ,
I want to add new hover over button to the product slider , so like " add to cart" "view details" and i want to add "view free samples" . appreciate your help .
Add new hover over button for product
7 posts from 2 voices- Started 1 year ago by bizmanualz
- Latest reply from Ismael
- This topic is closed
- This topic is resolved
-
Ismael
ModeratorHi,
Sorry for the late reply but this would involve a lot of code and a bit complex so be prepared. :)
Kindly go to wp-content/themes/abundance/woocommerce-config/config.php and find this line of code:
echo "<a class='button show_details_button $extraClass' href='".get_permalink($post->ID)."'>".__('Show Details','avia_framework')."</a>";
Add this code below it:
echo "<a class='button custom_woo_button $extraClass' href='link_here'>".__('title_here','avia_framework')."</a>";
Replace link_here with the link you want to redirect when the button is clicked. Replace also title_here with the title you want to be placed on the button. In your case the title should be View Free Samples.Then Go to wp-content/themes/abundance/woocommerce-config/woocommerce-mod.js and find this line of code:
function cart_button_animation()The whole code should look something like this:
function cart_button_animation()
{
var containers = jQuery('.thumbnail_container');
containers.each(function()
{
var container = jQuery(this), buttons = container.find('.button');
container.containerHeight = container.height()/2;
buttons.css({opacity:0, visibility:'visible', top: container.containerHeight});
container.hover(
function()
{
if(container.containerHeight < 20)
{
container.containerHeight = container.height()/2; buttons.css({top: container.containerHeight});
}
if(buttons.length > 1)
{
buttons.each(function(i)
{
var button = jQuery(this);
if(i == 0)
{
var newPos = container.containerHeight - button.outerHeight()/2;
button.stop().animate({top:newPos - 3, opacity:1})
}
else
{
var newPos = container.containerHeight + button.outerHeight()/2;
button.stop().animate({top:newPos + 3, opacity:1})
}
});
}
else
{
buttons.stop().animate({opacity:1});
}
},
function()
{
buttons.stop().animate({opacity:0, top: container.containerHeight});
});
});
}Now, Replace it with this code:
function cart_button_animation()
{
var containers = jQuery('.thumbnail_container');
containers.each(function()
{
var container = jQuery(this), buttons = container.find('.button');
container.containerHeight = container.height()/3;
buttons.css({opacity:0, visibility:'visible', top: container.containerHeight});
container.hover(
function()
{
if(container.containerHeight < 20)
{
container.containerHeight = container.height()/3; buttons.css({top: container.containerHeight});
}
if(buttons.length > 1)
{
var j = 15;
buttons.each(function(i)
{
var button = jQuery(this);
if(i == 0)
{
var newPos = container.containerHeight - button.outerHeight()/3;
button.stop().animate({top:newPos - 3, opacity:1})
}
else
{
var newPos = container.containerHeight + button.outerHeight()/3;
button.stop().animate({top:newPos + j, opacity:1})
j += 36;
}
});
}
else
{
buttons.stop().animate({opacity:1});
}
},
function()
{
buttons.stop().animate({opacity:0, top: container.containerHeight});
});
});
}Hope this helps. :)
Regards,
IsmaelPosted 1 year ago #
Topic Closed
This topic has been closed to new replies.
Create a new thread and tell me what problems you are encountering and what you want to know. 
There is no step 3 :) 
