Pojedynczy produkt

Niche wprowadza nowy układ do pojedynczego produktu, wprowadzając ułożoną w stos galerię na pulpicie, przenosi okruszek chleba Woocommerce i sprawia, że podsumowanie jest lepkie. Aby to zrobić, potrzebne były elementy Hook i trochę CSS.

Breadcrumb

#Hook 1 - Woo Breadcrumb Pojedynczy produkt

Podobnie jak w przypadku strony sklepu, ręcznie dodajemy nasz okruszek chleba. Jest on podłączony do podsumowanie woocommerce_single_product i umieszczony na górze poprzez ustawienie priorytetu na 0 (zero).

.

Następnie niewielka stylizacja czcionki dla okruszka nawigacyjnego i meta produktu oraz stworzenie odrobiny przestrzeni:

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

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

Stos galerii i przyklejone podsumowanie

#Hook 2 - Gallery Stack

Nasz pierwszy hak wykonuje całą ciężką pracę. Przyjrzyjmy się kodowi:

<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>

Najpierw tworzymy Wrap

Pierwsza linia kodu <div class="woo-summary-wrap"><!-- open wrap --> otwiera zawijanie wokół galerii, podsumowania i kart. Dzięki temu przyklejone podsumowanie nie nakłada się na produkty powiązane o pełnej szerokości.

Osoby znające się na kodzie zauważą nasze woo-summary-wrap nie zamyka się, tj. nie </div>. Ale nie martw się, wszystko jest w porządku.

Następnie tworzymy stos

Pozostała część kodu sprawdza, czy istnieją miniatury, a następnie wyświetla główny wyróżniony obraz, po którym następuje pętla zawierająca inne obrazy produktów.

Stos galerii wykorzystuje obraz w pełnym rozmiarze. Zaleca się przesyłanie obrazów dopasowanych do tego rozmiaru. W obecnej konfiguracji szerokość kontenera wynosi 1320px. Galeria zajmuje około 60% tej szerokości. Oznacza to, że optymalny obraz w pełnym rozmiarze ma około 800 pikseli szerokości.

Ponieważ są to dokładnie te same obrazy, które są używane w Gallery Carousel (powiększenie), nie ma podwójnego ładowania obrazów.

#Hook 3 - Podsumowanie podsumowujące

Cóż, wszystko jest w tytule i skończyło się na fragmencie kodu w naszym pierwszym haku.

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

Stylizacja CSS do ukrywania elementów i przyklejania bitów

Tak więc poniższy CSS robi kilka rzeczy:

1. Ukryj domyślną karuzelę galerii Woocommerce na pulpicie.
2. Tworzy 2-kolumnową siatkę, aby oddzielić nasze obrazy i podsumowanie.
3. Dodaje trochę miejsca (dolny margines) między naszymi obrazami.
4. Pozycjonuje nasze podsumowanie i sprawia, że jest ono lepkie.
5. Zmienia położenie naklejki sprzedaży na obrazie.

@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: absolute;
        top: 0;
    }
}

Ogólna stylizacja

Wystarczy niewielka korekta górnego marginesu cenowego:

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