Woocommerce中“添加到购物车”旁边的Allign Paypal按钮

Question

我在Woocommerce网站上有一个自定义的Paypal付款按钮，并且想要将两个按钮一个接一个地分配，如下图：

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

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

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

我试图修改这是这样的：

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

好像按钮隐藏在下面，添加到购物车按钮。 有人可以告诉我我做错了什么吗？ 也许可以使用JavaScript？ 提前致谢。

实际问题可以在这里看到。

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类别为woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-disabled的div的内部div woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-disabled 。 添加到CSS：

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

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

您现在可能还拥有的另一个原因是为什么“添加到购物车”框被放大了。 您必须对父元素的大小进行调整，以使其停止发生。 在这里查看关于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;
  }
}

希望这可以帮助 ：）