Come creare il pulsante Aggiungi al carrello WooCommerce per ID prodotto

Pubblicato: 2021-02-24

woocommerce aggiungi al carrello pulsante per ID prodotto WiÈ possibile creare il pulsante Aggiungi al carrello WooCommerce per ID prodotto e utilizzare il pulsante su moduli, widget, post o pagine e persino su modelli. Idealmente, il pulsante Aggiungi al carrello di WooCommerce può essere personalizzato per adattarsi a un'ampia gamma di opzioni personalizzate.

WooCommerce Pulsante Aggiungi al carrello per ID prodotto

In un post precedente, ho spiegato come modificare il pulsante Aggiungi al carrello di WooCommerce in un collegamento e anche come modificare il pulsante Aggiungi al carrello di WooCommerce per saperne di più.
Questi sono altri tutorial precedenti che possono aiutarti a saperne di più su come personalizzare il pulsante Aggiungi al carrello di WooCommerce:

  • Come sostituire il pulsante Aggiungi al carrello con Link WooCommerce
  • Come nascondere Leggi di più e Aggiungi al carrello Pulsante WooCommerce
  • Come modificare il testo del pulsante Aggiungi al carrello nella pagina del negozio WooCommerce
  • Come modificare il testo Aggiungi al carrello Guida WooCommerce con esempi
  • Come aggiungere un prodotto al carrello in modo programmatico in WooCommerce
  • Come modificare l'avviso "Aggiunto al carrello" di WooCommerce
  • Come nascondere il prezzo e aggiungere al carrello per gli utenti disconnessi WooCommerce

Come puoi vedere dall'elenco di tutorial sopra, ci sono diversi modi in cui puoi personalizzare il pulsante Aggiungi al carrello di WooCommerce per aiutarti a ottenere layout o design di contenuti diversi.

Ad esempio, quando desideri creare una tabella dei prezzi di WooCommerce, potrebbe essere necessario creare pulsanti di aggiunta al carrello che puoi aggiungere al pulsante di invito all'azione sulla tabella dei prezzi.

WooCommerce Pulsante Aggiungi al carrello per ID prodotto

Crea un prodotto semplice WooCommerce Aggiungi al carrello per ID prodotto

Per creare il pulsante Aggiungi al carrello WooCommerce per ID prodotto devi conoscere l'ID prodotto del prodotto specifico per cui desideri creare il pulsante Aggiungi al carrello. L'ID prodotto può essere trovato facilmente nella pagina di panoramica di tutti i prodotti, come spiegato in questo tutorial su – Come ottenere l'ID prodotto WooCommerce .

Aggiungi al link del carrello

Ora puoi creare l'URL di aggiunta del carrello che non aggiungerai al codice del pulsante nel punto in cui desideri visualizzare il pulsante. In questo caso puoi creare il semplice link Aggiungi al carrello del prodotto come da codice qui sotto:

https://example.com/?add-to-cart=840

L'URL del tuo sito dovrebbe sostituire la parte example.com dell'URL e l'ID prodotto specifico dovrebbe sostituire l'ID prodotto 840 utilizzato nell'esempio sopra.

Puoi aggiungerlo in un codice pulsante HTML come nel codice seguente:

Crea un prodotto semplice con la quantità WooCommerce Aggiungi al carrello per ID prodotto

Puoi anche aggiungere la quantità all'URL di aggiunta al carrello e puoi farlo utilizzando i vari parametri URL utilizzati per aggiungere la logica agli URL.

In questo caso puoi estendere il codice che abbiamo creato nel passaggio precedente e creare un semplice prodotto WooCommerce pulsante aggiungi al carrello per ID prodotto con la quantità di 2 come segue:

https://example.com/?add-to-cart=840&quantity=2

Come puoi vedere abbiamo aggiunto un segno e commerciale e la parola quantità e lo abbiamo equiparato a 2 il numero di articoli che vogliamo aggiungere al carrello quando viene cliccato il pulsante dello stesso prodotto.

Per aggiungere questo URL al codice HTML e creare WooCommerce aggiungi al carrello pulsante per ID prodotto con la quantità è necessario utilizzare il codice seguente:

Crea WooCommerce pulsante Aggiungi al carrello per ID prodotto con Reindirizzamento al carrello

Per rendere più facile per i clienti del tuo negozio WooCommerce navigare nel tuo sito, la creazione di reindirizzamenti è molto importante. In passato ho evidenziato i molti modi per creare reindirizzamenti WooCommerce.

In particolare, ho condiviso su questi post del blog: WooCommerce crea reindirizzamento dopo il checkout e WooCommerce reindirizza dopo il logout e ho persino creato il plug-in WooCommerce redirect dopo il checkout per aiutarti a implementare il reindirizzamento dopo il checkout.

WooCommerce Reindirizzamento al carrello dopo l'aggiunta al carrello

Puoi anche creare un reindirizzamento al carrello con il pulsante Aggiungi al carrello di WooCommerce per ID prodotto. Puoi farlo modificando il codice che ho condiviso nel passaggio precedente in modo che sia il seguente:

https://example.com/cart/?add-to-cart=840

Come puoi vedere, abbiamo aggiunto il carrello all'URL per garantire che l'utente venga reindirizzato al carrello dopo aver aggiunto il prodotto al carrello. Il codice completo con il codice del pulsante HTML è il seguente:

WooCommerce Reindirizzamento alla cassa dopo l'aggiunta al carrello

Puoi anche creare un reindirizzamento alla cassa con il pulsante Aggiungi al carrello di WooCommerce in base all'ID prodotto. Puoi farlo modificando il codice che ho condiviso nel passaggio aggiungendo il checkout sull'URL sopra in modo che sia il seguente:

https://example.com/checkout/?add-to-cart=840

Come vedi, abbiamo aggiunto il checkout all'URL per garantire che l'utente venga reindirizzato al checkout dopo aver aggiunto il prodotto al carrello. Il codice completo con il codice del pulsante HTML è il seguente:



Conclusione

In questo tutorial, abbiamo evidenziato i vari modi in cui puoi creare il pulsante Aggiungi al carrello WooCommerce in base all'ID prodotto. Abbiamo anche visto come aggiungere il reindirizzamento al pulsante Aggiungi al carrello e come aggiungere la quantità del prodotto al pulsante Aggiungi pulsante al carrello.

Spero che ora tu possa creare il pulsante Aggiungi al carrello WooCommerce in base all'ID prodotto e utilizzarlo nella tabella dei prezzi, nei moduli e all'interno dei modelli. Puoi anche personalizzare ulteriormente il pulsante Aggiungi al carrello utilizzando la classe di pulsanti che ho aggiunto al codice sopra. Se stai ancora personalizzando il tuo sito, puoi beneficiare delle idee che ho condiviso su Ultimate WooCommerce Hide Guide.

Per gli utenti WooCommerce che hanno installato il tema Storefront e desiderano personalizzarlo ulteriormente, ho condiviso una brillante raccolta di oltre 80 suggerimenti per la personalizzazione del tema WooCommerce Storefront che ti guideranno su come creare un aspetto personalizzato del tuo sito utilizzando il tema WooCommerce predefinito: Storefront .

Articoli simili

  1. Come creare campi di pagamento condizionali WooCommerce
  2. Come creare uno shortcode di logout per l'accesso a WooCommerce
  3. Come cambiare il tema della vetrina del colore dei pulsanti
  4. Come ottenere il titolo del prodotto WooCommerce
  5. Come nascondere il prezzo e aggiungere al carrello per gli utenti disconnessi WooCommerce
  6. Come nascondere la pagina del carrello di WooCommerce del pulsante di aggiornamento del carrello
  7. Come sostituire il pulsante Aggiungi al carrello con Link WooCommerce
  8. Come nascondere il prezzo se zero in WooCommerce
  9. Come creare un tema figlio WooCommerce Storefront [Guida completa]
  10. Come nascondere l'opzione di amministrazione dell'hub di marketing di WooCommerce
  11. Come ottenere l'ID prodotto nella pagina di pagamento o nella pagina dell'ordine in WooCommerce
  12. Come ottenere i dettagli dell'ordine dopo il checkout in WooCommerce
  13. Come reindirizzare al carrello dopo aver effettuato l'accesso a WooCommerce
  14. Come aggiungere il reindirizzamento della pagina del mio account WooCommerce
  15. Hook di reindirizzamento dell'accesso a WooCommerce spiegato con l'esempio
  16. Come disabilitare temporaneamente il pagamento in WooCommerce
  17. Come configurare il blog WooCommerce Storefront