WooCommerce Brands
link: https://woocommerce.com/it/products/brands/
IMPORTANTE: Il plugin Brands è stato integrato dentro il codice di Woocomerce. Ma comunque le funzioni e gli shortcode son rimasti gli stessi.
Documentazione
- GUIDA WOO BRAND: woocommerce-brands
- WP-Code: per creare il codice e metterlo sul sito, ma va bene anche creare il codice e metterlo in un plugin o il tema. Consiglio di iniziare a usare WP-Code e usarlo PRO. Per le Personalizzazioni diffuse sul sito, usare il plugin è più comodo che caricare via FTP nel Tema o in un plugin.
- CODICI UTILIZZATI: PHP
Scopo del codice: aggiungere il marchio (con nome e link) nella scheda prodotto
Invece di utilizzare lo shortcode fornito da Woo [product_brand width="64px" height="64px" class="alignright"], si crea uno shortcode alternativo che non mostra solo icona immagine con link, ma anche il titolo della sezione.
(un solo brand, se no sarebbero più icone immagini in sequenza)
[1]Primo passo: Creare uno Shortcode Personalizzato
La creazione dello Shortcode è abbastanza semplice, ci sono numerose guide in rete. Qui vi metto semplicemente un esempio terra terra.
Per creare uno shortcode si usa sempre il codice base WordPress:
<?php
// Ricrea elenco dei brand del plugin BRAND - collegati nella scheda prodotto
// Serve per aggiungere il titolo del brand a lato dell'immagine
// Add Shortcode - scrivi questo campo [woo_brand_img_list_prodotto]
//varianti: CON TESTO A LATO: [woo_brand_img_list_prodotto show_name=true] CON TESTO A LATO e IMG dimensioni personalizzate: [woo_brand_img_list_prodotto show_name=true img_size="45px"] TESTO,IMG dimensione,STILE: [woo_brand_img_list_prodotto show_name=true img_size="45px" style_class="style-vertical-box"]
add_shortcode( 'woo_brand_img_list_prodotto', 'wpcode_brand_IMG_listprodotto', 7 );
function wpcode_brand_IMG_listprodotto($atts = array(), $content = null) {
// ATTRIBUTI dello Shortcode__________________________________________________
$atts = shortcode_atts(
array(
'variabile_shortcode' => 'valore_default',
),
$atts,
'woo_brand_img_list_prodotto' //identico al ID shortcode
);
//richiama valore con : $atts['variabile_shortcode'];
//_____________________________________________________
return "questo è lo shortcode di prova - woo_brand_personalizzato - ";
} //end function SHoRTCODE
?>Quando dobbiamo richiamare lo shortcode nella nostra pagina useremo: [woo_brand_img_list_prodotto]
Se volete testare il codice senza errori critici 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.
[2]Secondo passo: Richiamare i dati dalla Taxonomia di Woo Brand
Adesso dobbiamo ricavare i dati della taxonomia ‘product_brand’ (ovvero i termini della lista BRAND) e richiamare quelli associati al prodotto.
Richiamiamo tutti gli elementi della taxonomia salvati o associati al prodotto visualizzato in scheda con wp_get_post_terms($product->get_id(), 'product_brand' ); , poi avremo un array degli elementi con vari valori er con Foreach , andiamo a richiamare il nome (titolo) del termine, il link alla sua pagina e ID dell’immagine che ha associata.
$brand_name = $brand_singolo->name;
$brand_img_id = get_term_meta($brand_singolo->term_id, 'thumbnail_id', true);
$brand_link = get_term_link($brand_singolo->term_id, 'product_brand');Avendo ID immagine associata dobbiamo invece richiamare URL dell’immagine con wp_get_attachment_url(); . Costruiamo un link < a > con immagine, testo e che punti al link termine e lo salviamo in una variabile ($HTML_el), per ogni elemento aggiungerà html in questa variabile. Infine creiamo html da mostrare con la lista degli elementi impostanti in $HTML_el. e facciamo Return.
Ricordiamo di mettere la condizione che esistano termini della taxonomia associati con if ( ! empty($Array_brandLista ) ) {}, altrimenti non elabora nulla.
Infine si conclude con alcune piccole condizioni dello Shortcode impostando gli attributi che si possono aggiungere ($atts) e questi elementi andranno a influenzare il codice.
Modello del codice senza CSS
<?php
// Ricrea elenco dei brand del plugin BRAND - collegati nella scheda prodotto
// Serve per aggiungere il titolo del brand a lato dell'immagine
// Add Shortcode - scrivi questo campo [woo_brand_img_list_prodotto]
//varianti: CON TESTO A LATO: [woo_brand_img_list_prodotto show_name=true] CON TESTO A LATO e IMG dimensioni personalizzate: [woo_brand_img_list_prodotto show_name=true img_size="45px"] TESTO,IMG dimensione,STILE: [woo_brand_img_list_prodotto show_name=true img_size="45px" style_class="style-vertical-box"]
add_shortcode( 'woo_brand_img_list_prodotto', 'wpcode_brand_IMG_listprodotto', 7 );
function wpcode_brand_IMG_listprodotto($atts = array(), $content = null) {
// ATTRIBUTI dello Shortcode__________________________________________________
$atts = shortcode_atts(
array(
'show_name' => true, //false - true , mostra o no le sezioni brand vuote
'img_size' =>'40', //una qualunque dimensione CSS da aggiugnere al tag < img >
'style_class' =>'style-vertical-box', //nessuna classe aggiunta, ma si può mettere per STYLI pre impostati : "style-vertical-box"
),
$atts,
'woo_brand_img_list_prodotto' //identico al ID shortcode
);
//richiama valore con : $atts['show_name'];
//_____________________________________________________
global $product;
$Array_brandLista = wp_get_post_terms($product->get_id(), 'product_brand' );
$HTML_el ='';
if ( ! empty($Array_brandLista ) ) {
foreach ($Array_brandLista as $brand_singolo){
$brand_name = $brand_singolo->name;
$brand_img_id = get_term_meta($brand_singolo->term_id, 'thumbnail_id', true);
$brand_link = get_term_link($brand_singolo->term_id, 'product_brand');
//immagine
if ($brand_img_id) {
$brand_img_url = wp_get_attachment_url($brand_img_id);
$IMAGE = '<img src="'.$brand_img_url.'" alt="'.$brand_name.'" width="'.$atts['img_size'].'" height="'.$atts['img_size'].'" >';
} else { $IMAGE = ''; } // Nessuna immagine trovata
//aggiungi nome se shorcode attributo attivo
if( $atts['show_name'] == true) { $brand_name_html = '<span class="title">' . $brand_name.'</span>'; }
else { $brand_name_html = '';} //l'attributo testo non è nello shortcode
// Stampo codice
$HTML_el .= '<a class="brand" href="'.$brand_link.'" target="_blank">'.$IMAGE.$brand_name_html.'</a>';
}
//----------------------------------
$HTML ='<div class="brand-list'.' '.$atts['style_class'].'">'.$HTML_el .'</div>';
//----------------------------------
} else { return; } // empty($Array_brandLista )
//-------------
return $HTML;
} //end function SHoRTCODE
?>AGGIUNGERE QUESTO SHORTCODE nella pagina per mostrare il risultato: [woo_brand_img_list_prodotto]. Per toglierei l testo ed avere solo le immagini con link mettere: [woo_brand_img_list_prodotto show_name=false], per cambiare la classe dello stile con una propria (si deve ricreare il css) usare [woo_brand_img_list_prodotto style_class="mia-classe-css-scelta"].
Mettiamo il CSS per la struttura grafica
Adesso il nostro codice è completo, ma manca ancora il CSS. Dobbiamo quindi inserire il CSS nel codice del sito, come abbiamo fatto per il codice php.
Si può anche variare lo stile cambiando la classe di stile caricata nello shortcode invece di mettere nulla o aggiungere l’elemento shortcode style_class=”style-vertical-box”, possiamo usare un altro codice tipo “style-horizzontal-box” e cambiare il css variando la classe.
Il seguente codice mostra la struttura verticale dell’esempio grafico qui presentato nella guida.
/* 11.0 BRAND BOX styly (shortcode creato [woo_brand_img_list_prodotto] ) _________*/
/* gli stili sono impostati nello shortcode e sono [woo_brand_img_list_prodotto style_class="style-vertical-box"] ---> "style-vertical-box" */
.style-vertical-box a {
display: flex;
align-items: center;
justify-content: flex-start;
margin: 5px 0;
padding: 5px 0;
border-top: 1px solid #BDBDBD;
}
.style-vertical-box a:hover { background: #f9f9fb;}
.style-vertical-box a:first-child{ border-top:0px; }
.style-vertical-box img {
border: 1px solid #BDBDBD;
width: 34px;
height: auto;
}
.style-vertical-box .title{
margin-left: 10px;
font-size: 0.9em;
line-height: 1.2;
}
.style-vertical-box a:hover .title{ color: var(--awb-custom_color_5); }
/* end 11.0 BRAND BOX styly _________*/Riassunto Grafiche
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
Sostituire template di Plugin predisposti è facile, basta riportarlo sul proprio tema