doctorBaiThis article covers the general styling used across the site. Specific template or element styling may be covered in their own posts. All Custom CSS is in the Customizer > Additional CSS.
Add shadow border to navigation to match sticky navigation.
.main-navigation {
box-shadow: 0 2px 2px -2px rgba(0, 0, 0, .2);
}Add background color to Navigation Search
.navigation-search {
background-color: #fafafa;
}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.
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;
}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>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.
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.
Well it’s all in the title and finished off the piece of code in our first hook.
</div>
<!-- Close gallery wrap -->So the following CSS does several things:
@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;
}
}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;
}The advanced Woocommerce features in GeneratePress Premium 1.8 has allowed my to divulge in some new custom functions and styling. Upon visiting the Shop page you will see several custom elements and styles.
Niche uses two GeneratePress Hook Elements. You can read the documents for hooks here. The shop uses two hook Elements.
Both of these elements display rules are set to our Product Archive ( The Shop ) and Product Category Archives.
To aid with navigation across categories our first hook adds a simple category menu to the woocommerce_archive_description.
<?php
$orderby = 'name';
$order = 'asc';
$hide_empty = true ;
$cat_args = array(
'orderby' => $orderby,
'order' => $order,
'hide_empty' => $hide_empty,
);
$product_categories = get_terms( 'product_cat', $cat_args );
if( !empty($product_categories) ){
echo '
<ul class="woo-cat-nav">';
foreach ($product_categories as $key => $category) {
echo '
<li>';
echo '<a href="'.get_term_link($category).'" >';
echo $category->name;
echo '</a>';
echo '</li>';
}
echo '</ul>
';
}
?>It simply outputs a list of all categories that contain a product. We then use some CSS to style the list:
.woo-cat-nav {
list-style-type: none;
margin-left: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 80px;
}
.woo-cat-nav li {
padding: 5px 0;
margin: 0 10px;
border-bottom: 1px solid #ccc;
font-size: 0.95em;
}As each of the list items are a link they get their colors from the link colors we set in the customizer. Apart from the border color which is within the CSS above.
Then we add two functions to woocommerce_before_shop_loop hook. First is a custom Off Canvas Panel toggle and second is the Woocommerce Breadcrumb.
The first function in our hook is some simple HTML:
<span class="slideout-toggle woo-filter-toggle hide-on-mobile"><a href="#">FILTER</a></span>The <span> tag contains three classes. The slideout-toggle is what GeneratePress requires to trigger the opening of the off canvas panel. The woo-filter-toggle is our own custom class we use to style and position the toggle. And lastly hide-on-mobile, i am sure you can figure out what this does.
For our woo filter toggle to appear we have set Customizer > Layout > Off Canvas Panel to display on Desktop and Mobile.
We now need to remove the toggle from the Primary Navigation on Desktop ( it’s default location ) we have to hide it using some CSS:
.main-navigation ul li.slideout-toggle {
display: none !important;
}Here is our second function to add our breadcrumb inline with our filter toggle:
<span class="hide-on-mobile"><?php woocommerce_breadcrumb(); ?></span>It uses the default woocommerce function. So as it doesn’t display twice on the page we disabled the themes breadcrumb position in Customizer > Layout > Woocommerce.
Positioning and styling our toggle and breadcrumb requires this CSS:
.woo-filter-toggle,
.woocommerce.archive .woocommerce-breadcrumb {
padding: 10px 0;
margin-right: 20px;
float: left;
font-size: 14px;
line-height: 20px;
}To make room for our filter toggle and breacrumb and to keep the styles in line we need a little more CSS. First to shift over the product count and then style the sorting selector.
.woocommerce .woocommerce-result-count {
float: right;
margin-right: 20px;
}
.woocommerce-ordering select {
text-transform: uppercase;
max-width: 200px;
border: 0;
}Most of our shop styling has been set using the Theme customizer, from typograpghy and colors to the layout of our shop and single product page. But to add a little something more unique the obligatory Flint Skin CSS magic has bee applied.
Lets step through each of the changes:
No GeneratePress uses CSS Grid for the shop its super simple to reduce ( or increase ) our grid gap. This is being applied to all responsive sizes.
.wc-columns-container .products,
.woocommerce .related ul.products,
.woocommerce .up-sells ul.products {
grid-gap: 20px;
}I wanted a normal looking link for our add to cart by removing the padding and background color. and inheriting the body text color.
.woocommerce ul.products li.product a.button {
padding: 5px 0;
color: inherit;
background-color: transparent;
}
For our desktop view we can afford to hide our add to cart. I think it looks better then a page full of buttons.
@media (min-width: 768px) {
.woocommerce ul.products li.product a.button {
transform: translateY(0);
width: 100%;
opacity: 0;
transition: all 0.4s;
}
.woocommerce ul.products li.product:hover a.button,
.woocommerce ul.products li.product:hover .price {
transform: translateY(calc(-100% - 10px));
opacity: 1;
}
.woocommerce ul.products li.product .price {
opacity: 1;
transition: all 0.4s;
}
.woocommerce ul.products li.product:hover .price {
opacity: 0;
transform: translateY(calc(-100% - 10px));
}
}The Off Canvas Panel provides more then another place to add your navigation. With Widget Areas and Hooks it can be loaded with extra elements. As covered in the How the Show was made post we have done a little bit of fancy work to create a Shop filter as well as provide our Mobile Navigation.
You should begin by getting to know the panel. Read this for more information.
Widgets are added in the Customizer > Layout > Widgets > Off Canvas Panel or via the Dashboard > Appearance > Widgets. We have used Woocommerce Widgets. These types of widget are dynamic. For example the price and attribute filters only display on the Shop and Archive Pages.
A little bit of CSS to tidy up the Woo Widgets and divide them with some borders:
.slideout-widget.woocommerce ul li {
line-height: 2em;
display: grid;
grid-template-columns: 0 90% 10%;
}
.slideout-navigation .slideout-widget ul.product-categories li {
grid-template-columns: 90% 10%;
}
.slideout-widget {
border-top: 1px solid #ccc;
padding-top: 2em;
}As covered in the Shop article the standard Navigation Toggle for desktop as been hidden as we’re using it for our Filter Widgets.