Come visualizzare i file scaricabili di un prodotto WooCommerce
WooCommerce è uno dei plugin più utilizzati e popolari, per la creazione di siti eCommerce, vista la sua flessibilità e possibilità di vendere ogni tipo di prodotto, sia fisico che digitale.
Grazie a WooCommerce, la vendita di prodotti digitali, come ebook, file audio, immagini o software, risulta abbastanza semplice ed intuitiva, con la possibilità di aggiungere un numero infinito di file all’articolo che stai vendendo.
In questo tutorial, vedremo come visualizzare una tabella contenente i file inclusi di ogni prodotto, direttamente nella scheda dell’articolo.
In questo modo i tuoi clienti potranno sapere in anticipo i file per cui otterranno l’accesso, una volta terminato l’acquisto, senza la necessità di inserire manualmente queste informazioni all’interno della descrizione del prodotto WooCommerce.
Inoltre la tabella si aggiornerà automaticamente, quando inserisci o rimuovi file dal prodotto che stai vendendo.
Per fare questo andremo a sviluppare un plugin molto semplice e leggero per WordPress.
Creazione del plugin WordPress
Crea una cartella all’interno della directory di WordPress wp-content/plugins, usando un nome a tua scelta (per questo tutorial, verrà usato wip-file-scaricabili-woocommerce).
Al suo interno aggiungi il file init.php ed incolla l’intestazione del plugin che trovi di seguito.
/* Plugin Name: WIP file scaricabili WooCommerce Version: 1.0 Plugin URI: https://www.wpinprogress.com/ Description: WIP file scaricabili WooCommerce Author: WPinProgress */
La visualizzazione della tabella verrà gestita grazie al filtro the_content.
Per impedire che la tabella venga inserita in tutti i contenuti di WordPress, è necessario utilizzare il tag condizionale is_product di WooCommerce.
if (!function_exists('wip_lista_file')) {
add_filter('the_content', 'wip_lista_file');
function wip_lista_file($content) {
if (is_product()) {
global $product;
Sarà presente un secondo controllo per verificare se il prodotto in questione è un prodotto scaricabile, in caso affermativo, verranno recuperati tutti i file aggiunti al prodotto, usando get_downloads().
if ($product->is_downloadable()) {
$downloads = $product->get_downloads();
if (!empty($downloads)) {
Ora procediamo ad aggiungere un titolo per la sezione (ad esempio File inclusi), insieme all’intestazione della tabella, con le voci Nome file, Formato file e Dimensione file.
$files_html = '<h3>File inclusi:</h3>';
$files_html .= '<div class="downloadable-files">';
$files_html .= '<section>';
$files_html .= '<span><strong>Nome file</strong></span>';
$files_html .= '<span><strong>Formato file</strong></span>';
$files_html .= '<span><strong>Dimensione file</strong></span>';
$files_html .= '</section>';
A questo punto, usando un loop foreach, andremo ad elaborare ogni file assegnato al prodotto WooCommerce, recuperandone nome, formato e dimensione
foreach ($downloads as $download) {
$files_html .= '<section>';
$file_url = esc_url($download['file']);
$file_name = esc_html($download['name']);
$file_path = parse_url($file_url, PHP_URL_PATH);
$file_extension = pathinfo($file_path, PATHINFO_EXTENSION);
/* Recuperiamo la grandezza del file */
$file_size = '';
if (strpos($file_url, home_url()) !== false) {
$local_path = ABSPATH . str_replace(home_url('/'), '', $file_url);
if (file_exists($local_path)) {
$file_size_bytes = filesize($local_path);
$file_size = size_format($file_size_bytes);
}
}
$files_html .= '<span>' . $file_name . '</span>';
if ($file_extension || $file_size) {
if ($file_extension) {
$files_html .= '<span>' . strtoupper($file_extension) . '</span>';
}
if ($file_size) {
$files_html .= '<span>' . $file_size . '</span>';
}
}
$files_html .= '</section>';
}
$files_html .= '</div>';
$content .= $files_html;
}
}
}
return $content;
}
}
Per migliorare l’aspetto della tabella, dovrai includere un foglio di stile, usando la funzione wp_enqueue_style.
if (!function_exists('wip_lista_file_enqueue_scripts')) {
function wip_lista_file_enqueue_scripts() {
wp_enqueue_style (
'wpc_style',
plugins_url('/css/style.css',
__FILE__ ),
array(),
null
);
}
add_action('wp_enqueue_scripts', 'wip_lista_file_enqueue_scripts' );
}
?>
Crea la cartella css nella directory del plugin ed aggiungi, al suo interno, il file style.css, in cui dovrai aggiungere il seguente codice CSS
.downloadable-files {
padding:5px;
border:solid 1px #f1f1f1;
}
.downloadable-files section {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
}
.downloadable-files section span {
padding: 5px;
}
.downloadable-files section:nth-child(even) {
background:#f1f1f1;
}
.downloadable-files h3 {
margin-top: 20px;
font-size: 18px;
color: #333;
}
@media screen and (min-width : 0px) and (max-width : 768px) {
.downloadable-files span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-rendering: optimizeLegibility;
}
}
Conclusione
Una volta attivato il plugin, dovresti visualizzare una tabella simile alla seguente, alla fine di ogni prodotto scaricabile di WooCommerce.
Per qualsiasi domanda lascia pure un commento, ti risponderò il prima possibile.