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