{"id":2810,"date":"2019-02-12T13:49:39","date_gmt":"2019-02-12T13:49:39","guid":{"rendered":"https:\/\/gpsites.co\/merch\/?p=2810"},"modified":"2019-02-12T13:49:39","modified_gmt":"2019-02-12T13:49:39","slug":"woocommerce","status":"publish","type":"post","link":"https:\/\/notalotofspace.com\/?p=2810","title":{"rendered":"WooCommerce"},"content":{"rendered":"\r\n<p>WooCommerce just got even simpler with GeneratePress Premium 1.8 . It wouldn&#8217;t be a Flint Skin site of course if there wasn&#8217;t a little CSS and some Custom functions. But the vast majority of what you see is styled through the Customizer. <\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Woo Shop Page<\/h2>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">New GP Premium 1.8 Features<\/h3>\r\n\r\n\r\n\r\n<ul><li><strong>Display mini cart sub-menu<\/strong><br>No more need for a plugin with this beautiful min cart shown when hovering the nav cart icon<\/li><li>M<strong>enu Item Content<\/strong><br>Choice between Amount and Number of Items. I have chosen the latter<\/li><li><strong>Display cart panel on add to cart<\/strong><br>Replacing the standard WooCommerce add to cart notification with a great slide out panel.<\/li><\/ul>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Shop Page Product &#8211; add to cart ( desktop )<\/h3>\r\n\r\n\r\n\r\n<p>Using a little CSS to create a show \/ hide on hover effect. This uses some CSS which you can find in the Customizer &gt; Additional CSS. It looks like this:<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>.woocommerce ul.products li.product {\r\n    overflow: hidden;\r\n}\r\n\r\n.woocommerce ul.products li.product:hover .button {\r\n    -webkit-transform: translatey(0) !important;\r\n    transform: translatey(0) !important;\r\n}\r\n\r\n.woocommerce ul.products li.product .button {\r\n    font-size: 12px;\r\n    line-height: 15px;\r\n    padding: 8px 12px;\r\n    min-height: 15px;\r\n    font-weight: bold;\r\n    text-transform: uppercase;\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n    .woocommerce ul.products li.product .button {\r\n        position: absolute;\r\n        top: 0;\r\n        -webkit-transform: translatey(-150%);\r\n        transform: translatey(-150%);\r\n        -webkit-transition: 0.35s;\r\n        transition: 0.35s;\r\n        margin-top: 10px;\r\n        margin-left: 10px !important;\r\n    }\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<p>The radius corners have been added using the Button CSS which is covered in the Styling Guide.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Sale Badge<\/h3>\r\n\r\n\r\n\r\n<p>To compliment the positioning and rounded corners of the add to cart I used this CSS:<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>.woocommerce span.onsale {\r\n    position: absolute;\r\n    margin: 10px !important;\r\n    border-radius: 4px !important;\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">WooCommerce Sidebars &#8211; Common<\/h2>\r\n\r\n\r\n\r\n<p>The Site uses the standard right hand sidebar, packed full of WooCommerce widgets. There is of course some CSS to add the borders, adjust padding &amp; margins.  It looks like this:<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>@media (min-width: 768px) {\r\n    #right-sidebar {\r\n        border-left: 1px solid #d6d7d8;\r\n    }\r\n\r\n    #right-sidebar .widget {\r\n        margin-bottom: 0;\r\n    }\r\n\r\n    #right-sidebar aside:first-child {\r\n        padding-top: 0;\r\n    }\r\n\r\n    #right-sidebar aside:not(:first-child) {\r\n        border-top: 1px solid #d6d7d8;\r\n    }\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<p>Please see the separate notes on the Single Product Sidebar<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">WooCommerce Single Product<\/h2>\r\n\r\n\r\n\r\n<p>The Single Product page has had some seriousl love applied with GP Premium 1.8. Aside of the Hook Elements at play and the little rounded corners on buttons all of the styling is controlled from within the Customizer. Freaking awesome.  It is by virtue of these new features that means there is very little Woo CSS being used at all. So first off check out all the new features in Customizer > Layout > WooCommerce. <\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">New GP features<\/h3>\r\n\r\n\r\n\r\n<ul><li><strong>Product <\/strong>I<strong>m<\/strong>a<strong>ge area width<\/strong><br>Set to 65% as this site should be all about the image.<\/li><li><strong>D<\/strong>i<strong>splay add to cart panel on scroll<\/strong><br>Sliding into view when the on page add to cart is scrolled past keeping this important function always in view<\/li><li><strong>Display quantity buttons<\/strong><br>The new new + \/ &#8211; qty fields really do add a touch of finesse<\/li><\/ul>\r\n\r\n\r\n\r\n<p>Then take a look at the few customizations made using Hooks and the little extra CSS<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Jump Link &#8211; Full Description<\/h3>\r\n\r\n\r\n\r\n<p>Using a <strong>Hook Element: Single Product Jump to Description<\/strong> we have added a simple jump link to take us from the summary to the Full Description. Here is the HTML for that. It uses the custom <strong>loud-link<\/strong> class on its container to provide the hover and arrow. It also uses the GP <strong>smooth-scroll<\/strong> class, with this option active in the Customizer &gt; General<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>&lt;p class=\"loud-link\">\r\n\t&lt;a class=\"smooth-scroll\" href=\"#tab-title-description\">Full description&lt;\/a>\r\n&lt;\/p><\/code><\/pre>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Variations background styling<\/h3>\r\n\r\n\r\n\r\n<p>Adding a little background color and some padding to make product variations stand out required this CSS:<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>.woocommerce.single-product div.product form.cart .variations {\r\n    background-color: #f2f3f4;\r\n    padding: 30px 40px;\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Social Share<\/h3>\r\n\r\n\r\n\r\n<p>Using Jon Mathers GP Social Sharing plugin to display social share links on Woo was easy. Within the GP Social Share settings we have disabled the built in Hooks. Then creating a <strong>Hook Element: Woo Social Sharing<\/strong> I simply added the shortcode  and selected the dedicated <strong>woocommerce_share<\/strong> hook from the extensive list of hooks.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Single Product Sidebar<\/h3>\r\n\r\n\r\n\r\n<p>Big images and sharp summary is an important part of the design. This meant I had to sacrifice some space without losing that important sidebar. So instead I moved the Sidebar below the summary.  It took a few steps but all achievable within GP and the Customizer.  Here&#8217;s how its done:<\/p>\r\n\r\n\r\n\r\n<ul><li>Remove sidebar from default position<br>Customizer > Layout > WooCommerce &#8211;> Single Product > Sidebar Layout: Content \/ No Sidebar<\/li><li>Add the sidebar in a new position<br><strong>Hook Element: Woo Single Product Sidebar<\/strong> a simple function to hook the sidebar back in where I wanted it.<\/li><li>Then some custom CSS to make sure it positions correctly on Desktop<\/li><\/ul>\r\n\r\n\r\n\r\n<h4 class=\"wp-block-heading\">Single Product Sidebar CSS<\/h4>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>@media (min-width: 768px) {\r\n    .single-product #right-sidebar {\r\n        float: right;\r\n    }\r\n\r\n    .single-product div.product .woocommerce-tabs,\r\n    .single-product div.product .related.products,\r\n    .single-product div.product .upsells.products {\r\n        width: 66%;\r\n        display: inline-block;\r\n    }\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Woocommerce Product Images<\/h2>\r\n\r\n\r\n\r\n<p>In the latest version of Woo they changed the way you size the images. In Customizer > WooCommerce > Product Images you now have only two choices. <\/p>\r\n\r\n\r\n\r\n<ul><li><strong>Main Image Width<\/strong><br>This is the image used on the Single Product. It has been set to 800px to match the single product image area width.<\/li><li><strong>Thumbnail Width<\/strong><br>Set to 400px which is just right for the 2 column layout. You may be inclined to reduce this if using more columns. But as there is no mobile option i leave this at 400px so it fits nicely on those plus size mobile devices.<\/li><\/ul>\r\n\r\n\r\n\r\n<p>The great part about the new Woo Product Images is that they auto generate the sizes. No need to renegerate thumbnails and they don&#8217;t interfere with your normal WP thumbnail sizes.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Image advice<\/h3>\r\n\r\n\r\n\r\n<p>Making your images look great in Woo takes a lot of upfront work. If you&#8217;re expecting Woo to do the magic for you then you&#8217;re gonna get in trouble. Start off with this handy checklist:<\/p>\r\n\r\n\r\n\r\n<ul><li><strong>Aspect Ratio<\/strong><br>Consistent aspect ratio will eradicate mis-alignment of images in your grid or unsightly movement in your product gallery. Preferably i would stick with square images. If that means editing them in your favourite photo editor and adding some white space than do so.<\/li><li><strong>Image sizes<\/strong><br>Woo allows you to set the Thumbnail and the Main Image. Ideally they should be equally divisible into your original image e.g<br>Original: 1600px , Main: 800px , Thumbnail: 400px. <br>What you don&#8217;t want is odd sized images where they become blurry on resizing due to stray fractions of a pixel.<\/li><li><strong>Setting your image sizes<\/strong><br>Load some oversized images in your dummy products. Set the Customizer > WooCommerce > Product Image sizes so they fill the container. Now use the browser inspector to see the size they are being displayed in your Shop and Single Product. Make sure you done this after you have finished your layout design.<\/li><li><strong>Mobile First<\/strong><br>Consider that your probably gonna use a single column for mobile. Which could mean it needs a wider image than those in the desktop columns. Use this for your Thumbnail size. Its no big issue that their larger then you need on desktop.<\/li><li><strong>Zoom<\/strong><br>The Product Gallery Zoom and Lightbox will use the largest image it can get it hands on. So make sure your original image is larger then the Main Image width you have set. <\/li><\/ul>\r\n","protected":false},"excerpt":{"rendered":"<p>Creating compelling Woocommerce Sites just got even easier with GeneratePress Premium 1.8.<\/p>\n","protected":false},"author":1,"featured_media":136,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[],"_links":{"self":[{"href":"https:\/\/notalotofspace.com\/index.php?rest_route=\/wp\/v2\/posts\/2810"}],"collection":[{"href":"https:\/\/notalotofspace.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notalotofspace.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notalotofspace.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notalotofspace.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2810"}],"version-history":[{"count":0,"href":"https:\/\/notalotofspace.com\/index.php?rest_route=\/wp\/v2\/posts\/2810\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notalotofspace.com\/index.php?rest_route=\/wp\/v2\/media\/136"}],"wp:attachment":[{"href":"https:\/\/notalotofspace.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2810"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notalotofspace.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2810"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notalotofspace.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2810"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}