WordPress 页面上 PayPal 按钮的 HTML / CSS 自定义

Posted 2023-02-22

【中文标题】WordPress 页面上 PayPal 按钮的 HTML / CSS 自定义

【英文标题】：HTML / CSS Customization for PayPal Button on Wordpress Page

【发布时间】：2020-08-06 18:33:21

【问题描述】：

对于我的结帐页面，我试图将贝宝“快速结帐”按钮对齐到左侧。 使用 Firebug，我发现 CSS 部分尚未设置为中心。如果我输入“left”，它确实会向左移动。所以我将规则复制到 Wordpress 中的自定义 css 字段

#zoid-paypal-button-1a79a61bc2.paypal-button-size-responsive 
text-align: left;

第一个位不是静态的，这可能是刷新页面后它再次居中的原因。我怎样才能让它永久化？

【参考方案1】：

使用相关元素的类之一，而不是动态生成的按钮 ID，例如：

.paypal-button-size-responsive 
  text-align: left;

问题在于屏幕截图中折叠的<style> 元素中有一个更具体的内联选择器。 #zoid-paypal-button-1a79a61bc2.paypal-button-size-responsive 将始终覆盖 .paypal-button-size-responsive。您需要查看生成结帐页面的插件，并查看这些样式的内联位置并将其删除。

或者，如果您无法找到更具体的 ID 选择器，可以使用 !important 规则来否决更具体的 ID 选择器，即 text-align: left !important;。但是，这是一个不好的习惯，因为从长远来看，这会使维护 CSS 变得更加困难。

如果您可以评论或编辑您的问题以包含您正在使用的生成相关代码的插件，我会看看是否可以为您提供更多关于在哪里可以找到相关<style> 元素的详细信息。

【讨论】：

非常感谢！绝对地。我已经安装了带有 Storefront Parent Theme 的 Woocommerce，并且 Woocommerce 已经附带了一个 PayPal 网关，所以我只是使用它。