Come modificare la pagina del negozio WooCommerce (opzioni e personalizzazione)

Essendo una delle pagine WooCommerce standard, la pagina del negozio può avere impostazioni aggiuntive. In questo articolo puoi leggere le nozioni di base sulla pagina del negozio WooCommerce, l'impostazione di funzionalità, opzioni, codici brevi, personalizzazione avanzata e come modificare la pagina.

Sommario

• Modificare la pagina del negozio WooCommerce (nozioni di base)
• Mostrare prodotti e aggiungere codici brevi
• Personalizzazione della pagina del negozio (più opzioni)

Modificare la pagina del negozio WooCommerce (nozioni di base)

Per impostazione predefinita, WooCommerce utilizza la pagina del negozio per mostrare i prodotti.

È abbastanza semplice impostare il layout della pagina (numero di prodotti, colonne) che può dipendere anche dal tema.

Ad esempio, Storefront offre alla pagina del negozio WooCommerce le seguenti opzioni per progettare la pagina.

Andiamo con il processo e i luoghi per impostare la pagina del negozio WooCommerce.

1. Scelta della pagina

   Innanzitutto, puoi controllare la scheda WooCommerce → Impostazioni → Prodotti . Ci sono impostazioni della pagina del negozio WooCommerce incluse alcune che ho scritto nell'ultima parte.
   

   Se non riesci a vedere nessuna pagina, probabilmente dovrai aggiungerne una nel menu Pagine oppure potrebbe essersi verificato un errore durante il recupero delle pagine dal database.

   

   Se utilizzi la pagina esistente con i contenuti, il catalogo prodotti verrà visualizzato dopo il contenuto.

   

2. Impostazioni del catalogo prodotti

   Successivamente, puoi andare su Aspetto → Personalizza e fare clic su WooCommerce → Catalogo prodotti . Potrebbe anche dipendere dal tema (e dalla sua compatibilità con WooCommerce).
   
   Fondamentalmente, le impostazioni si occupano del layout della pagina del negozio, del numero di prodotti da mostrare, delle categorie, dell'ordinamento, della paginazione, dell'ordine dei prodotti e delle colonne.
   
   La personalizzazione influenzerà la forma finale della pagina del negozio WooCommerce.
   

3. Menù

   WordPress ci consente di creare strutture di menu personalizzate. Per aggiungere il collegamento alla pagina del negozio al menu, puoi andare su Aspetto → Menu . C'è anche un'opzione per cambiare il titolo nel menu o aggiungere un'icona/favicon.
   

4. Pagina dello shopping come home page

   È possibile scegliere che la pagina del negozio WooCommerce diventi la home page. In tal caso, probabilmente sarà sufficiente un collegamento nel menu.
   

5. URL della pagina del negozio

   Ogni pagina o post di WordPress ha il suo URL univoco utilizzando lo slug della pagina. Puoi cambiarlo nella schermata di modifica del prodotto o modificando rapidamente la pagina.
   

   Se imposti la pagina del negozio come pagina iniziale, l'URL verrà riscritto nel dominio principale (senza slug).

6. Permalink

   Quando fai clic su alcuni prodotti WooCommerce nel catalogo della pagina del negozio, verrai reindirizzato ai loro URL. È anche possibile impostare la struttura per i collegamenti ai prodotti.
   

7. CSS

   È anche possibile utilizzare i CSS per modificare il design della pagina del negozio. Il codice necessario può essere inserito nel file style.css del tema o tramite Aspetto → Personalizza e inserire il CSS aggiuntivo.
   

   Potrei anche cambiare la larghezza della colonna con i CSS ma penso che WooCommerce si occupi del layout della pagina del prodotto (colonne/prodotti), quindi è meglio usare gli shortcode (più avanti nel post).

8. Widget

   Inoltre, le opzioni del tema possono fornire più opzioni di layout, ad esempio barre laterali in cui è possibile utilizzare widget e codice personalizzato. Nell'articolo utilizzo il layout a larghezza intera di Storefront.
   

Ok, vediamo come potenziare in WooCommerce la pagina standard del negozio con gli shortcode.

Mostrare prodotti e aggiungere codici brevi

Le opzioni predefinite potrebbero essere sufficienti, ma è possibile personalizzare/modificare la pagina del negozio WooCommerce con prodotti, opzioni e categorie aggiuntivi. L'opzione più veloce è utilizzare le opzioni dell'editor di pagina (alcune potrebbero essere fornite con il tema) e gli shortcode WooCommerce.

Shortcode WooCommerce per l'esempio della pagina del prodotto

Come puoi vedere, la pagina del negozio WooCommerce mostrerà prodotti e sezioni extra prima del contenuto.

Inoltre, è possibile modificare la pagina del negozio WooCommerce standard con WooCommerce aggiuntivo e blocchi tematici.

Naturalmente, è bene ricordare che alcuni prodotti potrebbero essere visualizzati più volte.

Personalizzazione della pagina del negozio (più opzioni)

Allontaniamoci dai prodotti visibili e prendiamoci cura del lato funzionale della pagina del negozio WooCommerce.

I prodotti vengono visualizzati con l'immagine, il titolo, il prezzo, le recensioni e i pulsanti Aggiungi al carrello.

1. Reindirizzamento, AJAX, segnaposto

   Torniamo a WooCommerce → Impostazioni → Prodotti . Come puoi vedere, ci sono 3 opzioni importanti da utilizzare:
   

   
   • Reindirizzamento al carrello : questa opzione può essere utilizzata anche per la pagina del negozio WooCommerce.
   • Abilita AJAX per il pulsante Aggiungi al carrello : questa opzione impedisce il ricaricamento della pagina dopo aver aggiunto un prodotto al carrello. Non funzionerà con l'opzione precedente.
   • Immagine segnaposto : scelta dell'ID per l'immagine del prodotto predefinita se il prodotto non ne ha (visibile nell'URL dell'immagine nel menu Media).

2. Personalizzazione dei titoli dei prodotti

   Come ho mostrato sopra, è possibile cambiare il colore del titolo del prodotto. Potrebbe anche essere necessario modificare i titoli sul frontend senza modificare ogni prodotto nel backend con il filtro the_title o il codice personalizzato che modifica la variabile $title.

3. Recensioni dei prodotti

   È possibile mostrare le stelle sotto i titoli dei prodotti: corrispondono alla valutazione media del prodotto.

   

   Le impostazioni per le recensioni dei prodotti si trovano in WooCommerce → Impostazioni → Prodotti .

   

   Puoi leggere ulteriori informazioni sulla disattivazione delle recensioni dei prodotti WooCommerce .

4. Prezzo del prodotto

   Per impostazione predefinita, WooCommerce mostra il prezzo normale e quello scontato sotto il titolo del prodotto.

   

   Per i prodotti variabili, verrà visualizzata la fascia di prezzo.

   

   E c'è un'opzione per decidere come mostrare i prezzi.

   

   Puoi leggere di più sui prodotti WooCommerce .

   Esistono anche plugin aggiuntivi che possono modificare i prezzi dei prodotti.

   Mostra il prezzo più basso

   Ad esempio, WP Desk ha realizzato il plugin per offrire la soluzione per la direttiva Omnibus .

   

   WP Scrivania Omnibus $ 69

   Assicurati che il tuo negozio WooCommerce sia conforme alla Direttiva Omnibus dell'UE e mostri il prezzo del prodotto più basso negli ultimi 30 giorni. Utilizza il plugin WP Omnibus WordPress per soddisfare la nuova Direttiva e guadagnare la fiducia dei clienti.

   Installazioni attive: oltre 1.000 |Ultimo aggiornamento marzo '24

   Aggiungi al carrello o Visualizza dettagli

   Scrivania WP

   Plugin utilizzati da oltre 250.389 negozi

   Ultimo aggiornamento: 2024-03-04

   Funziona con WooCommerce 8.4 - 8.6.x

   Sconti sui prezzi

   È anche possibile impostare sconti sui prodotti che influenzeranno il prezzo nella pagina del prodotto WooCommerce. Ad esempio, i prezzi flessibili possono impostare l'acquisto, ottenere uno sconto gratuito o sconti per intere categorie, ruoli utente o totale dell'ordine.

   Prezzi flessibili WooCommerce $ 79

   I clienti adorano le offerte di vendita e di prezzo. Usa questo! Crea promozioni come Paga uno, prendi uno gratis per ottenere più vendite nel tuo negozio. Il plugin per i prezzi più dinamico per WooCommerce.

   Ultimo aggiornamento novembre '23

   Aggiungi al carrello o Visualizza dettagli

   Scrivania WP

   Plugin utilizzati da oltre 250.389 negozi

   Ultimo aggiornamento: 2024-04-15

   Funziona con WooCommerce 8.5 - 8.8.x

5. Pulsante Aggiungi al carrello

   WooCommerce viene fornito con un titolo generico per il pulsante Aggiungi al carrello. Quindi, come modificare il testo del pulsante? Puoi:

   • cambiare la traduzione (stringa) per il testo aggiungi al carrello,
   • utilizza i filtri woocommerce_product_add_to_cart_text e woocommerce_product_add_to_cart_text per regolare il testo del pulsante,
   • oppure prova il plugin.

   

   Prezzo personalizzato per WooCommerce PRO $ 49

   Lascia che i tuoi clienti paghino ciò che vogliono consentendo loro di nominare i prezzi dei prodotti in WooCommerce. Il nuovo prezzo sarà basato sull'input dell'utente. Utilizza il prezzo personalizzato per donazioni o campagne di marketing!

   Installazioni attive: oltre 2.000 |Valutazione WordPress:

   Aggiungi al carrello o Visualizza dettagli

   Scrivania WP

   Oltre 2.000 installazioni attive

   Ultimo aggiornamento: 2024-05-21

   Funziona con WooCommerce 8.6 - 8.9.x

6. Scegliendo la quantità dalla pagina del negozio

   È possibile aggiungere un solo prodotto per clic sulla pagina del negozio WooCommerce standard. Ma è possibile mostrare il selettore della quantità con un codice personalizzato.

Come puoi vedere, ci sono molte opzioni per impostare la pagina del negozio WooCommerce. Le possibilità sono numerose, inclusa la visualizzazione di più dati, meta personalizzati o elementi grafici. Ma penso che sia più importante offrire buoni prodotti . La vendita di qualcosa di brutto o di nessun valore non può essere mascherata da alcune opzioni, trucchi CSS e design accattivante.

Riepilogo

Hai qualche domanda su come modificare la pagina del negozio WooCommerce? Se hai bisogno di personalizzare WooCommerce, ad esempio i campi della pagina del prodotto o del pagamento, puoi dare un'occhiata ai plugin WP Desk gratuiti .