在woocommerce中添加产品后如何删除“添加到购物车”按钮？

Question

在 woo-commerce 中添加产品后，我想删除“添加到购物车”按钮并在其位置显示“查看购物车”。 我该怎么做？ 请给点提示。

Answer 1

我一直在为我的项目实施什么 在function.php中添加以下代码以取消注册添加查看购物车按钮以及添加到购物车按钮的js

wp_deregister_script('wc-add-to-cart');

wp_register_script('wc-add-to-cart', get_stylesheet_directory_uri(). '/js/add-to-cart-multi.js' , array( 'jquery' ), WC_VERSION, TRUE);

wp_enqueue_script('wc-add-to-cart');

现在您需要调整我们已注销的 js，现在我们需要创建一个名为 add-to-cart-multi.js 的新 js 文件

以下代码在这个新创建的文件中

jQuery( function( $ ) {

    // wc_add_to_cart_params is required to continue, ensure the object exists
    if ( typeof wc_add_to_cart_params === 'undefined' )
        return false;

    // Ajax add to cart
    $( document ).on( 'click', '.add_to_cart_button', function(e) {

        // AJAX add to cart request
        var $thisbutton = $( this );

        if ( $thisbutton.is( '.product_type_simple' ) ) {

            if ( ! $thisbutton.attr( 'data-product_id' ) )
                return true;

            $thisbutton.removeClass( 'added' );
            $thisbutton.addClass( 'loading' );

            var data = {
                action: 'woocommerce_add_to_cart',
            };

            $.each( $thisbutton.data(), function( key, value ) {
                data[key] = value;
            });

            // Trigger event
            $( 'body' ).trigger( 'adding_to_cart', [ $thisbutton, data ] );

            // Ajax action
            $.post( wc_add_to_cart_params.ajax_url, data, function( response ) {

                if ( ! response )
                    return;

                var this_page = window.location.toString();

                this_page = this_page.replace( 'add-to-cart', 'added-to-cart' );

                if ( response.error && response.product_url ) {
                    window.location = response.product_url;
                    return;
                }

                // Redirect to cart option
                if ( wc_add_to_cart_params.cart_redirect_after_add === 'yes' ) {

                    window.location = wc_add_to_cart_params.cart_url;
                    return;

                } else {

                    $thisbutton.removeClass( 'loading' );

                    fragments = response.fragments;
                    cart_hash = response.cart_hash;

                    // Block fragments class
                    if ( fragments ) {
                        $.each( fragments, function( key, value ) {
                            $( key ).addClass( 'updating' );
                        });
                    }

                    // Block widgets and fragments
                    $( '.shop_table.cart, .updating, .cart_totals' ).fadeTo( '400', '0.6' ).block({
                        message: null,
                        overlayCSS: {
                            opacity: 0.6
                        }
                    });

                    // Changes button classes
                    $thisbutton.addClass( 'added' );
                    $thisbutton.addClass( 'hide' );
                    // View cart text
                    if ( ! wc_add_to_cart_params.is_cart && $thisbutton.parent().find( '.added_to_cart' ).size() === 0 ) {
                        $thisbutton.after( ' <a href="' + wc_add_to_cart_params.cart_url + '" class="add-cart button added_to_cart wc-forward" title="' +
                            wc_add_to_cart_params.i18n_view_cart + '"><i class="fa fa-shopping-cart"></i></a>' );
                    }

                    // Replace fragments
                    if ( fragments ) {
                        $.each( fragments, function( key, value ) {
                            $( key ).replaceWith( value );
                        });
                    }

                    // Unblock
                    $( '.widget_shopping_cart, .updating' ).stop( true ).css( 'opacity', '1' ).unblock();

                    // Cart page elements
                    $( '.shop_table.cart' ).load( this_page + ' .shop_table.cart:eq(0) > *', function() {

                        $( '.shop_table.cart' ).stop( true ).css( 'opacity', '1' ).unblock();

                        $( 'body' ).trigger( 'cart_page_refreshed' );
                    });

                    $( '.cart_totals' ).load( this_page + ' .cart_totals:eq(0) > *', function() {
                        $( '.cart_totals' ).stop( true ).css( 'opacity', '1' ).unblock();
                    });

                    // Trigger event so themes can refresh other areas
                    $( 'body' ).trigger( 'added_to_cart', [ fragments, cart_hash ] );
                }
            });

            return false;

        }

        return true;
    });

});

在第 77 行我使用代码添加了class="hide"

$thisbutton.addClass( 'hide' );

所以 hide 基本上隐藏了添加到购物车按钮

我认为对代码做了一些修改，但我现在不记得是什么了。

希望对大家有所帮助

Answer 2

在您的主题/子样式上仅使用 CSS 即可轻松工作：

.add_to_cart_button.added {display:none !important;}

Answer 3

我在想做完全相同的事情时偶然发现了这一点，虽然我无法让 js 工作，但我在寻找添加的 .hide 类时确实注意到 woo 添加了一个 .added 类到 '无论如何点击后添加到购物车按钮，因此将以下内容添加到我的主题的 css 文件中就可以很好地完成这项工作。

a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart.added {
    display: none;
}

然后我简单地将“查看购物车”按钮设置为出现在其位置，并使用它来定位它：

a.added_to_cart {
    //do your thing
}

希望对某人有所帮助。