在 Woocommerce 中“添加到购物车”旁边对齐 Paypal 按钮

Question

我的 Woocommerce 网站中有自定义的 Paypal 支付按钮，并希望将两个按钮一个接一个地对齐，如下图所示：

目前显示如下添加到购物车按钮：

我尝试将按钮向上移动，自定义边距顶部，但似乎没有达到我想要的效果。这是该按钮的 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.

您现在可能还有另一个问题，就是“添加到购物车”框被放大的原因。您必须调整父元素的大小以使其停止发生。看看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;
  }
}

希望这会有所帮助:)