Lettura: 7,2 minuti
Visite: 0
Lettura: 7,2 minuti
Visite: 0
TAG:
Plugin con cui si interagisce: WooCommerce Brands
link: https://woocommerce.com/it/products/brands/
NOTA IMPORTANTE: WooCommerce Brands è integrato ormai dal 2025 nel codice di Woocomerce, ma i codici rimangono gli stessi
Con Avada è possibile personalizzare la Testata di una pagina con informazioni dedicate. Nel nostro caso, si desidera creare una testata per le pagine di archiviazione dei BRAND. Come le categorie è possibile personalizzare la testata richiamando il nome categoria, la descrizione, ecc.
Risultato da ottenere
Mostrare l’immagine del Brand con l’editor di Avada. Cosa non possibile con i semplici strumenti forniti.
Problema che sussiste
Mentre per le l’immagine delle categoria basta selezionare l’opzione Category Thumbnail tra i richiami del elemento immagine, per l’immagine del plugin Woocomerce Brand questa selezione di opzioni del elemento immagine non va bene; anche usare Feautured Image non funziona . Pertanto risulterà impossibile poter visionare l’immagine del brand.
Per risolvere il problema è necessario richiamare la corretta variabile dell’immagine. Visto che usare GET, VAR Query offerti da Avada tramite il richiamo “Request Parameter“, possiamo sfruttare invece un semplice Shortcode di richiamo dell’immagine. Vediamo come procedere
Procedura
Dovremo effettuare alcuni passaggi: prima di tutto creare uno [shortcode] che andremo a richiamare in Avada; poi in questo richiamare i dati specifici dell’immagine brand.
Creare uno Shortcode
La creazione dello Shortcode è abbastanza semplice, ci sono numerose guide in rete. Qui vi metterò lo shortcode struttura che ho creato.
Come inserire lo shortcode sul sito?
Ci sono molti modi per inserire Codici sul sito web WordPress: dentro functions.php del tema, dentro il codice di un plugin personale, caricandolo tramite plugin appositi. Visto che ormai il mondo gira super veloce e con cambi repentivi è molto più pratico inserire il codice con plugin appositi.
Plugin per inserire condici PHP (ovvero quello che andremo a creare ): WPCode è un plugin ottimo, la versione free è più che sufficente per piccoli lavori e l’interfaccia piacevole. In tutto questo ha l’inserimento di script PHP che non tutti hanno
Shortcode di base – Esempio
Ricordare di impostare la visualizzazione del codice PHP in lato FRONT (su WPCode o simile).
Aggiungiamo la funzione per creare e attivare shortcode in WP: add_shortcode()
Se volete testare il codice senza che errori critici siano visibili ai propri utenti, è consigliato mettere if(is_user_logged_in() ){} prima dei vari codici di prova. RICORDATE DI TOGLIERLO dopo aver concluso i test.
Negli Shortcode si possono aggiungere attributi per personalizzarlo con shortcode_atts(), ma visto che nel nostro cosa non dobbiamo impostare nulla di particolare saltiamo questo elemento nella nostra funzione
<?php
// RICHIAMA IMMAGINE DEL BRAND ELENCATO
// Serve per aggiungere il titolo del brand sotto immagine
// Add Shortcode - scrivi questo campo [woo_brand_img_testata]
add_shortcode( 'woo_brand_img_testata', 'wpcode_brand_IMGcover_shortcode', 7 );
function wpcode_brand_IMGcover_shortcode($atts = array(), $content = null) {
if(is_user_logged_in() ){
// INIZIO SHORTCODE _____________________________________________________
// FINE SHORTCODE _____________________________________________________
} //USER
} //end function SHoRTCODE
Richiamare l’immagine nello shortcode
Adesso che il nostro codice shotcode richiamiamo l’immagine. Come potete notare un richiamo importante è $ID_brand = get_queried_object()->term_id questo richiama l’ID del BRAND (o taxonomia custom) che stiamo visualizzando sulla pagina.
NOTA: Infatti questo codice funzionerà solo ed esclusivamente sulla pagina della Categoria customizzata Brand (che ha come chiave ‘product_brand’). Quindi questo valore lo si chiama solo se si sta sulla pagina in questione. Visto che lo scopo di questa guida è inserire l’immagine proprio nella pagina della categoria brand, il tutto funzionerà. IL resto del codice serve a richiamare l’immagine in questione e il suo id e realizzare un richiamo immagine con diverse informazioni per renderlo anche SEO Friendly.
NOTA: visto che usiamo funzioni Woocommerce, per sicurezza dobbiamo testare che il plugin sia attivo e quindi usiamo function_exists(‘wc_get_image_size’). Se la funzione non esiste il codice smette in quel punto e non avremo errori critici perchè macano le funzioni.
Il codice usato è stato copiato pari passo dalla funzione “function get_brand_thumbnail_image()” presente nel plugin stesso di WooCommerce Brands.
<?php
// RICHIAMA IMMAGINE DEL BRAND ELENCATO
// Serve per aggiungere il titolo del brand sotto immagine
// Add Shortcode - scrivi questo campo [woo_brand_img_testata]
add_shortcode( 'woo_brand_img_testata', 'wpcode_brand_IMGcover_shortcode', 7 );
function wpcode_brand_IMGcover_shortcode($atts = array(), $content = null) {
// INIZIO SHORTCODE _____________________________________________________
//RICHIAMA TERMI ID CORRENTE , per richiamare la immagine corrente
$ID_brand = get_queried_object()->term_id;
// __________________________________________________
$thumbnail_id = get_term_meta( $ID_brand, 'thumbnail_id', true );
//Condizione
if (! function_exists('wc_get_image_size')) { return;}
if ( $thumbnail_id ) {
$image_src = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail' ); //Medium
$image_src = $image_src[0];
$dimensions = wc_get_image_size('thumbnail' );
$image_srcset = function_exists( 'wp_get_attachment_image_srcset' ) ? wp_get_attachment_image_srcset( $thumbnail_id,'thumbnail' ) : false;
$image_sizes = function_exists( 'wp_get_attachment_image_sizes' ) ? wp_get_attachment_image_sizes( $thumbnail_id,'thumbnail' ) : false;
} else {
$image_src = wc_placeholder_img_src();
$dimensions = wc_get_image_size( 'thumbnail' );
$image_srcset = false;
$image_sizes = false;
}
// Add responsive image markup if available.
if ( $image_srcset && $image_sizes ) {
$image = '<img src="' . esc_url( $image_src ) . '" alt="' . esc_attr( $brand->name ) . '" class="brand-thumbnail" width="' . esc_attr( $dimensions['width'] ) . '" height="' . esc_attr( $dimensions['height'] ) . '" srcset="' . esc_attr( $image_srcset ) . '" sizes="' . esc_attr( $image_sizes ) . '" />';
} else {
$image = '<img src="' . esc_url( $image_src ) . '" alt="' . esc_attr( $brand->name ) . '" class="brand-thumbnail" width="' . esc_attr( $dimensions['width'] ) . '" height="' . esc_attr( $dimensions['height'] ) . '" />';
}
// Stampa codice creato sulla pagina _______
return $image;
// end _____________________________________
// FINE SHORTCODE _____________________________________________________
} //end function SHoRTCODE
Inserire l’immagine in Avada e il risultato sarà immagine visibile
L’ultimo passo è inserire l’immagine in Avada. Pertanto sotto l’elemento immagine, nel campo per richiamare la sorgente immagine, selezionare l’opzione SHORTCODE e inserire il nostro appena creato [woo_brand_img_testata].
Puoi inserire lo shortcode nel campo immagine di Avada e come selezione immagine selezionare il contenuto dinamico (i 3 cilindri impilati) e selezionare Shortcode. E’ anche possibile inserire invece che un immagine un campo di testo avada, in questo o inserire direttamente lo shortcode nel testo semplice o usare nuovamente il contenuto dinamico e selezionare shortcode.
Crea uno Shortcode che richiami l'immagine Tassonomia Custom e caricala tramite il tema Avada
Sostituire template di Plugin predisposti è facile, basta riportarlo sul proprio tema
Filtri Categoria di Post Card, con le categorie ordinate in albero e sotto categorie
Scopri come creare Menu in Mobile dentro belle Sidebar
