Show add to cart button on shop woocommerce

Question

please I would like some help about these 2 options:

1) how could I show add to cart button instead of "VEDI PRODOTTO" (view product) button?

2) how could I display on the left the units (number with "+" and "-") to add for each product with add to cart button on the right?

If you know a plugin or some php code working.

Link: https://erboristerialofficinale.it/shop/

Thank you in advance

S

Answer 1

Point 1: To change "VEDI PRODOTTO" (view product) button instead of "Add to Cart" button on product archives: Put below code in functions.php file.

remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart' );
add_action('woocommerce_after_shop_loop_item', 'add_a_custom_button', 5 );
function add_a_custom_button() {
    global $product;
    if( $product->is_type('variable') || $product->is_type('grouped') ) return;
    echo '<div style="margin-bottom:10px;">
        <a class="button custom-button" href="' . esc_attr( $product->get_permalink() ) . '">' . __('VEDI PRODOTTO') . '</a>
    </div>';
}

Point 2: display on the left the units (number with "+" and "-") to add for each product with add to cart button on the right. Put below code in functions.php file and add CSS code in style.css file.

// 1. Show Buttons

add_action( 'woocommerce_before_add_to_cart_quantity', 'bbloomer_display_quantity_plus' );

function bbloomer_display_quantity_plus() {
   echo '<button type="button" class="plus" >+</button>';
}

add_action( 'woocommerce_after_add_to_cart_quantity', 'bbloomer_display_quantity_minus' );

function bbloomer_display_quantity_minus() {
   echo '<button type="button" class="minus" >-</button>';
}


// 2. Trigger jQuery script

add_action( 'wp_footer', 'bbloomer_add_cart_quantity_plus_minus' );

function bbloomer_add_cart_quantity_plus_minus() {
   // Only run this on the single product page
   if ( ! is_product() ) return;
   ?>
      <script type="text/javascript">

      jQuery(document).ready(function($){   

         $('form.cart').on( 'click', 'button.plus, button.minus', function() {

            // Get current quantity values
            var qty = $( this ).closest( 'form.cart' ).find( '.qty' );
            var val   = parseFloat(qty.val());
            var max = parseFloat(qty.attr( 'max' ));
            var min = parseFloat(qty.attr( 'min' ));
            var step = parseFloat(qty.attr( 'step' ));

            // Change the value if plus or minus
            if ( $( this ).is( '.plus' ) ) {
               if ( max && ( max <= val ) ) {
                  qty.val( max );
               } else {
                  qty.val( val + step );
               }
            } else {
               if ( min && ( min >= val ) ) {
                  qty.val( min );
               } else if ( val > 1 ) {
                  qty.val( val - step );
               }
            }

         });

      });

      </script>
   <?php
}

CSS code

.woocommerce div.product .entry-summary .cart div.quantity{
    float: none;
    margin: 0;
    display: inline-block;
}
.woocommerce div.product form.cart .button {
    vertical-align: middle;
    float: none;
}

Answer 2

Add this code in function.php

function vk_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', 'vk_shop_page_add_quantity_field', 12 );


/**
 * Add required JavaScript.
 */
function vk_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', 'vk_shop_page_quantity_add_to_cart_handler' );

Happy coding...