2018-11-08 10:30



I am using WooCommerce on Wordpress - the 'Add to cart' button on the product page has not changed with my updated global styling as it has an inline style:

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

I can't override this with CSS so need to find the code in the template and remove it. When looking through my template I was able to find this in content-single-product.php

<div class="summary entry-summary">
             * 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' );

Where do I find the hook that I need to edit, presumably

* @hooked woocommerce_template_single_add_to_cart - 30
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答


  • dpsfay2510 dpsfay2510 3年前

    There is an error in the jquery code you have been used

    The code you have used is <script> jQuery('a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart').removeAttr('style'); }); </script>

    Replace the code as

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

    Then it will work,

    点赞 评论 复制链接分享
  • doujing4555 doujing4555 3年前

    Style attribute can be removed using jQuery. You need to add your css in theme style.css or any other place so that it gets loaded in header. Here is the code that can be pasted in functions.php of the current theme.

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

    Here is the quick Tryit editor to demonstrate the idea.

    点赞 评论 复制链接分享
  • dongsashe6006 dongsashe6006 3年前

    To customize the add to cart button you just have to open the WordPress customizer. In the WordPress admin go to

    1) Appearance -> Customize and load the customizer.

    Then in the customizer click on Buttons -> Alternate button background color and set your color.

    2) Press Save & Publish and you're done.

    点赞 评论 复制链接分享
  • drdr123456 drdr123456 3年前

    Template file with "add to cart" button is probably located is wp-content/you-theme/woocommerce/single-product/add-to-cart/simple.php (or any file in single-product/add-to-cart)

    点赞 评论 复制链接分享