Question

我正在使用divi和woocommerce在一家在线商店中工作。我正在自定义商店页面（产品档案），并添加了一些PHP代码以包括数量选择器，并在每种产品上添加到购物车按钮。

但是，添加到购物车后，“添加”按钮移至数量选择器上方，大概是因为自从其旁边出现“查看篮”以来，它没有剩余空间。

如何使“添加”按钮保持原位并使“查看篮”出现在其他位置？也许是弹出窗口，还是顶部栏中“购物车”图标上的数字？

下面是我添加到子主题“ functions.php”文件中的代码。最后是用于对齐数量选择器和“添加”按钮的CSS。我使用注释将代码分解，以显示每个部分的位置。

//* Add to cart button *//


function dac_add_cart_button () {
    add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_add_to_cart', 10 );
}
add_action( 'after_setup_theme', 'dac_add_cart_button' );


//** Add quantity field on the shop page **//


    function ace_shop_page_add_quantity_field() {
        /** @var WC_Product $product */
        $product = wc_get_product( get_the_ID() );
        if ( ! $product->is_sold_individually() && 'variable' != $product->get_type() && $product->is_purchasable() ) {
            woocommerce_quantity_input( array( 'min_value' => 1, 'max_value' => $product->backorders_allowed() ? '' : $product->get_stock_quantity() ) );
        }
    }
    add_action( 'woocommerce_after_shop_loop_item', 'ace_shop_page_add_quantity_field', 12 );
    /**
     * Add required JavaScript.
     */
    function ace_shop_page_quantity_add_to_cart_handler() {
        wc_enqueue_js( '
            $(".woocommerce .products").on("click", ".quantity input", function() {
                return false;
            });
            $(".woocommerce .products").on("change input", ".quantity .qty", function() {
                var add_to_cart_button = $(this).parents( ".product" ).find(".add_to_cart_button");
                // For AJAX add-to-cart actions
                add_to_cart_button.data("quantity", $(this).val());
                // For non-AJAX add-to-cart actions
                add_to_cart_button.attr("href", "?add-to-cart=" + add_to_cart_button.attr("data-product_id") + "&quantity=" + $(this).val());
            });
            // Trigger on Enter press
            $(".woocommerce .products").on("keypress", ".quantity .qty", function(e) {
                if ((e.which||e.keyCode) === 13) {
                    $( this ).parents(".product").find(".add_to_cart_button").trigger("click");
                }
            });
        ' );
    }
    add_action( 'init', 'ace_shop_page_quantity_add_to_cart_handler' );

    add_filter( 'add_to_cart_text', 'woo_custom_product_add_to_cart_text' );            // < 2.1

//* ADD TO CART TEXT *//

    add_filter( 'woocommerce_product_add_to_cart_text', 'woo_custom_product_add_to_cart_text' );  // 2.1 +

    function woo_custom_product_add_to_cart_text() {

        return __( 'Add', 'woocommerce' );

    }

//** CSS to align quantity and "add" buttons **//

.woocommerce .quantity {
    float: left;
    margin-top: 20px;
    margin-right: -15px;
}

WooCommerce：将购物车按钮和数量选择器添加到商店页面时出现问题（产品档案）

0 个答案: