Merch Styling

WooCommerce

Creating compelling Woocommerce Sites just got even easier with GeneratePress Premium 1.8.

by

WooCommerce just got even simpler with GeneratePress Premium 1.8 . It wouldn’t be a Flint Skin site of course if there wasn’t a little CSS and some Custom functions. But the vast majority of what you see is styled through the Customizer.

Woo Shop Page

New GP Premium 1.8 Features

  • Display mini cart sub-menu
    No more need for a plugin with this beautiful min cart shown when hovering the nav cart icon
  • Menu Item Content
    Choice between Amount and Number of Items. I have chosen the latter
  • Display cart panel on add to cart
    Replacing the standard WooCommerce add to cart notification with a great slide out panel.

Shop Page Product – add to cart ( desktop )

Using a little CSS to create a show / hide on hover effect. This uses some CSS which you can find in the Customizer > Additional CSS. It looks like this:

.woocommerce ul.products li.product {
    overflow: hidden;
}

.woocommerce ul.products li.product:hover .button {
    -webkit-transform: translatey(0) !important;
    transform: translatey(0) !important;
}

.woocommerce ul.products li.product .button {
    font-size: 12px;
    line-height: 15px;
    padding: 8px 12px;
    min-height: 15px;
    font-weight: bold;
    text-transform: uppercase;
}

@media (min-width: 1024px) {
    .woocommerce ul.products li.product .button {
        position: absolute;
        top: 0;
        -webkit-transform: translatey(-150%);
        transform: translatey(-150%);
        -webkit-transition: 0.35s;
        transition: 0.35s;
        margin-top: 10px;
        margin-left: 10px !important;
    }
}

The radius corners have been added using the Button CSS which is covered in the Styling Guide.

Sale Badge

To compliment the positioning and rounded corners of the add to cart I used this CSS:

.woocommerce span.onsale {
    position: absolute;
    margin: 10px !important;
    border-radius: 4px !important;
}

WooCommerce Sidebars – Common

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 & margins. It looks like this:

@media (min-width: 768px) {
    #right-sidebar {
        border-left: 1px solid #d6d7d8;
    }

    #right-sidebar .widget {
        margin-bottom: 0;
    }

    #right-sidebar aside:first-child {
        padding-top: 0;
    }

    #right-sidebar aside:not(:first-child) {
        border-top: 1px solid #d6d7d8;
    }
}

Please see the separate notes on the Single Product Sidebar

WooCommerce Single Product

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.

New GP features

  • Product Image area width
    Set to 65% as this site should be all about the image.
  • Display add to cart panel on scroll
    Sliding into view when the on page add to cart is scrolled past keeping this important function always in view
  • Display quantity buttons
    The new new + / – qty fields really do add a touch of finesse

Then take a look at the few customizations made using Hooks and the little extra CSS

Jump Link – Full Description

Using a Hook Element: Single Product Jump to Description 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 loud-link class on its container to provide the hover and arrow. It also uses the GP smooth-scroll class, with this option active in the Customizer > General

<p class="loud-link">
	<a class="smooth-scroll" href="#tab-title-description">Full description</a>
</p>

Variations background styling

Adding a little background color and some padding to make product variations stand out required this CSS:

.woocommerce.single-product div.product form.cart .variations {
    background-color: #f2f3f4;
    padding: 30px 40px;
}

Social Share

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 Hook Element: Woo Social Sharing I simply added the shortcode and selected the dedicated woocommerce_share hook from the extensive list of hooks.

Single Product Sidebar

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’s how its done:

  • Remove sidebar from default position
    Customizer > Layout > WooCommerce –> Single Product > Sidebar Layout: Content / No Sidebar
  • Add the sidebar in a new position
    Hook Element: Woo Single Product Sidebar a simple function to hook the sidebar back in where I wanted it.
  • Then some custom CSS to make sure it positions correctly on Desktop

Single Product Sidebar CSS

@media (min-width: 768px) {
    .single-product #right-sidebar {
        float: right;
    }

    .single-product div.product .woocommerce-tabs,
    .single-product div.product .related.products,
    .single-product div.product .upsells.products {
        width: 66%;
        display: inline-block;
    }
}

Woocommerce Product Images

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.

  • Main Image Width
    This is the image used on the Single Product. It has been set to 800px to match the single product image area width.
  • Thumbnail Width
    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.

The great part about the new Woo Product Images is that they auto generate the sizes. No need to renegerate thumbnails and they don’t interfere with your normal WP thumbnail sizes.

Image advice

Making your images look great in Woo takes a lot of upfront work. If you’re expecting Woo to do the magic for you then you’re gonna get in trouble. Start off with this handy checklist:

  • Aspect Ratio
    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.
  • Image sizes
    Woo allows you to set the Thumbnail and the Main Image. Ideally they should be equally divisible into your original image e.g
    Original: 1600px , Main: 800px , Thumbnail: 400px.
    What you don’t want is odd sized images where they become blurry on resizing due to stray fractions of a pixel.
  • Setting your image sizes
    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.
  • Mobile First
    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.
  • Zoom
    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.

Related Posts