Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #12286

    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 .

    #74957

    Any help ?? Please

    #74958

    Guys please help

    #74959

    Bump anyone …

    #74960

    Hi,

    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:

    Code:
    echo "<a class='button show_details_button $extraClass' href='".get_permalink($post->ID)."'>".__('Show Details','avia_framework')."</a>";

    Add this code below it:

    Code:
    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:

    Code:
    function cart_button_animation()

    The whole code should look something like 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()/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:

    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,

    Ismael

    #74961

    Hey Ismael ,

    Thanks a lot , worked like a charm .

    #74962

    Hey,

    Cool! Glad that I could help you. :)

    Regards,

    Ismael

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Add new hover over button for product’ is closed to new replies.