Come aggiungere la visualizzazione rapida in WooCommerce

Vuoi includere la funzione di visualizzazione rapida nel tuo sito? Scopri come aggiungere e personalizzare un pulsante di visualizzazione rapida sul tuo negozio WooCommerce .

In ogni negozio WooCommerce, i clienti possono vedere informazioni dettagliate sui prodotti nelle pagine dei prodotti. Tuttavia, non possono vedere la descrizione, le variazioni e altre informazioni allegate al prodotto nella pagina predefinita del negozio. Quando gli acquirenti si trovano nella pagina del negozio, devono fare clic sull'immagine del prodotto o sul collegamento per accedere alla pagina del prodotto per visualizzare ulteriori informazioni su quel prodotto. Questo non è l'ideale perché aggiunge un passaggio al processo di acquisto e se i clienti vogliono continuare a sfogliare i tuoi prodotti, devono tornare alla pagina del negozio.

Tuttavia, puoi aggiungere un pulsante di visualizzazione rapida nella pagina del negozio WooCommerce e migliorare l'esperienza degli utenti . In questo modo, gli acquirenti potranno vedere tutte le informazioni su un prodotto senza uscire dalla pagina del negozio. Diamo un'occhiata più da vicino a cosa fa una visualizzazione rapida del pulsante e come aggiungerla al tuo negozio .

Che cos'è un pulsante di visualizzazione rapida?

Un pulsante di visualizzazione rapida consente ai clienti di vedere i dettagli di un prodotto direttamente nella pagina del negozio e senza dover aprire la pagina del prodotto di ogni articolo a cui sono interessati. In questo modo, gli acquirenti possono navigare tra i prodotti dalla pagina del negozio migliorando il esperienza di acquisto. Quando l'utente fa clic sul pulsante di visualizzazione rapida, si aprirà un pop-up che mostra tutte le informazioni rilevanti sul prodotto nella stessa pagina. Non è necessario ricaricare la pagina del negozio o reindirizzare gli utenti a un'altra pagina.

Come aggiungere un pulsante di visualizzazione rapida alla pagina del negozio WooCommerce

Il modo più semplice per aggiungere un pulsante di visualizzazione rapida al tuo negozio è utilizzare un plug-in. Per questa demo, utilizzeremo Direct Checkout, uno dei migliori plugin di checkout per WooCommerce in circolazione. Anche se Direct Checkout ha una versione gratuita, avrai bisogno della versione premium per aggiungere pulsanti di visualizzazione rapida. Puoi scegliere uno qualsiasi dei 3 piani premium che partono da soli 19 USD (pagamento una tantum).

Installazione e attivazione di Direct Checkout

Innanzitutto, installa Checkout diretto. Devi ottenere la versione gratuita da qui e una delle versioni premium da questo link. Tieni presente che devi installare e attivare sia la versione gratuita che quella premium del plug-in per sbloccare la funzione di visualizzazione rapida. Dopo aver installato entrambi, vai su WooCommerce > Pagamento diretto > Archivi e attiva l'opzione del pulsante Aggiungi visualizzazione rapida . In questa sezione puoi anche sostituire il testo predefinito del pulsante Aggiungi al carrello. Tieni presente che ciò non influirà in alcun modo sul comportamento del pulsante di visualizzazione rapida. Questo è tutto! Hai appena aggiunto un pulsante di visualizzazione rapida alla pagina del tuo negozio WooCommerce ! Ecco come appare il pulsante se stai usando il tema StoreFront: E quando fai clic sul pulsante di visualizzazione rapida, il pop-up modale apparirà e avrà un aspetto simile a questo: Tieni presente che tutte le informazioni sul prodotto vengono visualizzate nel pop-up di visualizzazione rapida. È presente anche il pulsante Aggiungi al carrello, che consente ai clienti di aggiungere prodotti ai propri carrelli direttamente dal pop-up. Ora, facciamo un ulteriore passo avanti e vediamo come personalizzare il pulsante di visualizzazione rapida con un po' di CSS.

Come personalizzare la visualizzazione rapida di WooCommerce

In questa sezione imparerai come personalizzare sia il pulsante di visualizzazione rapida che il pop-up modale di visualizzazione rapida utilizzando un po' di CSS . Gli script CSS sono molto utili per molte attività, quindi anche se sei un principiante, vale la pena imparare alcuni concetti CSS di base. Ora, diamo un'occhiata a come personalizzare diversi elementi sia del pulsante di visualizzazione rapida che del popup modale di visualizzazione rapida.

Nota che dovresti incollare i seguenti codici nel file style.css del tema figlio o nella casella CSS aggiuntivo del personalizzatore del tema. Se non hai un tema figlio, puoi dare un'occhiata a questo post per crearne uno o utilizzare uno di questi plugin.

3.1 Modificare il pulsante di visualizzazione rapida

Modifica la larghezza del pulsante di visualizzazione rapida

li.product .qlwcdc_quick_view.button{
width: 40%;
}

Modifica il colore di sfondo

li.product .qlwcdc_quick_view.button{
background: #79b0f7;
}

Modifica il colore dell'icona

li.product .qlwcdc_quick_view.button{
color:red;
}

Aggiungi bordi arrotondati

li.product .qlwcdc_quick_view.button{
border-radius: 5px;
}

Usa un'immagine come pulsante

li.product .qlwcdc_quick_view.button{
width:75px;
content:url('https://pbs.twimg.com/profile_images/476389199621275648/G6c2Zoe__400x400.jpeg');
}

Sostituisci l'icona con il testo

li.product .qlwcdc_quick_view.button{
visibility: hidden;
}
li.product .qlwcdc_quick_view.button:before{
visibility: visible;
content: "quick view text";
color:white;
background:black;
padding:10px;
}

Aggiungi l'effetto al passaggio del mouse

li.product .qlwcdc_quick_view.button:hover{
color:black;
background:yellow;
}

3.2) Modificare il pop-up modale di visualizzazione rapida

Ora, vediamo del codice per personalizzare il pop-up modale di visualizzazione rapida.

Cambia il colore di sfondo

#qlwcdc_quick_view_modal>div>div>div.modal-body{
background:greenyellow;
}

Nascondi meta prodotto

#qlwcdc_quick_view_modal>div>div>div.modal-body>div>div>div .summary .product_meta{
display:none;
}

Nascondi quantità e aggiungi al carrello

#qlwcdc_quick_view_modal>div>div>div.modal-body>div>div>div>div.summary>form.cart{
display:none;
} #qlwcdc_quick_view_modal>div>div>div.modal-body>div>div>div>div.summary>form.cart{
display:none;
} Abbiamo appena dato un'occhiata a diversi script per personalizzare diversi aspetti del pulsante di visualizzazione rapida in WooCommerce. Se vuoi saperne di più su cosa puoi fare con i CSS, dai un'occhiata a questa guida.

Esempi di script CSS

Ora che hai imparato come aggiungere e apportare personalizzazioni di base alla visualizzazione rapida in WooCommerce, facciamo un ulteriore passo avanti. Di seguito troverai tre esempi per modificare il pulsante di visualizzazione rapida e aggiungere un po' di sapore alla pagina del tuo negozio.

Pulsante circolare con icona personalizzata

li.product .qlwcdc_quick_view.button{
visibility: hidden;
}
li.product .qlwcdc_quick_view.button:before{
visibility: visible;
font-style:normal;
font-family: "Font Awesome 5 Free";
content: "\f002";
color:white;
background:black;
padding: 15px;
border-radius:50%;
}

Pulsante di testo con stile

li.product .qlwcdc_quick_view.button{
visibility: hidden;
}
li.product .qlwcdc_quick_view.button:before{
visibility: visible;
font-style:normal;
content: "view";
color:black;
background:#eeeeee;
padding:8px 18px;
border:3px solid brown;
border-radius:15px 3px;
}

Usare un'immagine come pulsante

li.product > a.button.add_to_cart_button{
bottom:30px;
position:relative;
}
li.product .qlwcdc_quick_view.button{
background:transparent;
width:85px;
content:url('https://icons.iconarchive.com/icons/iynque/flurry-extras-9/512/Quick-Look-Droplet-icon.png');
}

Conclusione

Tutto sommato, aggiungendo un pulsante di visualizzazione rapida migliorerai l'esperienza di acquisto dei tuoi clienti. Potranno vedere i dettagli principali del prodotto direttamente nella pagina del negozio senza dover aprire la pagina del prodotto di ogni articolo che vogliono vedere. Il modo più semplice e conveniente per aggiungere un pulsante di visualizzazione rapida in WooCommerce è utilizzare il plug-in Direct Checkout. Questo strumento ti consente di aggiungere il pulsante di visualizzazione rapida nella pagina del negozio in pochi clic. Quindi, se vuoi fare un ulteriore passo avanti e personalizzare sia il pulsante che il pop-up, puoi usare un po' di CSS.

Conosci altri modi per includere un pulsante di visualizzazione rapida nel tuo negozio? Hai avuto problemi seguendo la nostra guida? Facci sapere nella sezione commenti qui sotto e faremo del nostro meglio per aiutarti.

Per ulteriori informazioni su come personalizzare il tuo negozio, ti consigliamo di consultare le seguenti guide:

• Come personalizzare la Pagina del Negozio WooCommerce
• Come personalizzare il pulsante Aggiungi al carrello in WooCommerce
• Modifica la pagina di pagamento di WooCommerce