移动Woocommerce添加到购物车按钮，在缩略图顶部

Question

任何想法如何将添加到购物车按钮移动到缩略图顶部？

我试过使用挂钩等，但似乎无法让它坐在缩略图顶部的任何想法？

可以看到添加到购物车按钮，此页面上：https://demo.woothemes.com/storefront/

我想移动的按钮，所以它看起来是这样的：

感谢，

斯科特

Answer 1

尝试将此项添加到您的CSS：

a.button.product_type_variable.add_to_cart_button{ 
    position:relative; 
    top:-11em; 
} 

您可以调整top值...但11em看起来像您希望的位置。

---

编辑

你说得对！我没有嘲笑它。
所以它必须与jQuery和一点点计算。

$("a.button.product_type_variable.add_to_cart_button").each(function(){ 
    var imageAbove = $(this).closest("li").find("img"); 
    var imageAbovePos = imageAbove.offset().top; 
    var imageAboveHeight = imageAbove.height(); 

    var thisPos = $(this).offset().top; 
    var thisHeight = $(this).height(); 

    // Position of the bottom of the image 
    var imageAboveBottom = imageAbovePos + imageAboveHeight ; 

    // This is an arbitrary distance (in pixel) you can play with. 
    // It's the distance you wish to have between the bottom of the button and the bottom of the image. 
    // It may need more than 20 pixels. 
    var distanceFromImageBottom = 20; 

    // This is the new position to give to the button. 
    var newButtonPos = thisPos - imageAboveBottom - thisHeight - distanceFromImageBottom; 

    $(this).css({"position":"relative","top":newButtonPos}); 
});