Allign Paypal按钮旁边＆＃34;添加到购物车＆＃34;在Woocommerce

Question

我的自定义Paypal付款按钮进入我的Woocommerce网站，并希望将这两个按钮逐个对齐，如下图所示：

目前正在显示以下添加到购物车按钮：

我试图将按钮向上移动，自定义margin-top，但似乎没有实现我想要的效果。这是该按钮的CSS类：

.wcppec-checkout-buttons__button img {
 margin: 0 auto;
 }

我试图通过这种方式修改：

 .wcppec-checkout-buttons__button img {
 margin-top:-100px;
 }

看起来像按钮是隐藏波纹管添加到购物车按钮。有人可以告诉我哪里做错了吗？也许可以使用JavaScript？提前谢谢。

可以看到实际问题here。

Answer 1

我设法将它与右边对齐，如下所示：

为此，我使用检查器开发人员工具编辑了HTML代码：

将具有类wcppec-checkout-buttons woo_pp_cart_buttons_div的div移动到具有类woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-disabled的div内。添加到CSS：

.woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-disabled { display: flex; }

如果您不知道flex属性是什么，我建议您阅读以下内容： w3 css flexbox property.

您现在可能拥有另一个，这就是为什么＆＃34;添加到购物车＆＃34;盒子被放大了。您必须处理父元素的大小调整以使其停止发生。看看this question here on stackoverflow.

编辑：只需阅读作者的评论，说他无法编辑HTML，这可能不会起作用。

Answer 2

解决方案涉及部分

1. Javascript - 这将用于将paypal按钮移动到所需位置的父级
2. CSS - 一些适应欲望的规则

  

的Javascript

这里没什么复杂的。只需删除包含其所有子元素的元素，然后将其附加到目标。这必须添加到WP主题的自定义JS上。

window.onload将等待您的文档在函数运行之前加载。

window.onload = function() { 
  const sourceElement = document.getElementsByClassName('woo_pp_cart_buttons_div')[0]; 
  const destination = document.getElementsByClassName('woocommerce-variation-add-to-cart-disabled')[0]; 
  destination.appendChild(sourceElement); 
}

  

CSS

只需几个样式规则即可更改paypal按钮的位置和大小。还在移动视图上添加了断点的媒体查询。

.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-disabled,
.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-enabled {
  display: flex;
  padding: 0;
  flex-direction: row;
  height: 39px;
  justify-content: space-between;
  align-items: center;
}

.quantity.buttons_added {
  margin: 0;
  flex-shrink: 2;
}

button.single_add_to_cart_button.button.alt.disabled.wc-variation-selection-needed,
button.single_add_to_cart_button.button.alt {
  margin: 0 20px;
  flex-basis: 200px;
}

.wcppec-checkout-buttons.woo_pp_cart_buttons_div {
  flex-shrink: 5;
  margin: 0;
}

a#woo_pp_ec_button_product {
  padding: 0;
}

.wcppec-checkout-buttons.woo_pp_cart_buttons_div a img { 
height: 38px!important; 
}

@media screen and (max-width: 580px) { 
  .woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-disabled,
  .woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-enabled {
    flex-wrap: wrap;
    justify-content: space-around;
      height: 90px;
  }

  .wcppec-checkout-buttons.woo_pp_cart_buttons_div {
    padding-top: 15px;
  }
}

希望这会有所帮助：）