移動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}); 
});