The Single Product

by

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"><!-- open 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:

  1. Hide the default Woocommerce Gallery Carousel on Desktop.
  2. Creates a 2 column grid to separate our images and our summary.
  3. Adds some space ( bottom margin ) between our images.
  4. Positions our summary and makes it sticky.
  5. 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;
}

32 thoughts on “The Single Product”

  1. Modern Talking был немецким дуэтом, сформированным в 1984 году. Он стал одним из самых ярких представителей евродиско и популярен благодаря своему неповторимому звучанию. Лучшие песни включают “You’re My Heart, You’re My Soul”, “Brother Louie”, “Cheri, Cheri Lady” и “Geronimo’s Cadillac”. Их музыка оставила неизгладимый след в истории поп-музыки, захватывая слушателей своими заразительными мелодиями и запоминающимися текстами. Modern Talking продолжает быть популярным и в наши дни, оставаясь одним из символов эпохи диско. Музыка 2024 года слушать онлайн и скачать бесплатно mp3.

  3. hiI like your writing so much share we be in contact more approximately your article on AOL I need a specialist in this area to resolve my problem Maybe that is you Looking ahead to see you

  5. Hello Neat post Theres an issue together with your site in internet explorer would check this IE still is the marketplace chief and a large element of other folks will leave out your magnificent writing due to this problem

  6. you are truly a just right webmaster The site loading speed is incredible It kind of feels that youre doing any distinctive trick In addition The contents are masterwork you have done a great activity in this matter

  7. Thanks I have recently been looking for info about this subject for a while and yours is the greatest I have discovered so far However what in regards to the bottom line Are you certain in regards to the supply

  10. Ny weekly I’m often to blogging and i really appreciate your content. The article has actually peaks my interest. I’m going to bookmark your web site and maintain checking for brand spanking new information.

  11. Real Estate naturally like your web site however you need to take a look at the spelling on several of your posts. A number of them are rife with spelling problems and I find it very bothersome to tell the truth on the other hand I will surely come again again.

  32. Somebody essentially lend a hand to make significantly articles Id state That is the very first time I frequented your website page and up to now I surprised with the research you made to make this actual submit amazing Wonderful task

Leave a Comment