La pagina del checkout è uno degli ultimi steps in cui l’utente finalizza i suoi acquisti cliccando su ” completa l’acquisto”  procedendo al pagamento .

La pagina in questione però, se avessi mai cercato di personalizzarla, avrai notato che non è possibile farlo . Questo perché è una delle pagine protette dal plugin WooCommerce .

In realtà ci sono dei plugin specifici per poter personalizzare la pagina del checkout, ma se quello che cerchi è un metodo per cambiare semplicemente il colore dei pulsanti, possiamo riuscire a farlo tramite CSS.

Cambiare il colore della pagina Checkout di WooCommerce – CSS

Per poter personalizzare la nostra pagina di Woocommerce avremo bisogno di poter inserire il nostro codice di stile personalizzato all’interno del tema che stiamo utilizzando in WordPress.

Il 90% dei temi che di solito sono installati sul nostro WP , hanno la possibilità di inserire il CSS all’interno della sezione personalizza, proprio dove si modificano i dettagli del sito (nella parte frontend ) .

Infatti per questa modifica possiamo possiamo utilizzare la funzione “CSS Aggiuntivo” .

Se il tuo tema non dovesse avere questa funzione, potrai optare per un plugin che ti permetta di farlo come Simple Custo CSS and JS  , come già accennato in qualche articolo precedente .

Adesso che conosci gli strumenti per poter scrivere del codice all’interno del sito in WP , ti basta semplicemente incollare lo snippet che ho preparato per te :

.woocommerce #content input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover {

background:red !important;

background-color:red !important;

color:white !important;

text-shadow: transparent !important;

box-shadow: none;

border-color:#ca0606 !important;

}

.woocommerce #content input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce-page #content input.button:hover, .woocommerce-page #respond input#submit:hover, .woocommerce-page a.button:hover, .woocommerce-page button.button:hover, .woocommerce-page input.button:hover {

background:red !important;

background-color:red !important;

color:white !important;

text-shadow: transparent !important;

box-shadow: none;

border-color:#ca0606 !important;

}

.woocommerce #content input.button, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-page #content input.button, .woocommerce-page #respond input#submit, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button {

background: red !important;

color:white !important;

text-shadow: transparent !important;

border-color:#ca0606 !important;

}

.woocommerce #content input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover {

background: red !important;

box-shadow: none;

text-shadow: transparent !important;

color:white !important;

border-color:#ca0606 !important;

}

Se dovessi aver installato il plugin “Simple Custom Js and CSS dovrai cliccare su “Add Custom CSS nella tua Dashboard” :

Arrivati alla nostra pagina di aggiunta del CSS, possiamo dare un titolo al nostro codice (che in questo esempio ho chiamato Checkout ), cancellare il codice esempio ed inserire il nostro :

Se invece stessi utilizzando la funzione “CSS Aggiuntivo” del tuo tema ( personalizza ) , dovrai semplicemente incollare il codice all’interno .

Finita la procedura , noterai che i pulsanti della tua pagina Checkout saranno diventati rossi . Vuol dire che il nostro codice sta funzionando !

Per poter scegliere il colore più adatto al tuo tema, dovrai sostituire dove leggi “red”, con il tuo codice colore.

Se non conosci il codice del colore principale del tuo tema, potrai utilizzare uno degli strumenti che ti permetta di scoprirlo, come “ColorZilla” , oppure recarti sul sito Color Palette di Adobe per poterne generare uno .

Dove leggi “white” invece, sarà il colore del testo nel pulsante che potrai anch’esso sostituire a tuo piacimento .

Adesso non ti resta che goderti il tuo e-commerce con la pagina del checkout personalizzata !

È stato utile questo articolo ?

Lasciami un commento

L'articolo Colore Pagina Checkout su WooCommerce proviene da Alessandro Albergo.

Un’immagine sul tuo sito web potrebbe diventare popolare e le persone potrebbero iniziare a raggiungere la tua pagina dei media direttamente dalla ricerca di Google.

Ma potrebbe capitare che chi clicca la tua immagine sui motori di ricerca venga reindirizzato sulla tua pagina dei media e non sulla pagina del post di WordPress che contiene quell’immagine.

Se quello che cerchi è un modo che ti permetta di far raggiungere le tue pagine e nascondere la tua pagina dei media, allora sei nel posto giusto !

Come disabilitare la tua pagina dei media sul tuo WordPress

Il modo più semplice è aggiungere uno snippet di codice sul nostro tema di WordPress che ti permetta di creare un redirect sulla pagina che contiene l’immagine o una galleria di immagini trovate su Google.

Creiamo un nuovo file nella cartella del tuo tema in uso di WordPress utilizzando un FTP manager come FileZilla.

Rinominiamo il file con il nome ” image.php “.

PS: Se il tuo tema ha già un file ” image.php” dovrai semplicemente modificarlo.

Dopodiché, tutto ciò che devi fare è aggiungere il seguente codice come prima riga nel file appena creato :

<?php wp_redirect(get_permalink($post->post_parent)); ?>

Adesso non ti resta che salvare il file modificato.

Ora, quando un utente trova un’immagine del tuo sito su Google, cliccandoci sopra verrà reindirizzato al post principale che la contiene.

È stato utile questo articolo ?

Lasciami un commento

L'articolo Pagina dei media WordPress proviene da Alessandro Albergo.

Molti dispositivi ora sono dotati del supporto nativo per la modalità dark. L’aggiunta di una modalità dark al tuo sito web adatta automaticamente il tuo design alle preferenze del browser impostato dall’utente.

In questo articolo, ti mostreremo come aggiungere facilmente la modalità scura al tuo sito web in WordPress sia nela parte frontend che nell’ area di amministrazione (dashboard).

Cos’è la Dark Mode e perché aggiungerla al sito web?

La dark mode viene utilizzata su dispositivi mobili e computer per ridurre la quantità di luce bianca sullo schermo.

Alcuni dispositivi sono dotati di una modalità notturna che utilizza invece tonalità di colori più caldi (lo schermo tendente sul giallo).

Invece la dark mode utilizza un approccio diverso aggiungendo colori scuri sullo sfondo bianco.

Se hai un iPhone o un dispositivo Android, potresti essere in grado di passare alla modalità dark semplicemente utilizzando un interruttore nelle tue impostazioni.

Plugin per la dark Mode sul sito in WordPress

Uno dei plugin che mi è piacito molto, è WP Dark Mode , oltre a darti la possibilità di riconoscere il dispositivo dell’utente impostato su dark-mode e quindi adattare i colori del tuo sito in automatico, fornisce anche un set di pulsanti switch per decidere la modalità di visione (light/dark) :

Quindi l’aggiunta del plugin WP Dark Mode sul tuo sito, offre agli utenti la possibilità di attivare e disattivare le modalità light e dark durante la visualizzazione.

Con la versione pro potrai anche aggiungere la dark mode alla tua Dashboard (utile se lavori sul tuo sito di sera o di notte).

I siti web popolari come YouTube infatti, offrono la combinazione di colori scuri. Ciò consente agli utenti di guardare i video a tarda notte con un’esperienza visiva più confortevole.

Vediamo subito come configurare il nostro plugin Wp Dark Mode su WordPress:

Dopo l’attivazione del plugin sopracitato, vai nel menù della Dashboard e clicca “WP Dark Mode”.

La prima schermata che possiamo notare, sarà quella delle  Impostazioni generali :

Qui, l’impostazione “Abilita modalità scura in base al sistema operativo” (l’ultimo bottone) è già attivata di default.

Ciò significa che i visitatori vedranno automaticamente la versione scura del tuo sito quando il loro dispositivo è impostato in modalità dark.

Anche l’impostazione “Mostra interruttore nel frontend” è già attivata e quindi gli utenti possono potranno cambiare la visualizzazione scura del sito in qualsiasi momento, anche se non hanno abilitato un’opzione dark mode sul proprio dispositivo.

Infatti adesso visitando il tuo sito web, potrai notare il pulsante fluttuante sulla destra, con il quale ogni utente potrà fare un cambio di visualizzazione.

Abbiamo anche la possibilità di scegliere il pulsante e la personalizzazione di colori nella modalità dark (alcuni pulsanti e colori sono attivabili solo per la versione pro) e di scegliere la posizione destra o sinistra del pulsante fluttuante (di default “right bottom” ) :

Finto il settaggio non ci resta che cliccare su “Salva impostazioni” dopo aver terminato le modifiche.

Adesso avrai il tuo sito in WordPress con la modalità Dark Mode pronta per essere utilizzata dagli utenti!

È stato utile questo articolo ? Conoscevi già questo plugin o ne utilizzi altri ?

Lasciami un commento per farmelo sapere 

L'articolo Dark mode al tuo sito WordPress proviene da Alessandro Albergo.

Ultimamente, dopo aver visto alcuni video da cui ho preso ispirazione, ho pubblicato un post su Instagram in cui provavo a replicare il logo di Netflix in codice html e css.

Il risultato finale del logo era davvero molto simile a quello originale del famigerato marchio cinematografico, infatti ne sono rimasto così sodisfatto da creare un video e ora condividere tutto il necessario per poterlo riprodurre.

PS: Per visualizzare il post pubblicato su instagram clicca qui.

Bene, come al solito ho cercato di ridurre tutto in pochi passaggi e rendere la guida facile facile, quindi vediamo subito come creare il codice html e css per riprodurre appunto il logo di Netflix.

Iniziamo con l’html, ti basterà creare un file con il blocco note, inserire bil codice riportato e salvarlo con estensione html (nomefile.html) dentro una cartella:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Netflix Logo</title>
</head>

<body>
    
    <div class="logo">
        <div class="netflix">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <h3>Netflix</h3>
    </div>

</body>

</html>

Adesso all’interno della stessa cartella, creiamo un altro dile chiamato style.css e incolliamoci il seguente codice:

body{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: centet;
    align-items: center;
    background: black;
    height: 100vh;
}

h3{
    color: white;
    position: absolute;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 60px;
    text-transform: uppercase;
    font-family: arial;
    letter-spacing: 12px;
    font-weight: 800;
}

.netflix{
    position: relative;
    width: 350px;
    height: 500px;
}

.netflix span{
    position: absolute;
    top: 0;
    width: 120px;
    height: 100%;
}

.netflix span:nth-child(1){
    background: #b00612;
    left: 0;
}

.netflix span:nth-child(2){
    background: #e50810;
    left: 0;
    transform-origin: top;
    z-index: 1;
    transform: skewX(25deg);
    box-shadow:  0 0 40px rgba(0,0,0,1);
}

.netflix span:nth-child(3){
    background: #b00612;
    right: 0px;

}

Salviamo tutte le modifiche. Ora aprendo il tuo file .html con Chrome o con Firefox, vedrai il logo creato!  Ricordati di lasciare i file in una cartella, altrimenti dovrai cambiare il path del foglio di stile (.css).

Ti è piaciuto questo articolo ?

Lasciami un commento per farmelo sapere

L'articolo Logo Netflix in codice Html e CSS proviene da Alessandro Albergo.