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.<\/p>\n\n\n\n
Like the Shop page we are manually adding our breadcrumb. It’s hooked into the Then a little font styling for the breadcrumb and product meta and creating a bit of space:<\/p>\n\n\n\n Our first hook does all of the heavy lifting. Let’s take a look at the code:<\/p>\n\n\n\n The first line of code The code savy will notice our 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. <\/p>\n\n\n\n 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.<\/p>\n\n\n\n As these are the exact same images as used in the Gallery Carousel ( Magnification ) there is no double loading of images.<\/p>\n\n\n\n Well it’s all in the title and finished off the piece of code in our first hook.<\/p>\n\n\n\n So the following CSS does several things:<\/p>\n\n\n\n Just a little adjustment to the top margin on the pricing:<\/p>\n\n\n\n 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 … <\/p>\nwoocommerce_single_product summary<\/code> and positioned at the top by setting the priority to 0 (zero).<\/p>\n\n\n\n<?php woocommerce_breadcrumb(); ?><\/code><\/pre>\n\n\n\n.product_meta>span,\n.woocommerce-breadcrumb {\n text-transform: uppercase;\n font-size: 12px !important;\n font-weight: 500;\n}\n\n.woocommerce div.product div.summary .woocommerce-breadcrumb {\n margin-bottom: 40px;\n}<\/code><\/pre>\n\n\n\nGallery Stack and Sticky Summary<\/h2>\n\n\n\n
#Hook 2 – Gallery Stack<\/h3>\n\n\n\n
<div class=\"woo-sumamry-wrap\"><!-- open wrap -->\n<div class=\"woo-gallery-stack hide-on-mobile\">\n<?php if ( has_post_thumbnail( $product->id ) ) {\n $attachment_ids[0] = get_post_thumbnail_id( $product->id );\n $attachment = wp_get_attachment_image_src($attachment_ids[0], 'full' ); ?> \n <img src=\"<?php echo $attachment[0] ; ?>\"\/>\n<?php }\t\n\nglobal $product;\n$product_image_ids = $product->get_gallery_image_ids();\n\nforeach( $product_image_ids as $product_image_id ) {\n $image_url = wp_get_attachment_url( $product_image_id );\n echo '<img src=\"'.$image_url.'\">';\n}?>\n<\/div><\/code><\/pre>\n\n\n\nFirst we create the Wrap<\/h4>\n\n\n\n
<div class=\"woo-summary-wrap\"><!-- open wrap --><\/code> opens a wrap around the gallery, summary and tabs. This is what constrains the sticky summary from overlapping with our full width related products.<\/p>\n\n\n\nwoo-summary-wrap<\/code> doesn’t actually close off ie. no <\/div><\/code>. But don’t be alarmed, everything is ok.<\/p>\n\n\n\nThen we create the Stack<\/h4>\n\n\n\n
#Hook 3 – Close Summary Wrap<\/h3>\n\n\n\n
<\/div>\n<!-- Close gallery wrap --><\/code><\/pre>\n\n\n\nCSS Styling to hide elements and make bits sticky<\/h3>\n\n\n\n
@media (min-width: 768px) {\n .woocommerce-product-gallery {\n display: none;\n }\n\n .woo-sumamry-wrap {\n display: grid;\n grid-template-columns: 60% 40%;\n grid-template-rows: auto;\n margin-bottom: 80px;\n }\n\n .woo-gallery-stack {\n grid-column: 1;\n grid-row: 1 \/ 3;\n }\n\n .woo-gallery-stack img {\n margin-bottom: 20px;\n }\n\n .woocommerce-tabs {\n grid-column: 1;\n }\n\n .woocommerce div.product div.summary {\n grid-column: 2;\n grid-row: 1;\n margin-left: 80px;\n position: -webkit-sticky;\n position: sticky;\n top: 105px;\n bottom: 100px;\n padding-right: 80px;\n }\n\n .single-product span.onsale {\n position: absolute;\n top: 0;\n }\n}<\/code><\/pre>\n\n\n\nGeneral Styling<\/h2>\n\n\n\n
.woocommerce div.product p.price,\n.woocommerce div.product span.price,\n.woocommerce div.product p.price ins {\n margin-top: 10px;\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"