The Single Product

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

12 bình luận về “The Single Product”

  1. I happen to be writing to make you understand what a terrific experience our princess went through visiting yuor web blog. She realized too many things, with the inclusion of what it is like to possess an incredible teaching style to make the others without hassle thoroughly grasp various tricky topics. You undoubtedly surpassed visitors’ expected results. Thanks for showing those warm and friendly, trustworthy, revealing not to mention unique tips on your topic to Tanya. https://johnpisanohomeimprovements.com/

    Trả lời
  2. I needed to create you one little observation just to say thank you as before for these gorgeous knowledge you’ve discussed here. It has been certainly particularly generous of people like you to convey freely all that a lot of people could possibly have made available as an e book to earn some cash for their own end, especially considering the fact that you could possibly have done it if you ever decided. The guidelines also acted like a fantastic way to be sure that other individuals have similar dreams just like my own to grasp a whole lot more in terms of this issue. I’m sure there are many more fun occasions ahead for individuals that go through your blog post. https://gemerekliler.com/

    Trả lời
  3. I intended to create you a little note just to give thanks as before for all the exceptional guidelines you’ve discussed at this time. It has been certainly incredibly generous of people like you to allow extensively all that a lot of folks could have distributed as an e-book in order to make some bucks for their own end, chiefly considering the fact that you could have done it if you considered necessary. The good ideas additionally acted as the easy way to be certain that most people have a similar dream just like mine to find out a lot more in regard to this condition. I’m certain there are lots of more enjoyable moments ahead for individuals that examine your blog. https://jlsmithjax.com/

    Trả lời
  4. I’m commenting to let you be aware of of the amazing discovery my child developed browsing the blog. She came to find a good number of details, including how it is like to have a great coaching character to get a number of people clearly completely grasp a number of advanced issues. You actually did more than her desires. I appreciate you for churning out such beneficial, dependable, edifying and cool guidance on that topic to Emily. https://lexaproescitalopram.com/

    Trả lời
  5. I am glad for writing to make you know what a nice encounter my wife’s girl had studying your web site. She mastered several pieces, which include what it’s like to possess an awesome helping nature to let other individuals very easily know precisely some problematic subject matter. You truly exceeded people’s expectations. Thank you for presenting these practical, trusted, informative and in addition fun tips about this topic to Kate. https://seroquelquetiapine.com/#

    Trả lời
  6. Thanks for the advice on credit repair on this excellent site. Some tips i would tell people should be to give up this mentality that they may buy currently and fork out later. Being a society many of us tend to make this happen for many issues. This includes vacation trips, furniture, along with items we’d like. However, you’ll want to separate your current wants out of the needs. If you are working to boost your credit score actually you need some trade-offs. For example you’ll be able to shop online to save cash or you can look at second hand merchants instead of high-priced department stores pertaining to clothing. https://zyprexaolanzapine.com/#

    Trả lời
  7. Thanks for the tips on credit repair on all of this blog. What I would advice people is to give up the mentality that they can buy now and pay later. As a society we tend to do this for many things. This includes vacations, furniture, and items we want. However, you need to separate your wants from all the needs. While you are working to improve your credit score you have to make some sacrifices. For example you can shop online to save money or you can go to second hand stores instead of expensive department stores for clothing. https://zyprexaolanzapine.com/#

    Trả lời
  8. I’m also commenting to let you be aware of of the excellent discovery my cousin’s child enjoyed checking your blog. She discovered a wide variety of details, most notably how it is like to have a marvelous coaching heart to get many more easily fully understand certain complicated matters. You actually did more than my desires. I appreciate you for delivering such great, healthy, educational and also cool guidance on that topic to Evelyn. https://seroquelquetiapine.com/#

    Trả lời
  9. I simply wanted to thank you so much once more. I am not sure the things that I would’ve made to happen without the type of smart ideas revealed by you over that situation. It seemed to be an absolute hard issue in my opinion, however , seeing the very specialised strategy you resolved that made me to leap over gladness. I am just happy for this information and then pray you realize what a great job your are undertaking training the rest with the aid of your websites. Probably you haven’t met any of us. https://sinequandoxepin.com/#

    Trả lời
  10. I am also writing to make you know what a impressive encounter my friend’s girl gained reading through your web page. She learned plenty of pieces, which include what it’s like to possess an amazing helping mood to let most people smoothly know several impossible subject matter. You truly exceeded our own expectations. Thank you for offering these invaluable, safe, explanatory and even fun tips about this topic to Julie. https://seroquelquetiapine.com/#

    Trả lời

Viết một bình luận