Javascript Allign Paypal按钮，位于“链接”旁边；“添加到购物车”；在商业中

我在我的Woocommerce网站上有一个定制的Paypal支付按钮，我想一个接一个地连接这两个按钮，如下图所示：

当前显示以下“添加到购物车”按钮：

我试着将按钮向上移动，定制边距顶部，但似乎并没有达到我想要的效果。这是该按钮的CSS类：

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

我试图通过以下方式对其进行修改：

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

看起来按钮隐藏在下面的“添加到购物车”按钮中。有人能告诉我哪里做错了吗？也许可以使用JavaScript？提前谢谢

---

可以看到实际的问题。

我已设法将其向右对齐，如下所示：

为此，我使用inspector开发工具编辑了HTML代码：

使用类

wcppec签出按钮woo\u pp\u cart\u按钮woo div

将div移动到div内部，并禁用类

woocommerce variation add to cart variations\u按钮woocommerce variation add to cart

。添加到CSS：

.woocommerce变体添加到购物车变体\u按钮woocommerce变体添加到购物车禁用{
显示器：flex；
}

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

另一个你现在可能有的是为什么“添加到购物车”框被放大了。您必须调整父元素的大小，以使其停止发生。看看

---

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

解决方案涉及到部分

Javascript-这将用于将paypal按钮移动到所需位置的父级

CSS-一些规则，以适应欲望的外观

Javascript

这里没什么复杂的。只需删除元素及其所有子元素并将其附加到目标。必须在WP主题的自定义JS中添加此内容

窗口.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;
  }
}

---

希望这有帮助：）

你能更改html吗？我只能更新CSS。这里有什么帮助吗？是的，我会尽力帮助你。可以添加javascript和Jquery吗？我这样问是因为解决这个问题的最好方法是移动html。你已经说过你不能。将paypal按钮移到divAdd to cart中，看起来更糟一些只有一件事。。选择变体时，按钮转到标题。JS有什么问题吗？查看“选择任何变体”按钮何时移到顶部，因为有清晰的变体文本。我不理解您的问题。你想回到我们的聊天吗？@JoeKooker我有一个解决方案，但想在编辑答案之前与你确认一下。请对我发表评论，以便我们可以继续私下聊天：）@JoeKooker，继续。让我们。