WooCommerce: metti carrello e pagamento sulla stessa pagina

Pubblicato: 2018-10-17

Questa è la tua guida definitiva, completa di codici brevi, snippet e soluzioni alternative, per saltare completamente la pagina del carrello e avere sia la tabella del carrello che il modulo di pagamento sulla stessa pagina.

Ma prima... perché vorresti farlo? Ebbene, se vendi prodotti ad alto biglietto (cioè in media vendi circa un prodotto per ordine), se vuoi risparmiare un passaggio aggiuntivo (due passaggi convertono meglio di tre: "Aggiungi al carrello" > ~~“Pagina del carrello”~~ > "Pagina di pagamento" - e questa non è scienza missilistica), se il tuo flusso di lavoro personalizzato e gli obiettivi di e-commerce richiedono la gestione del carrello e del pagamento tutti insieme, beh, questo tutorial fa per te.

C'è un mix di shortcode, impostazioni e frammenti di PHP che puoi usare per far funzionare tutto fuori dagli schemi. E fidati, è più facile di quanto pensi.

Mentre molti sviluppatori decidono di trasformare il processo di checkout in un " Multi-Step Checkout " (ehm, non so perché - più passaggi è più probabile che si verifichi un abbandono del carrello), qui vedremo l'esatto opposto.

Allora, come fanno?

Bene, ecco la guida completa, facile e passo passo per mettere Carrello e Cassa sulla stessa pagina . Provalo, esegui alcuni test e monitoraggio di WooCommerce e vedi se converte meglio

Passaggio 1: aggiungi lo shortcode del carrello alla pagina di pagamento

Innanzitutto, devi aggiungere lo shortcode "woocommerce_cart" alla pagina di pagamento. In questo modo stiamo dicendo a WooCommerce che vogliamo avere la tabella del carrello in alto e il modulo di pagamento sotto di esso .

Aggiornamento: 19 ottobre 2018. Nella prima versione di questo tutorial ho suggerito di aggiungere lo shortcode [woocommerce_cart] sopra lo shortcode "woocommerce_checkout" nella pagina Checkout (screenshot). Sfortunatamente questo crea un bug nella "Pagina di ringraziamento" dopo che è stato effettuato un ordine. In effetti, lì viene visualizzato un messaggio "svuota il carrello", poiché il contenuto della pagina di pagamento (che include lo shortcode del carrello) viene visualizzato anche nella pagina di ringraziamento (non so perché!). Quindi dobbiamo trovare un modo per caricare lo shortcode [woocommerce_cart] nella pagina di pagamento MA non nella pagina di ringraziamento. Ecco la soluzione, e sì, è un frammento di PHP pulito.

Frammento PHP: mostra la tabella del carrello sopra il modulo di pagamento nella pagina di pagamento di WooCommerce

/**
 * @snippet       Display Cart @ Checkout Page Only - WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.7
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */ 

add_action( 'woocommerce_before_checkout_form', 'bbloomer_cart_on_checkout_page_only', 5 );

function bbloomer_cart_on_checkout_page_only() {

if ( is_wc_endpoint_url( 'order-received' ) ) return;

echo do_shortcode('[woocommerce_cart]');

}

Con questa piccola modifica, la tua nuova pagina Checkout apparirà come nello screenshot seguente. Nota: se hai dimestichezza con il layout della pagina del carrello, potresti ricordare la sezione "Cart Collaterals" (ad es. " Totali carrello ", dove vengono visualizzati il subtotale, la spedizione e i totali) ... beh, questo viene automaticamente nascosto solo perché tu' ri usando i due codici brevi sulla stessa pagina. Non è meraviglioso?

Carrello e pagamento sulla stessa pagina: Anteprima della pagina di pagamento

Passaggio 2: annullare l'impostazione della pagina del carrello @ Impostazioni WooCommerce (aggiornato per Woo 3.7+)

Probabilmente, la sola modifica dello shortcode è sufficiente per ottenere ciò di cui hai bisogno (Carrello e Cassa nella stessa pagina). Tuttavia, sono necessarie un paio di modifiche nel caso in cui tu voglia davvero farlo bene.

Infatti, se il Checkout viene svuotato (intendo dire che il Carrello viene svuotato nella pagina Checkout), WooCommerce reindirizzerà gli utenti alla pagina del Carrello e visualizzerà il messaggio di carrello vuoto ("Ritorna al Negozio").

Ora, il nostro obiettivo è eliminare completamente la pagina del carrello in modo che gli utenti non la vedano mai.

Aggiornamento: 21/08/2019. Fino a WooCommerce 3.7 era possibile impostare la pagina "Cassa" sia come pagina "Carrello" che come pagina "Cassa". Questo non è più possibile, quindi segui le nuove istruzioni.

Per questo motivo è necessario deselezionare la pagina Carrello (sotto WooCommerce > Impostazioni > Avanzate) – basta cliccare sulla piccola “x” e “Salva modifiche”. Ecco lo screenshot aggiornato da WooCommerce 3.7:

Disimpostazione della pagina Carrello dalle impostazioni di WooCommerce (a partire da WooCommerce 3.7)

Passaggio 3: elimina la pagina del carrello @ pagine di WordPress

Non c'è bisogno di uno screenshot qui.

Ora che la pagina Carrello non è più utile, è il momento di eliminarla dalle pagine di WordPress . I reindirizzamenti sono già attivi e il tuo carrello è già nella pagina di pagamento, quindi non devi preoccuparti.

Vai avanti e metti la pagina del carrello nel cestino!

Passaggio 4 (bonus): reindirizza il checkout vuoto

Quindi c'è una piccola soluzione alternativa nel caso in cui non desideri mostrare una pagina di pagamento vuota se gli utenti vi accedono direttamente o quando la tabella del carrello viene svuotata.

Ad esempio, potresti voler reindirizzare i carrelli vuoti alla home page, o magari alla pagina del negozio (o meglio ancora all'ultimo prodotto visualizzato), in modo che i clienti possano ricominciare a fare acquisti.

Ecco un piccolo frammento per te - un piccolo bonus - in modo da poter reindirizzare la pagina di pagamento vuota alla home page, ad esempio. Provalo!

Frammento di PHP: reindirizza il carrello vuoto @ WooCommerce Checkout con carrello

/**
 * @snippet       Redirect Empty Cart/Checkout - WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @sourcecode    https://businessbloomer.com/?p=80321
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.7
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */ 

add_action( 'template_redirect', 'bbloomer_redirect_empty_cart_checkout_to_home' );

function bbloomer_redirect_empty_cart_checkout_to_home() {
	if ( is_cart() && is_checkout() && 0 == WC()->cart->get_cart_contents_count() && ! is_wc_endpoint_url( 'order-pay' ) && ! is_wc_endpoint_url( 'order-received' ) ) {
		wp_safe_redirect( home_url() );
		exit;
	}
}