从结帐表单中删除 woocommerce 默认 css 类

Posted 2023-03-06

【中文标题】从结帐表单中删除 woocommerce 默认 css 类

【英文标题】：Remove woocommerce deafult css classes from checkout form

【发布时间】：2020-05-07 12:32:27

【问题描述】：

我第一次使用 woocommerce 来创建一个由 wordpress 支持的电子商务网站。我需要应用 bootstrap 4 css 表单类并删除 woocommerce 将用于包装表单元素的默认类。使用检查器时，我注意到在每个 <label> 和 <input> 之前添加了一个 <p class="form-row form-row-first"> 标签，输入也包含在 <span> 标签中，这将破坏所有 bootstrap 4 布局。经过一番头疼后，我在 SO 上找到了一个 similar question here，我决定试一试，但该解决方案不会像我预期的那样对我有用。 我想要做的是创建一个尊重引导程序的 css 网格布局的表单，如下所示：

<form>
 <div class="form-group">
 // form group wrapper for labels and inputs
  <label for=""></label>
  <input type="text" class="form-control" />
 </div>
</div>

这是 bootstrap 4 表单的基本标记。对于某些字段，我还想使用 .form-row 将两个字段（例如姓名和姓氏或类似字段）分组到 .col-sm-12 col-md-6 col-lg-6 列中。

这可以通过使用过滤器或挂钩来实现吗？我找到了管理文件渲染功能的核心文件，但我不想编辑该文件以避免弄乱代码。

现在计费和结帐表单字段具有以下结构：

感谢您的帮助。

【问题讨论】：

为什么不直接用你自己的覆盖 WC css...使用 flexbox 布局而不是默认布局？

@HowardE 因为我正在将 woocommerce 与我使用 bootstrap 4 作为前端框架制作的自定义主题集成。我已经使用 css 进行了快速修复，但它不适合深度集成

这是见仁见智的问题。您可以简单地将您的 CSS 添加到您的基本自定义主题中。这就是我所做的。它每次都有效。

【参考方案1】：

如果你使用 Bootstrap 4 和 SASS，你可以使用 @extend 来实现

例如，您可以轻松地将默认的 woocommerce 按钮更改为引导按钮，如下所示：

.woocommerce .button 
  @extend .btn, .btn-primary;

【参考方案2】：

WooCommerce 提供了一种从您的主题中覆盖模板的方法。

如果您需要使用 Bootstrap html 标记和 CSS 类，您可能需要按照 WooCommerce 文档中给出的说明覆盖 WooCommerce 模板： https://docs.woocommerce.com/document/template-structure/

如果您使用的不是您自己构建的主题，最佳做法是创建一个子主题，这样您就可以覆盖子主题中的 WooCommerce 模板，而不会更改原始模板并保持更新它的能力。 https://developer.wordpress.org/themes/advanced-topics/child-themes/