WooCommerce quando si modificano dei campi del Carrello o del Checkout ricalcola mettendo la tabella dati opacizzata. Per aggiungere una grafica di elaborazione con incosa usare il seguente CSS:
Woocommerce imposta nelle Tabelle da ricaricare la classe : .blockUI e .blockOverlay <div class="blockUI blockOverlay" > che disappaiare a fine caricamento. Sono presenti solitamente entrambe le classi. Per modificare la grafica modificare le classi.
Per aggiungere un icona di caricamento impostare l’icona nel :before della classe (qui usiamo le icone Font Awesome). E attivarla con un animazione @keyframes di rotazione costante
CSS Codice per creare icona e lo sfondo
.woocommerce .blockUI.blockOverlay{
background: #101010e3 !important;
}
.woocommerce .blockUI.blockOverlay:before {
position: absolute;
content: "\e4bb";
font-family: "Font Awesome 5 Free";
font-weight: 900;
top: calc( 50% - 2.5vw);
right: calc( 50% - 4vw);
font-size: 8vw;
color: #fffefe;
opacity: 1;
-webkit-animation: rotating_icon_wooblockUI 2s linear infinite;
-moz-animation: rotating_icon_wooblockUI 2s linear infinite;
-ms-animation: rotating_icon_wooblockUI 2s linear infinite;
-o-animation: rotating_icon_wooblockUI 2s linear infinite;
animation: rotating_icon_wooblockUI 2s linear infinite;
}
@media all and (min-width: 801px) and (max-width: 1300px) {
.woocommerce .blockUI.blockOverlay:before { font-size: 12vw; right: calc( 50% - 6vw); }
}
@media all and (min-width: 0px) and (max-width: 800px) {
.woocommerce .blockUI.blockOverlay:before { font-size: 20vw; right: calc( 50% - 10vw);}
}
@-webkit-keyframes rotating_icon_wooblockUI /* Safari and Chrome */ {
from {
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotating_icon_wooblockUI {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* end LOADING carrello e checkout parti WOO*/Come vedere il codice in azione
Ad esempio nella pagina PAGAMENTO, cercare il div: "form-row place-order". Mettere il codice che segue dopo questo DIV. prima che chiuda il div padre "woocommerce-checkout-payment" che lo contiene.
<div class="blockUI" style="display:none"></div>
<div class="blockUI blockOverlay" style="z-index: 1000; border: none; margin: 0px; padding: 0px; width: 100%; height: 100%; top: 0px; left: 0px; background: rgb(255, 255, 255); opacity: 0.6; cursor: default; position: absolute;"></div>
Aggiungi il testo alle icona Brand della scheda prodotto
Pulsante Svuota Carrello con specifico link
Crea un BOX con i costi di spedizione del prodotto
Dove modificare le dimensioni Thumbnails Size di Woocomerce
Spostiamo gli sconti attivi con il plugin, in un TAB woo dedicato.
Crea una galleria video legata al singolo prodotto con ACF plugin
Spostare il nome variante dal titolo alla tabella informativa
Personalizza la grigia di [ product_brand_thumbnails ] con immagini grafiche e nome dei brand