Question

我在Wordpress上使用WooCommerce-产品页面上的“添加到购物车”按钮并未更改，因为它具有内联样式：

<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

带有“添加到购物车”按钮的模板文件可能位于wp-content / you-theme / woocommerce / single-product / add-to-cart / simple.php（或单产品/ add-中的任何文件购物车）

Answer 2

可以使用jQuery删除Style属性。您需要在主题style.css或任何其他位置添加css，以便将其加载到标头中。这是可以粘贴到当前主题的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 3

您使用过的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>

然后它将起作用

Answer 4

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

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

然后在定制器中单击“按钮”->“替代按钮背景颜色”并设置颜色。

2）按“保存并发布”即可。

如何重写Wordpress内联！重要样式

4 个答案: