The Single Product – Erinscraft

Niche brings a new layout to the Single Product by introducing a stacked gallery for desktop, moves the Woocommerce breadcrumb and makes the summary Sticky. To do this required, guess what some Hook Elements and some CSS.

Breadcrumb

#Hook 1 – Woo Breadcrumb Single product

Like the Shop page we are manually adding our breadcrumb. It’s hooked into the woocommerce_single_product summary and positioned at the top by setting the priority to 0 (zero).

<?php woocommerce_breadcrumb(); ?>

Then a little font styling for the breadcrumb and product meta and creating a bit of space:

.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

Our first hook does all of the heavy lifting. Let’s take a look at the code:

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

First we create the Wrap

The first line of code <div class="woo-summary-wrap"> opens a wrap around the gallery, summary and tabs. This is what constrains the sticky summary from overlapping with our full width related products.

The code savy will notice our woo-summary-wrap doesn’t actually close off ie. no </div>. But don’t be alarmed, everything is ok.

Then we create the Stack

The rest of the code checks to see if thumbnails exists and then outputs the main featured image followed by a loop containing the other product images.

The gallery stack uses the full size image. It is advisable to upload images to suit this size. In the current setup we have a container width of 1320px. The gallery occupies around 60% of that width. This means the optimum full size image is around 800px wide.

As these are the exact same images as used in the Gallery Carousel ( Magnification ) there is no double loading of images.

#Hook 3 – Close Summary Wrap

Well it’s all in the title and finished off the piece of code in our first hook.

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

CSS Styling to hide elements and make bits sticky

So the following CSS does several things:

Hide the default Woocommerce Gallery Carousel on Desktop.
Creates a 2 column grid to separate our images and our summary.
Adds some space ( bottom margin ) between our images.
Positions our summary and makes it sticky.
Repositions the Sale sticker over the image.

@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;
    }
}

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