如何在woo-commerce中添加产品后删除“添加到购物车”按钮?

时间:2014-10-11 14:42:46

标签: woocommerce

在woo-commerce中添加产品后,我想删除添加到购物车按钮并在其位置显示查看购物车。 我怎么做的? 请给出一些提示。

3 个答案:

答案 0 :(得分: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' );

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

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

我希望这有助于某人

答案 1 :(得分:0)

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

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

答案 2 :(得分:-1)

我偶然发现了同样的事情,虽然我无法让js工作,但我在寻找添加.hide类的时候注意到了.added }}类添加到购物车&#39;按钮一旦被点击,所以将以下内容添加到我的主题css文件中就可以很好地完成这项工作。

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

然后,我只是简单地设置了“查看购物车”的样式。按钮出现在其位置,使用它来定位它:

a.added_to_cart {
    //do your thing
}

希望对某人有所帮助。