Aggiungere un pulsante "Checkout" aggiuntivo accanto al pulsante "Aggiungi al carrello" nella pagina prodotto WooCommerce

Non è necessario modificare i file del template per questo, puoi invece utilizzare l'hook di WooCommerce woocommerce_after_add_to_cart_button. Questo hook aggiungerà contenuto dopo il pulsante "Aggiungi al carrello".

Se il cliente clicca su questo pulsante, il prodotto dovrebbe essere aggiunto al carrello e il cliente dovrebbe essere reindirizzato alla pagina di checkout, giusto?!

Fondamentalmente puoi aggiungere prodotti al carrello con un link come questo:

http://example.com/cart/?add-to-cart=<product ID>

Quindi, utilizzando l'hook menzionato sopra e tenendo a mente questo URL, possiamo aggiungere un secondo pulsante con questo snippet:

function add_content_after_addtocart() {

    // ottieni l'ID del post/prodotto corrente
    $current_product_id = get_the_ID();

    // ottieni il prodotto basato sull'ID
    $product = wc_get_product( $current_product_id );

    // ottieni l'URL della pagina di checkout
    $checkout_url = WC()->cart->get_checkout_url();

    // esegui solo per prodotti semplici
    if( $product->is_type( 'simple' ) ){
        echo '<a href="'.$checkout_url.'?add-to-cart='.$current_product_id.'" class="single_add_to_cart_button button alt">Checkout</a>';
    }
}
add_action( 'woocommerce_after_add_to_cart_button', 'add_content_after_addtocart' );

Questo aggiungerà un pulsante dopo il normale pulsante "Aggiungi al carrello" nelle pagine dei singoli prodotti. Come puoi vedere, ho anche aggiunto un controllo per verificare se il prodotto corrente è un prodotto semplice o meno. Se vuoi usare questo con le varianti, è più complicato. Con questi prodotti devi generare un URL come:

http://example.com/cart/?add-to-cart=123&variation_id=456&attribute_pa_colour=black

Forse devi anche controllare l'opzione predefinita di WooCommerce Abilita AJAX Aggiungi al carrello (WooCommerce > Prodotti > Visualizzazione). Non l'ho testato con questa impostazione.

Aggiornamento per includere la quantità

Se vuoi aggiungere una quantità, puoi anche aggiungere un parametro all'URL del nostro pulsante, in questo modo:

http://example.com/cart/?add-to-cart=<product ID>&quantity=<number of quantity>

Tuttavia, poiché un cliente può modificare la quantità con il campo di input di WooCommerce, abbiamo bisogno di un modo per ottenere il valore corrente di questo campo.

Quindi abbiamo diverse opzioni qui,

• ascoltare un evento on-change sul campo quantità per aggiornare il nostro URL,

• oppure aggiungere il valore corrente del campo quantità all'URL solo se il nostro pulsante personalizzato viene cliccato.

Il seguente codice utilizza il secondo approccio, solo quando il pulsante viene cliccato il parametro viene aggiunto.

All'interno della funzione if( $product->is_type( 'simple' ) ), prima dell'echo, inserisci questo script:

<script>
    jQuery(function($) {
    <?php /* se il nostro pulsante personalizzato viene cliccato, aggiungi la stringa "&quantity=" e anche il numero della quantità all'URL */ ?>

        // se il nostro pulsante personalizzato viene cliccato
        $(".custom-checkout-btn").on("click", function() {

            // ottieni il valore dell'attributo "href"
            $(this).attr("href", function() {
                // restituisci il valore "href" + la stringa "&quantity=" + il numero della quantità corrente selezionata
                return this.href + '&quantity=' + $('input.qty').val();
            });

        });
    });
    </script>

Non ho incluso i tag di inizio e fine PHP nel codice sopra! Quindi devi terminare PHP prima del (?>) e riavviarlo dopo lo script (