WooCommerce：更改按钮 class 而不覆盖模板文件

Question

我想用 Bootstrap 中的 类 更改 WooCommerce 的按钮 类。

目前我已经通过覆盖现有的模板文件来做到这一点。在许多情况下，按钮 类 是唯一的变化。

是否有任何钩子可以为所有按钮执行此操作而不是覆盖模板文件？

我找不到任何东西

Answer 1

我不知道这个有什么钩子（可能有一个），我也不知道 Bootstrap classes。但是如果你想避免覆盖模板文件，你可以用一些 JavaScript.

来实现。

将此代码添加到 functions.php，它会相应地更改 class 名称。

但是 functions.php 文件将被每次主题更新覆盖。所以正确的方法是创建一个子主题。

add_action( 'wp_head', 'change_button_class' );
function change_button_class() {
    ?>

    <script type="text/javascript">
    jQuery(document).ready(function($){
        $('.button-1').addClass('button-2').removeClass('button-1');
    });
    </script>

    <?php
}

更新

添加了脚本标签

Answer 2

如果你使用 Bootstrap 4 和 SASS 你可以用 @extend

例如，您可以像这样轻松地将默认 woocommerce 按钮更改为 bootstrap 按钮：

.woocommerce .button {
  @extend .btn;
  @extend .btn-primary;
}