1

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

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;
}
  • Hi thank you but doesn't work. Do you have other advice? – Sim Taster Jul 21 '19 at 10:18
  • @SimTaster Now, I have updated code so please copy above code and paste into functions.php file and test it again. Here I have tested in website and it's working for me. see this screenshot prntscr.com/oi8mrh – Tanmay Patel Jul 22 '19 at 4:04
0

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...

  • Hi thank you but doesn't work. Do you have other advice? – Sim Taster Jul 21 '19 at 10:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.