Come disabilitare stili e script WooCommerce nei post di WordPress?

WooCommerce è il plugin WordPress più popolare per la creazione di un negozio online. Poiché proviene dallo stesso sviluppatore di WordPress, funziona perfettamente per supportare le esigenze aziendali di piccole e grandi dimensioni. Tuttavia, il problema si presenta in un modo diverso che WooCommerce ridurrà notevolmente la velocità di caricamento della pagina del tuo sito. L'opzione migliore è disabilitare gli stili e gli script WooCommerce sui post di WordPress che non ti servono. In questo modo, puoi sfruttare la potenza di WooCommerce e caricare rapidamente i post.

Scenario di miglioramento

Il plug-in WooCommerce è pensato per avere un'attività fisica che supporta la spedizione, la tassazione, ecc. Quindi, se hai un negozio di e-commerce completo, non ci sono molti miglioramenti che puoi fare poiché ogni pagina del prodotto sul tuo sito ha bisogno del plug-in. Probabilmente devi utilizzare società di hosting ottimizzate per WooCommerce per accelerare il caricamento delle pagine dei tuoi prodotti. Puoi consultare il nostro articolo su come correggere la bassa velocità di caricamento della pagina con il plug-in WooCommerce.

Tuttavia, in questo articolo discuteremo del diverso scenario che i blogger devono affrontare. Molti blogger utilizzano temi commerciali ottimizzati per il plugin WooCommerce. Pertanto, tenderanno rapidamente a utilizzare il plug-in per vendere prodotti digitali semplici come gli eBook senza conoscere lo scopo previsto del plug-in. Ad esempio, non ha senso utilizzare WooCommerce quando hai 10 pagine di prodotti e 1000 post regolari. Quello che succede in questo caso è che tutti i 1000 post caricheranno i file CSS e JS del plugin WooCommerce riducendo così la velocità complessiva del sito.

Ciò è dovuto al fatto che il plug-in WooCommerce non offre un modo per disabilitare le risorse caricate nelle pagine in cui si intende vendere alcun prodotto. Il motivo è anche ovvio che molti siti hanno il pulsante del carrello nella barra di navigazione in alto, quindi necessitano delle risorse del plug-in per aggiornare dinamicamente i dettagli dell'ordine. Abbiamo spiegato nel nostro precedente articolo sulle chiamate AJAX del carrello e l'impatto sulla velocità di questo. Se volevi davvero usare WooCommerce ma volevi sbarazzarti dei CSS e JS del plug-in su post/pagine regolari, segui una delle opzioni seguenti.

Inoltre, Google PageSpeed ​​Insights ti avviserà di rimuovere CSS e JS non utilizzati sulla pagina, facendo precipitare il punteggio di velocità.

Stili e script di WooCommerce

Controlliamo prima le risorse caricate dal plugin. Puoi semplicemente disabilitare qualsiasi plug-in di memorizzazione nella cache sul tuo sito e controllare il codice sorgente della pagina live. Puoi selezionare il post o la pagina in cui non sono presenti carrello, blocchi WooCommerce o prodotti. Dovrebbe apparire come sotto su Chrome.

Il plugin carica i file CSS/JS da /wp-content/plugins/WooCommerce/assets/ e gli stili di blocco da /wp-content/plugins/WooCommerce/packages/WooCommerce-blocks/build. Poiché la pagina non ha alcun prodotto o carrello che intende vendere un prodotto, tutte le risorse sottostanti sono semplicemente inutili.

Nota: i file sopra sono nella versione 5.7.2 sul tema ventuno. Potresti vedere la versione del plugin installata sul tuo sito e diversi file CSS a seconda della configurazione di WooCommerce del tuo tema. Inoltre, potresti anche vedere caratteri come woocommerce.woff caricati dal plugin.

Disabilita stili e script WooCommerce

Spiegheremo le seguenti opzioni per disabilitare gli stili e gli script di WooCommerce nei post di WordPress che non hanno elementi relativi al prodotto.

• Utilizzo di un plugin premium
• Utilizzo di un plugin gratuito
• Disabilita manualmente le risorse WooCommerce inutilizzate

La parte buona è che WordPress ha plugin per disabilitare CSS e JS inutilizzati sul tuo sito.

Opzione n. 1 – Utilizzo del plug-in Perfmatters Premium

Perfmatters è un plug-in esclusivo che può aiutarti a ottimizzare il plug-in WooCommerce. Il motivo per cui menzioniamo Perfmatters come prima opzione è che puoi disabilitare gli stili e gli script WooCommerce su post/pagine dell'intero sito con pochi clic. Questo è altamente raccomandato per i principianti che non vogliono modificare il codice o passare troppo tempo con plug-in gratuiti. Inoltre, puoi anche utilizzare l'opzione Script Manager in Perfmatters per disabilitare i file CSS e JS inutilizzati per post/pagina.

Il plug-in ti costerà $ 24,95 con aggiornamenti e supporto gratuiti per un anno. Dopo aver installato il plugin attivare la licenza per ricevere gli aggiornamenti.

• Vai al menu "Impostazioni> Perfmatters" e vai alla sezione "Opzioni> Generali".
• Scorri verso il basso e controlla nella sezione "WooCommerce" che dice "Disabilita elementi specifici di WooCommerce".
• Attiva l'opzione "Disabilita script" per disabilitare gli script WooCommerce sull'intero sito ad eccezione delle pagine dei prodotti, del carrello e delle pagine di pagamento.
• Se necessario, puoi anche attivare altre opzioni per disabilitare la frammentazione del carrello, meta box e widget.
• Fai clic sui pulsanti "Salva modifiche" per disabilitare tutti gli script WooCommerce dai post/pagine del tuo sito.

Ora, controlla il codice sorgente del tuo post. Come puoi vedere nello screenshot qui sotto, tutti gli stili e gli script sono disabilitati e viene caricato solo il carattere WooCommerce.

Il plug-in offre anche Script Manager, utile quando si desidera rimuovere gli stili/script per post. Innanzitutto, devi abilitare "Script Manager" nella sezione "Opzioni> Risorse".

Quando modifichi un post, fai clic su "Script Manager" dalla barra di amministrazione in alto e disabilita gli stili e gli script non necessari.

Disabilita tutti gli stili/script di WooCommerce e seleziona "Posizioni" come "Ovunque". Puoi fornire eccezioni come prodotti, categorie di prodotti e tag di prodotto in modo che questi stili/script vengano caricati sulle pagine dei prodotti, se necessario. Altrimenti, puoi disabilitare completamente le risorse WooCommerce sull'intero sito. Salva le tue impostazioni e chiudi Script Manager facendo clic sull'opzione dalla barra di amministrazione.

Ora puoi controllare la fonte per confermare che tutti gli stili e gli script di WooCommerce, inclusi gli stili di blocco, siano stati rimossi tranne il carattere. Se necessario, puoi precaricare il file del carattere nella sezione "Opzioni > Precaricamento" per evitare il problema del precaricamento delle richieste chiave in Google PageSpeed ​​Insights. Ricorda, anche se non utilizzi Script Manager per disabilitare WooCommerce, è necessario quando vuoi disabilitare le risorse da altri plugin come Contact Form 7.

Opzione 2. Utilizzo del plug-in gratuito Asset CleanUp

Se non vuoi utilizzare un plug-in premium, puoi provare Asset CleanUp: plug-in Page Speed ​​Booster. Questo è un plug-in parzialmente gratuito che offre una funzionalità simile come Perfmatters Script Manager.

• Dopo aver installato e attivato il plugin, modifica uno qualsiasi dei tuoi post.
• Il plugin ti mostrerà tutti gli stili e le risorse di WooCommerce caricati nel post in una meta box.
• Scorri verso il basso e fai clic sull'opzione "Controlla tutto" per il plug-in WooCommerce.

• Se disponibile, seleziona l'opzione "Scarica su tutte le pagine del tipo di post "post".

• Fai clic sul pulsante "Aggiorna" per disabilitare tutti gli stili e gli script WooCommerce per i post. Se necessario, puoi fare lo stesso per le pagine per disabilitare le risorse.
• Ora apri uno dei tuoi post e controlla la console degli sviluppatori. Tutti gli stili e gli script di WooCommerce devono essere stati rimossi.

In qualsiasi momento, puoi rimuovere le impostazioni accedendo alla sezione Ripulitura risorse > Modifiche collettive" nella scheda "Post, pagine e tipi di post personalizzati".

Opzione n. 3. Metodo manuale

L'ultima opzione è quella di modificare manualmente il file del tema per disabilitare gli stili e gli script di WooCommerce. Poiché la modifica dei file del tema non è consigliata, puoi scegliere di utilizzare il tema figlio.

• Quando sei nel pannello di amministrazione di WordPress, vai su "Aspetto> Editor di temi".
• Seleziona il tuo tema attivo (o tema figlio) e quindi seleziona il file functions.php.
• Incolla il codice seguente che contiene due parti. Una parte è disabilitare tutti gli stili/script predefiniti e l'altra è disabilitare i blocchi WooCommerce nel frontend.

 /** Disable WooCommerce Styles and Scripts*/ add_action( 'wp_enqueue_scripts', 'dequeue_woocommerce_styles_scripts', 99 ); function dequeue_woocommerce_styles_scripts() { if ( function_exists( 'is_woocommerce' ) ) { if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) { # Styles wp_dequeue_style( 'woocommerce-general' ); wp_dequeue_style( 'woocommerce-layout' ); wp_dequeue_style( 'woocommerce-smallscreen' ); wp_dequeue_style( 'woocommerce_frontend_styles' ); wp_dequeue_style( 'woocommerce_fancybox_styles' ); wp_dequeue_style( 'woocommerce_chosen_styles' ); wp_dequeue_style( 'woocommerce_prettyPhoto_css' ); # Scripts wp_dequeue_script( 'wc_price_slider' ); wp_dequeue_script( 'wc-single-product' ); wp_dequeue_script( 'wc-add-to-cart' ); wp_dequeue_script( 'wc-cart-fragments' ); wp_dequeue_script( 'wc-checkout' ); wp_dequeue_script( 'wc-add-to-cart-variation' ); wp_dequeue_script( 'wc-single-product' ); wp_dequeue_script( 'wc-cart' ); wp_dequeue_script( 'wc-chosen' ); wp_dequeue_script( 'woocommerce' ); wp_dequeue_script( 'prettyPhoto' ); wp_dequeue_script( 'prettyPhoto-init' ); wp_dequeue_script( 'jquery-blockui' ); wp_dequeue_script( 'jquery-placeholder' ); wp_dequeue_script( 'fancybox' ); wp_dequeue_script( 'jqueryui' ); } } } /** Disable WooCommerce Block Styles */ function disable_woocommerce_block_styles() { wp_dequeue_style( 'wc-blocks-style' ); } add_action( 'wp_enqueue_scripts', 'disable_woocommerce_block_styles' );

• Dovrebbe apparire come sotto nell'editor del tema e fare clic sul pulsante "Aggiorna file" per salvare le modifiche.

Controlla il codice sorgente del tuo post per confermare che tutti gli stili e gli script di WooCommerce sono disabilitati. Vedrai solo che il file del font è caricato dal plugin.

Parole finali

Come puoi vedere, ci sono diversi modi per disabilitare gli stili e gli script di WooCommerce. Sebbene l'utilizzo del plug-in premium Perfmatters sia facile, carica separatamente il file di font woocommerce.woff. Il plug-in gratuito e le opzioni manuali ti aiuteranno a sbarazzarti completamente dei rigonfiamenti di WooCommerce nelle pagine in cui non ti servono. Per tutte le opzioni, potrebbe essere necessario controllare attentamente le impostazioni/codice e rivederle periodicamente poiché WooCommerce modifica costantemente la configurazione.