jquery - 将 Woocommerce 添加到购物车按钮移动到缩略图顶部

Question

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

我试过使用钩子(Hook)等，但似乎无法让它位于底部缩略图的顶部，有什么想法吗？

您可以在此页面上看到添加到购物车按钮: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});
});