{"id":349,"date":"2019-06-29T01:55:00","date_gmt":"2019-06-29T01:55:00","guid":{"rendered":"https:\/\/gpsites.co\/niche\/?p=349"},"modified":"2019-06-29T01:55:00","modified_gmt":"2019-06-29T01:55:00","slug":"how-the-shop-was-made","status":"publish","type":"post","link":"https:\/\/new.acmestones.com\/index.php\/2019\/06\/29\/how-the-shop-was-made\/","title":{"rendered":"The Shop"},"content":{"rendered":"\n<p>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.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Category Navigation below entry title<\/li><li>Off Canvas Filter Toggle<\/li><li>Repositioned Breadcrumb<\/li><li>Minimal styled shop grid with hover add to cart effect<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Hook Elements<\/h2>\n\n\n\n<p>Niche uses two GeneratePress Hook Elements. You can read the <a href=\"https:\/\/docs.generatepress.com\/article\/hooks-element-overview\/\" target=\"_blank\" rel=\"noopener\">documents for hooks here<\/a>. The shop uses two hook Elements.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Woocommerce Shop Category Menu<\/li><li>Woo Shop Filter and Breadcrumb<\/li><\/ul>\n\n\n\n<p>Both of these elements display rules are set to our Product Archive ( The Shop ) and Product Category Archives.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Hook #1 &#8211; Woocommerce Shop Category Menu<\/h3>\n\n\n\n<p>To aid with navigation across categories our first hook adds  a simple category menu to the <strong>woocommerce_archive_description<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n$orderby = 'name';\n$order = 'asc';\n$hide_empty = true ;\n$cat_args = array(\n    'orderby'    =&gt; $orderby,\n    'order'      =&gt; $order,\n    'hide_empty' =&gt; $hide_empty,\n);\n \n$product_categories = get_terms( 'product_cat', $cat_args );\n \nif( !empty($product_categories) ){\n    echo '\n \n&lt;ul class=\"woo-cat-nav\"&gt;';\n    foreach ($product_categories as $key =&gt; $category) {\n        echo '\n \n&lt;li&gt;';\n        echo '&lt;a href=\"'.get_term_link($category).'\" &gt;';\n        echo $category-&gt;name;\n        echo '&lt;\/a&gt;';\n        echo '&lt;\/li&gt;';\n    }\n    echo '&lt;\/ul&gt;\n \n';\n}\n?&gt;<\/code><\/pre>\n\n\n\n<p>It simply outputs a list of all categories that contain a product. We then use some CSS to style the list:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.woo-cat-nav {\n    list-style-type: none;\n    margin-left: 0;\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    margin-bottom: 80px;\n}\n\n.woo-cat-nav li {\n    padding: 5px 0;\n    margin: 0 10px;\n    border-bottom: 1px solid #ccc;\n    font-size: 0.95em;\n}<\/code><\/pre>\n\n\n\n<p>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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Hook #2 &#8211; Woo Shop Filter and Breadcrumb<\/h3>\n\n\n\n<p>Then we add two functions to <code>woocommerce_before_shop_loop<\/code> hook. First is a custom <a href=\"https:\/\/docs.generatepress.com\/article\/off-canvas-panel-overview\/\" target=\"_blank\" rel=\"noopener\">Off Canvas Panel<\/a> toggle and second is the Woocommerce Breadcrumb. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Woo Shop Filter<\/h4>\n\n\n\n<p>The first function in our hook is some simple HTML:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;span class=\"slideout-toggle woo-filter-toggle hide-on-mobile\"&gt;&lt;a href=\"#\"&gt;FILTER&lt;\/a&gt;&lt;\/span&gt;<\/code><\/pre>\n\n\n\n<p>The <code>&lt;span&gt;<\/code> tag contains three classes. The<code> slideout-toggle<\/code> is what GeneratePress requires to trigger the opening of the off canvas panel. The <code>woo-filter-toggle<\/code> is our own custom class we use to style and position the toggle. And lastly <code>hide-on-mobile<\/code>, i am sure you can figure out what this does.<\/p>\n\n\n\n<p>For our woo filter toggle to appear we have set  Customizer &gt; Layout &gt; Off Canvas Panel to display on Desktop and Mobile.<\/p>\n\n\n\n<p>We now need to remove the toggle from the Primary Navigation on Desktop ( it&#8217;s default location ) we have to hide it using some CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.main-navigation ul li.slideout-toggle {\n    display: none !important;\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Breadcrumb<\/h4>\n\n\n\n<p>Here is our second function to add our breadcrumb inline with our filter toggle:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;span class=\"hide-on-mobile\"&gt;&lt;?php woocommerce_breadcrumb(); ?&gt;&lt;\/span&gt;<\/code><\/pre>\n\n\n\n<p>It uses the default woocommerce function. So as it doesn&#8217;t display twice on the page we disabled the themes breadcrumb position in Customizer &gt; Layout &gt; Woocommerce.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Positioning and styling the filter and breadcrumb<\/h4>\n\n\n\n<p>Positioning and styling our toggle and breadcrumb requires this CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.woo-filter-toggle,\n.woocommerce.archive .woocommerce-breadcrumb {\n    padding: 10px 0;\n    margin-right: 20px;\n    float: left;\n    font-size: 14px;\n    line-height: 20px;\n}<\/code><\/pre>\n\n\n\n<p>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.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.woocommerce .woocommerce-result-count {\n    float: right;\n    margin-right: 20px;\n}\n\n.woocommerce-ordering select {\n    text-transform: uppercase;\n    max-width: 200px;\n    border: 0;\n}<\/code><\/pre>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Custom Post Grid<\/h2>\n\n\n\n<p>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. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Custom CSS<\/h3>\n\n\n\n<p>Lets step through each of the changes:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Reduced grid Gap<\/h4>\n\n\n\n<p>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.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.wc-columns-container .products,\n.woocommerce .related ul.products,\n.woocommerce .up-sells ul.products {\n    grid-gap: 20px;\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Remove Add to Cart button styling<\/h4>\n\n\n\n<p>I wanted a normal looking link for our add to cart by removing the padding and background color. and inheriting the body text color.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.woocommerce ul.products li.product a.button {\n    padding: 5px 0;\n    color: inherit;\n    background-color: transparent;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Show Add to Cart \/ Hide Price on Hover<\/h4>\n\n\n\n<p>For our desktop view we can afford to hide our add to cart. I think it looks better then a page full of buttons. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media (min-width: 768px) {\n\n    .woocommerce ul.products li.product a.button {\n        transform: translateY(0);\n        width: 100%;\n        opacity: 0;\n        transition: all 0.4s;\n    }\n\n    .woocommerce ul.products li.product:hover a.button,\n    .woocommerce ul.products li.product:hover .price {\n        transform: translateY(calc(-100% - 10px));\n        opacity: 1;\n    }\n\n    .woocommerce ul.products li.product .price {\n        opacity: 1;\n        transition: all 0.4s;\n    }\n\n    .woocommerce ul.products li.product:hover .price {\n        opacity: 0;\n        transform: translateY(calc(-100% - 10px));\n    }\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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. Category Navigation &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"The Shop\" class=\"read-more button\" href=\"https:\/\/new.acmestones.com\/index.php\/2019\/06\/29\/how-the-shop-was-made\/#more-349\" aria-label=\"Read more about The Shop\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-349","post","type-post","status-publish","format-standard","hentry","category-uncategorized","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-33"],"_links":{"self":[{"href":"https:\/\/new.acmestones.com\/index.php\/wp-json\/wp\/v2\/posts\/349","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/new.acmestones.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/new.acmestones.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/new.acmestones.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/new.acmestones.com\/index.php\/wp-json\/wp\/v2\/comments?post=349"}],"version-history":[{"count":0,"href":"https:\/\/new.acmestones.com\/index.php\/wp-json\/wp\/v2\/posts\/349\/revisions"}],"wp:attachment":[{"href":"https:\/\/new.acmestones.com\/index.php\/wp-json\/wp\/v2\/media?parent=349"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/new.acmestones.com\/index.php\/wp-json\/wp\/v2\/categories?post=349"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/new.acmestones.com\/index.php\/wp-json\/wp\/v2\/tags?post=349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}