如何覆盖 Wordpress inline !important 样式

Question

我在 Wordpress 上使用 WooCommerce - 产品页面上的 'Add to cart' 按钮没有随着我更新的全局样式而改变，因为它具有内联样式：

<button type="submit" class="single_add_to_cart_button button alt gradient_" style="color: rgb(0,0,0)!important">Add to basket</button>

我无法用 CSS 覆盖它，因此需要在模板中找到代码并将其删除。在查看我的模板时，我能够在 content-single-product.php

中找到它

<div class="summary entry-summary">
        <?php
            /**
             * Hook: woocommerce_single_product_summary.
             *
             * @hooked woocommerce_template_single_title - 5
             * @hooked woocommerce_template_single_rating - 10
             * @hooked woocommerce_template_single_price - 10
             * @hooked woocommerce_template_single_excerpt - 20
             * @hooked woocommerce_template_single_add_to_cart - 30
             * @hooked woocommerce_template_single_meta - 40
             * @hooked woocommerce_template_single_sharing - 50
             * @hooked WC_Structured_Data::generate_product_data() - 60
             */
            do_action( 'woocommerce_single_product_summary' );
        ?>
</div>

哪里可以找到我需要编辑的钩子，大概是

* @hooked woocommerce_template_single_add_to_cart - 30

Answer 1

带有 "add to cart" 按钮的模板文件可能位于 wp-content/you-theme/woocommerce/single-product/add-to-cart/simple.php（或 single-product/add-to-cart 中的任何文件）

Answer 2

要自定义添加到购物车按钮，您只需打开 WordPress 自定义程序。在 WordPress 管理员中转到

1) 外观 -> 自定义并加载自定义程序。

然后在定制器中单击“按钮”->“备用按钮背景色”并设置您的颜色。

2) 按保存并发布即可完成。

Answer 3

可以使用 jQuery 删除样式属性。您需要在主题 style.css 或任何其他地方添加您的 css，以便它在 header 中加载。这是可以粘贴到当前主题functions.php中的代码。

    function ks_footer(){
        ?>
        <script>
            jQuery(function() {
              jQuery('a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart').removeAttr('style'); //3 Red Buttons
              jQuery('.single_add_to_cart_button').removeAttr('style');
            }); //Top Blue Button
        </script>
        <?php
    }
    add_action( 'wp_footer', 'ks_footer' );

Here 是演示该想法的快速 Tryit 编辑器。

Answer 4

您使用的jquery代码有误

您使用的验证码是 <script> jQuery('a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart').removeAttr('style'); }); </script>

将代码替换为

<script> jQuery('a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart').removeAttr('style'); </script>

那就可以了，

如何覆盖 Wordpress inline !important 样式

How to override Wordpress inline !important style

php

wordpress

hook

templates

woocommerce