Table of Contents
Step2: Add New Snippet
Use the code below
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* How to Add a Quantity Field to Shop Pages in WooCommerce by Thembay */ | |
| function thembay_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() && $product->is_in_stock() ) { | |
| woocommerce_quantity_input( array( 'min_value' => 1, 'max_value' => $product->backorders_allowed() ? '' : $product->get_stock_quantity() ) ); | |
| } | |
| } | |
| add_action( 'woocommerce_after_shop_loop_item', 'thembay_shop_page_add_quantity_field', 1 ); | |
| /** | |
| * Add required JavaScript. | |
| */ | |
| function thembay_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', 'thembay_shop_page_quantity_add_to_cart_handler' ); | |
| function urna_child_tbay_product_layout_style($type) { | |
| return 'v15'; | |
| } | |
| add_filter( 'urna_woo_config_product_layout', 'urna_child_tbay_product_layout_style', 100, 1 ); |
Step3: Add Custom CSS
Use the code below
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .product-block.v15 .add-cart a.added+a.added_to_cart, | |
| .product-block.v15 .add-cart a.added::after, | |
| .product-block.v15 .add-cart a i:before{ | |
| display: none !important; | |
| } | |
| .product-block.v15 .add-cart a.added { | |
| display: block !important; | |
| } | |
| @media (min-width: 768px) { | |
| .product-block.v15 .group-add-cart .quantity, | |
| .product-block.v15 .group-add-cart .add-cart{ | |
| display: inline-block; | |
| } | |
| .product-block.v15 .group-add-cart .quantity button, | |
| .product-block.v15 .group-add-cart .quantity input.qty { | |
| background: transparent; | |
| color: #fff; | |
| line-height: 30px !important; | |
| } | |
| } | |
| @media (max-width: 767px) { | |
| .product-block.v15 .group-add-cart .quantity input.qty { | |
| flex: 9; | |
| } | |
| .product-block.v15 .group-add-cart .quantity button { | |
| width: 40px; | |
| } | |
| } |
