Oggi vediamo come creare una gallery verticale al posto di quella orizzontate di WooCommerce per rendere la pagina del prodotto differente e non come tutte le altre in circolazione, mantenendo sempre lo standard di WooCommerce e utilizzando il minimo codice indispensabile.
La gallery si presenta in questo modo
Per prima cosa inseriamo il nuovo codice PHP nel vostro file functions.php eliminando quello di default di WooCommerce.
/**
* Gallery woo prodotto singolo
*/
// Rimuovo la galleru di default di Woo
remove_action('woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20);
// Inserisco la galleria personalizzata
function mm_galleria_personalizzata_prodotto_woo() {
?>
<div class="mm-product-gallery-wrapper">
<div class="mm-featured-image">
<?php
global $product;
$post_thumbnail_id = $product->get_image_id();
echo wc_get_gallery_image_html( $post_thumbnail_id, true );
?>
</div>
<div class="mm-product-thumbs-gallery-wrapper">
<?php do_action('woocommerce_product_thumbnails'); ?>
</div>
</div>
<?php
}
add_action( 'woocommerce_before_single_product_summary', 'mm_galleria_personalizzata_prodotto_woo', 20 );E per finire inseriamo anche del codice SCSS (che potete convertire poi in CSS)
/* gallery verticale */
.mm-product-gallery-wrapper {
float: left;
width: 48%;
display: flex;
flex-direction: row-reverse;
.mm-product-thumbs-gallery-wrapper {
margin-right: 20px;
.woocommerce-product-gallery__image {
margin-bottom: 20px;
}
}
}Ed ecco il risultato finale!
