The Single Product

Niche bringt dem Single Product ein neues Layout, indem es eine gestapelte Galerie für den Desktop einführt, den Woocommerce-Breadcrumb verschiebt und die Zusammenfassung Sticky macht. To do this required, guess what some Hook Elements and some CSS.

Breadcrumb

#Hook 1 - Woo Breadcrumb Einzelprodukt

Wie auf der Shop-Seite fügen wir unseren Breadcrumb manuell hinzu. Es wird in die woocommerce_single_product summary und an der Spitze positioniert, indem die Priorität auf 0 (null) gesetzt wird.

.

Anschließend ein wenig Schriftart für die Breadcrumb und Produktmeta stilisieren und ein wenig Platz schaffen:

.product_meta>span,
.woocommerce-breadcrumb {
    text-transform: uppercase;
    font-size: 12px !important;
    font-weight: 500;
}

.woocommerce div.product div.summary .woocommerce-breadcrumb {
    margin-bottom: 40px;
}

Gallery Stack and Sticky Summary

#Hook 2 - Gallery Stack

Unser erster Haken übernimmt das ganze schwere Heben. Lassen Sie uns einen Blick auf den Code werfen:

<div class="woo-sumamry-wrap"><!-- open wrap -->
<div class="woo-gallery-stack hide-on-mobile">
<?php if ( has_post_thumbnail( $product->id ) ) {
    $attachment_ids[0] = get_post_thumbnail_id( $product->id );
    $attachment = wp_get_attachment_image_src($attachment_ids[0], 'full' ); ?>    
    <img src="<?php echo $attachment[0] ; ?>"/>
<?php }	

global $product;
$product_image_ids = $product->get_gallery_image_ids();

foreach( $product_image_ids as $product_image_id ) {
    $image_url = wp_get_attachment_url( $product_image_id );
    echo '<img src="'.$image_url.'">';
}?>
</div>

Zuerst erstellen wir den Wrap

Die erste Zeile des Codes <div class="woo-summary-wrap"><!-- open wrap --> öffnet einen Wickel um die Galerie, die Zusammenfassung und die Registerkarten. Dadurch wird die sticky summary eingeschränkt, da sie sich mit unseren verwandten Produkten in voller Breite überschneidet.

The code savy will notice our woo-summary-wrap doesn't actually close off ie. no </div>. Aber seien Sie nicht alarmiert, alles ist in Ordnung.

Dann erstellen wir den Stack

Der Rest des Codes prüft, ob Thumbnails vorhanden sind, und gibt dann das Hauptfeatured Image aus, gefolgt von einer Schleife, die die anderen Produktbilder enthält.

Der Gallery-Stack verwendet das Bild in voller Größe. Es ist ratsam, Bilder hochzuladen, die dieser Größe entsprechen. Im aktuellen Setup haben wir eine Containerbreite von 1320px. Die Galerie belegt etwa 60% dieser Breite. Das bedeutet, dass das optimale Bild in voller Größe etwa 800px breit ist.

Da es sich um genau dieselben Bilder handelt, die auch im Gallery Carousel ( Magnification ) verwendet werden, gibt es kein doppeltes Laden von Bildern.

#Hook 3 - Close Summary Wrap

Nun, es ist alles im Titel und beendete das Stück Code in unserem ersten Hook.

</div>
<!-- Close gallery wrap -->

CSS Styling, um Elemente auszublenden und Bits sticky zu machen

Das folgende CSS tut also mehrere Dinge:

1. Hide the default Woocommerce Gallery Carousel on Desktop.
2. Erstellt ein 2-spaltiges Raster, um unsere Bilder und unsere Zusammenfassung zu trennen.
3. Fügt etwas Platz ( unterer Rand ) zwischen unseren Bildern hinzu.
4. Stellt unsere Zusammenfassung auf und macht sie sticky.
5. Positioniert den Sale-Sticker über dem Bild.

@media (min-width: 768px) {
    .woocommerce-product-gallery {
        display: none;
    }

    .woo-sumamry-wrap {
        display: grid;
        grid-template-columns: 60% 40%;
        grid-template-rows: auto;
        margin-bottom: 80px;
    }

    .woo-gallery-stack {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .woo-gallery-stack img {
        margin-bottom: 20px;
    }

    .woocommerce-tabs {
        grid-column: 1;
    }

    .woocommerce div.product div.summary {
        grid-column: 2;
        grid-row: 1;
        margin-left: 80px;
        position: -webkit-sticky;
        position: sticky;
        top: 105px;
        bottom: 100px;
        padding-right: 80px;
    }

    .single-product span.onsale {
        position: absolut;
        top: 0;
    }
}

General Styling

Just a little adjustment to the top margin on the pricing:

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product p.price ins {.
    margin-top: 10px;
}