The Single Product

by

Report published January 1970

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

36,479 thoughts on “The Single Product”

  4. My spouse and I absolutely love your blog and find the majority of your post’s to be what precisely I’m looking for.

    can you offer guest writers to write content for you personally?

    I wouldn’t mind publishing a post or elaborating on a lot of the subjects you write with regards to here.
    Again, awesome site!

    Reply

  5. When I originally commented I seem to have clicked the -Notify me when new comments
    are added- checkbox and now each time a comment is
    added I get 4 emails with the exact same comment.
    Is there a way you can remove me from that service?
    Thanks!

    Reply

  110. Simply desire to say your article is as astonishing.
    The clearness on your put up is just great and that i can assume you are a professional on this subject.
    Well together with your permission allow me to take hold of your RSS feed to stay updated with
    approaching post. Thanks one million and please continue the rewarding
    work.

    Reply

  118. Write more, thats all I have to say. Literally,
    it seems as though you relied on the video to make your point.
    You obviously know what youre talking about, why waste your intelligence on just posting videos to your site when you could
    be giving us something enlightening to read?

    Reply

  195. Hi there would you mind stating which blog platform you’re working
    with? I’m looking to start my own blog in the near future but I’m having a difficult time selecting between BlogEngine/Wordpress/B2evolution and
    Drupal. The reason I ask is because your design seems different then most blogs and I’m looking
    for something unique. P.S Apologies for being off-topic but I
    had to ask!

    Reply

  196. What i do not understood is actually how you’re not really a
    lot more well-preferred than you may be right now.
    You are very intelligent. You realize thus considerably
    in terms of this matter, produced me individually imagine
    it from numerous numerous angles. Its like men and women don’t
    seem to be fascinated unless it’s something to accomplish with
    Woman gaga! Your own stuffs nice. At all times care for it up!

    Reply

  215. One other issue is that if you are in a situation where you do not possess a co-signer then you may want to try to wear out all of your money for college options. You could find many funds and other grants that will give you funding to aid with university expenses. Thank you for the post.

    Reply

  231. It is perfect time to make some plans for the long
    run and it is time to be happy. I have read this post and if I may
    I wish to suggest you some attention-grabbing things or advice.
    Maybe you can write next articles regarding this article.
    I desire to learn even more things approximately it!

    Reply

  238. I’ve been browsing on-line greater than 3 hours today, yet I never found any
    fascinating article like yours. It is pretty price enough for me.
    Personally, if all website owners and bloggers made good content
    as you probably did, the web will probably be a lot more helpful than ever before.

    Reply

  240. Hi there this is somewhat of off topic but I was wondering if blogs use
    WYSIWYG editors or if you have to manually code with HTML.
    I’m starting a blog soon but have no coding experience so I wanted to get guidance
    from someone with experience. Any help would be enormously appreciated!

    Reply

  304. I think what you posted was very reasonable. However,
    what about this? what if you composed a catchier post title?

    I ain’t saying your information is not good., but what
    if you added a title to possibly grab folk’s attention? I mean The Single
    Product – Netcomm Suisse Observatory Portal is a little boring.
    You might look at Yahoo’s front page and see how they write article titles to grab viewers interested.
    You might add a video or a pic or two to grab people excited about what you’ve
    written. Just my opinion, it would bring your website a little
    bit more interesting.

    Reply

  322. Hi, Neat post. There is a problem together with your site in web explorer, may
    test this? IE nonetheless is the market leader and a big section of other
    people will omit your great writing due to this
    problem.

    Reply

  329. I am really loving the theme/design of your web site. Do you
    ever run into any browser compatibility problems?
    A small number of my blog readers have complained about my website not working correctly in Explorer but
    looks great in Safari. Do you have any solutions to help fix
    this issue?

    Reply
  346. Pingback: meritking
  347. Pingback: meritroyalbet
  352. Pingback: meritroyalbet
  355. Pingback: eurocasino

  357. Can I just say what a comfort to uncover an individual who
    truly knows what they’re discussing online.
    You definitely understand how to bring a problem to light and make it important.
    A lot more people must check this out and understand this side of the story.

    I can’t believe you are not more popular because you most certainly have the gift.

    Reply

  375. Can I just say what a comfort to find someone who really understands what they are discussing on the web.

    You definitely know how to bring a problem to light and
    make it important. More and more people should look at this and understand this side of the story.
    I can’t believe you aren’t more popular given that you surely possess the gift.

    Reply

  376. Hi there! I know this is somewhat off-topic but I needed to ask.
    Does building a well-established blog like yours require a massive amount work?

    I’m brand new to operating a blog however I do write
    in my journal on a daily basis. I’d like to start a blog so I can share my personal experience and thoughts online.

    Please let me know if you have any kind of ideas or tips for brand new aspiring bloggers.
    Thankyou!

    Reply
  377. Pingback: meritroyalbet

  379. Fantastic site you have here but I was wondering if you knew of any user discussion forums
    that cover the same topics talked about here?

    I’d really love to be a part of online community where I can get feedback from other knowledgeable individuals that share the same
    interest. If you have any recommendations, please let me know.
    Thank you!

    Reply
  387. Pingback: meritking

  396. Hey there! I know this is kind of off topic but I
    was wondering if you knew where I could locate a captcha plugin for my
    comment form? I’m using the same blog platform as yours and I’m having difficulty finding
    one? Thanks a lot!

    Reply
  404. Pingback: slot siteleri

  405. Please let me know if you’re looking for a article author for
    your site. You have some really good articles and I believe
    I would be a good asset. If you ever want to take some of the load off, I’d love to write some articles for your blog in exchange for a link back to
    mine. Please blast me an e-mail if interested. Thanks!

    Reply

  412. I have been surfing online more than 2 hours today, yet I never
    found any interesting article like yours. It’s pretty worth enough for me.
    In my view, if all web owners and bloggers made good content as you did, the net will be much more useful than ever before.

    Reply

  413. Hey there! Quick question that’s completely off topic.
    Do you know how to make your site mobile friendly? My web site looks weird when browsing from my
    iphone4. I’m trying to find a theme or plugin that might be
    able to resolve this issue. If you have any recommendations,
    please share. Many thanks!

    Reply
  425. Pingback: child porn

  431. Hey There. I found your blog using msn. This is
    an extremely well written article. I’ll make sure to bookmark it and return to read more of your useful information. Thanks for the post.

    I will definitely return.

    Reply
  437. Pingback: child porn
  438. Pingback: elexusbet

  505. I’ve been browsing online more than 4 hours today, yet I never found any
    interesting article like yours. It is pretty worth enough for
    me. In my view, if all site owners and bloggers made good content as you did, the internet will be a lot more useful than ever before.

    Reply

  512. It is the best time to make some plans for the future and it is time to be happy.
    I’ve read this post and if I could I wish to suggest you few interesting things or tips.
    Perhaps you can write next articles referring to this article.

    I wish to read even more things about it!

    Reply
  583. Pingback: madridbet