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.
