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

121 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

  33. What i do not realize is in fact how you are no longer actually much more wellfavored than you might be right now Youre very intelligent You recognize thus considerably in relation to this topic made me in my view believe it from numerous numerous angles Its like men and women are not fascinated until it is one thing to do with Lady gaga Your own stuffs excellent All the time handle it up

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

  49. dodb buzz 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.

  54. Touch to Unlock You’re so awesome! I don’t believe I have read a single thing like that before. So great to find someone with some original thoughts on this topic. Really.. thank you for starting this up. This website is something that is needed on the internet, someone with a little originality!

  58. Its like you read my mind You appear to know a lot about this like you wrote the book in it or something I think that you could do with some pics to drive the message home a little bit but instead of that this is fantastic blog An excellent read I will certainly be back

  59. Blue Techker 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.

  61. Thinker Pedia 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.

  73. Thank you for your sharing. I am worried that I lack creative ideas. It is your article that makes me full of hope. Thank you. But, I have a question, can you help me?

  86. Thank you for your sharing. I am worried that I lack creative ideas. It is your article that makes me full of hope. Thank you. But, I have a question, can you help me?

  96. Bwer Company is a top supplier of weighbridge truck scales in Iraq, providing a complete range of solutions for accurate vehicle load measurement. Their services cover every aspect of truck scales, from truck scale installation and maintenance to calibration and repair. Bwer Company offers commercial truck scales, industrial truck scales, and axle weighbridge systems, tailored to meet the demands of heavy-duty applications. Bwer Company’s electronic truck scales and digital truck scales incorporate advanced technology, ensuring precise and reliable measurements. Their heavy-duty truck scales are engineered for rugged environments, making them suitable for industries such as logistics, agriculture, and construction. Whether you’re looking for truck scales for sale, rental, or lease, Bwer Company provides flexible options to match your needs, including truck scale parts, accessories, and software for enhanced performance. As trusted truck scale manufacturers, Bwer Company offers certified truck scale calibration services, ensuring compliance with industry standards. Their services include truck scale inspection, certification, and repair services, supporting the long-term reliability of your truck scale systems. With a team of experts, Bwer Company ensures seamless truck scale installation and maintenance, keeping your operations running smoothly. For more information on truck scale prices, installation costs, or to learn about their range of weighbridge truck scales and other products, visit Bwer Company’s website at bwerpipes.com.

Leave a Comment