WooCommerce
WooCommerce was a big focus of ours in this update. We’ve added new features, and improved existing ones. We’ve also improved the design in some areas.
Menu Mini Cart
You can now add a mini cart to your cart menu item when you hover over it. This mini cart can be styled using color options in the Customizer.
Number of Items in Cart Menu Item
By default, the cart menu item displays the total cost of the items in your cart. You can now change that to show the number of items instead.
Sticky Panel on Add to Cart
When you add a product to your cart, you can now enable a sticky bar which will appear with a checkout button.
Sticky Add to Cart Panel
On single product pages, you can choose to show an add to cart panel once you pass the add to cart button on the page.
Improved Quantity Fields
We’ve added + and – signs to your quantity fields, and designed them to better fit with the add to cart button. This option is on by default, but can be turned off in the Customizer.
Single Product Image Width
The area which holds your single product image can now be adjusted directly inside the Customizer.
Other WooCommerce Tweaks
- Add color options for
price slider widget - Use CSS grid for the product archives
- Horizontally align add to cart buttons
- Re-design the cart widget
- Improve product tab design to look more like tabs
- Use flexbox for quantity/add to cart alignment
- Improve rating star
styles Improve coupon field design- Improve result count/ordering styling
Navigation as Header
One of our more popular requests is to use the navigation as your header. This is useful if you’re looking for a slim alternative to a classic header.
Previously, you’d have to disable the classic header, add a navigation logo to your navigation and set the placement of the logo to Sticky + Static. While this process works, it involves a lot of steps.
In 1.8, we’ve removed the Navigation Logo and placement options if you’re not using
Using the Navigation as Header option does various things for you:
- Disables the classic site header
- Adds your logo or site title (or both, depending on your settings) into the navigation
- If you’re using a site title, it sets it to your menu item color
- Hides all non-applicable header options in the Customizer
This options vastly simplifies the process for you, while giving you more control. You no longer need to upload a different logo, as it will use your logo set in Customize > Site Identity. If you don’t want a logo, you can just use your site title by leaving the Hide site title option un-checked in Customize > Site Identity.
The site title color and typography options can be altered in Customize > Typography > Header as usual.
Off Canvas Overlay
We’ve had a slideout navigation/widget area for a while now. In 1.8, we’ve added an option to turn it into a full-screen overlay. We also re-named “Slideout Navigation” to “Off Canvas Panel” throughout the theme.
Mobile Header Branding
You’ve always been able to upload a logo for your mobile header. Now, you can choose to use your site title instead.
Better Spacing Control
Mobile Padding
Elements like the header, sidebar widgets and footer widgets now have mobile padding controls.
Content Separator
Previously, you weren’t able to adjust the amount of space between your featured images, title, entry meta and footer entry meta. Now, you’re able to do so inside the Customizer.
Site Library Re-Design
The importer received a little love as well. We re-designed the process and simplified it a bit.
Content Area Width
We’ve added a new option to the Layout Element that allows you to set a custom width for you content area. This is particularly useful when not using any sidebars, as a narrow content area makes your content much easier to read.
Customizer Shortcuts
As of right now, we have 4 main panels of options in the Customizer:
- Layout
- Colors
- Typography
- Background Images
In each of these panels, we have various sections, which are consistent throughout each panel. We experimented with merging the Colors, Typography and Background Images section into one section, but things quickly became quite messy/confusing.
So instead, we came up with a shortcut system to take you between panels easily.
Sticky Navigation Logo
Somewhat related to the Navigation as Header option above, you can now upload a different logo for your sticky navigation. This option will only appear if you don’t have the deprecated Navigation Logo option set.
Mobile Header Breakpoint
You can now choose when the mobile header initiates. By default, it happens at 768px. Once GP 2.3 is released, this option will also apply to the regular menu if the mobile header isn’t activated.
Multi-Language Elements
Elements are now translatable using popular plugins like WPML and Polylang.
That’s It!
We’re super proud of GPP 1.8, and hope you like the new features!
As I said above, this is currently an alpha version, so use caution when using it on sites with traffic.
If you have any bug reports or feedback, please report them in our forums.
Full changelog
1.8.0
- Blog: Apply columns filter to masonry grid sizer
- Colors: Merge Footer Widgets and Footer controls in Color panel
- Colors: Remove edit_theme_options capability to Customizer controls (set by default)
- Disable Elements: Make sure mobile header is disabled when primary navigation is disabled
- Elements: Add content width option in Layout Element
- Elements: Fix mobile header logo when mobile menu toggled
- Elements: Add generate_page_hero_location filter
- Elements: Add generate_elements_show_object_ids filter to show IDs in Display Rule values
- Elements: Prevent merged header wrap from conflicting with Elementor controls
- Elements: Change Container tab name to Content
- Elements: Add woocommerce_share option to Hooks
- Elements: Improve WPML compatibility
- Elements: Improve Polylang compatibility
- Elements: Prevent PHP notices when adding taxonomy locations to non-existent archives
- Elements: Add generate_mobile_cart_items hook to hook list
- Elements: Add generate_element_post_id filter
- Elements: Escape HTML elements inside Element textarea
- Elements: Add Beaver Builder templates to the Display Rules
- Menu Plus: Add mobile header breakpoint option
- Menu Plus: Add off canvas overlay option
- Menu Plus: Add navigation as header option
- Menu Plus: Remove navigation logo option if navigation as header set
- Menu Plus: Add sticky navigation logo option
- Menu Plus: Allow site title in mobile header instead of logo
- Menu Plus: Add option to move exit button inside the off canvas panel
- Menu Plus: Change Slideout Navigation name to Off Canvas Panel
- Menu Plus: Only re-focus after slideout close on escape key
- Menu Plus: Give close slideout event a name so it can be removed
- Menu Plus: Remove invalid transition-delay
- Menu Plus: Improve slideout overlay transition
- Menu Plus: Add mobile open/close icons to GPP font
- Menu Plus: Allow dynamic widget classes in off canvas panel (fixes WC range slider widget issue)
- Menu Plus: Basic compatibility with future SVG icons
- Menu Plus: Prevent duplicate IDs when sticky navigation is cloned
- Secondary Nav: Add dropdown direction option
- Secondary Nav: Basic compatibility with future SVG icons
- Sections: Fix section editor issues in WP 5.0
- Sections: Show Better Font Awesome icon in editor
- Sites: Re-design UI
- Sites: Add option to activate as a module like all the other modules
- Sites: Don’t show backup options button if no options exist
- Sites: Make JS action classes more specific to the site library
- Sites: Set mime types of content.xml and widgets.wie
- Spacing: Add header padding option for mobile
- Spacing: Add widget padding option for mobile
- Spacing: Add footer widgets padding option for mobile
- Spacing: Add content separator option
- Spacing: Apply mobile menu item width to mobile bar only
- WooCommerce: Add option for mini cart in the menu
- WooCommerce: Add option to open off overlay panel on add to cart
- WooCommerce: Add option to open sticky add to cart panel on single products
- WooCommerce: Add option to add +/- buttons to the quantity fields
- WooCommerce: Add option to show number of items in cart menu item
- WooCommerce: Add option to choose single product image area width
- WooCommerce: Add color options for price slider widget
- WooCommerce: Use CSS grid for the product archives
- WooCommerce: Horizontally align add to cart buttons
- WooCommerce: Re-design the cart widget
- WooCommerce: Tighten up product info spacing
- WooCommerce: Improve product tab design to look more like tabs
- WooCommerce: Simplify single product image display
- WooCommerce: Use flexbox for quantity/add to cart alignment
- WooCommerce: Improve rating star styles
- WooCommerce: Use product alignment setting for related/upsell products
- WooCommerce: Remove bottom margin from product image
- WooCommerce: Organize colors in the Customizer
- WooCommerce: Remove title attribute from menu cart item
- WooCommerce: Improve coupon field design
- WooCommerce: Improve result count/ordering styling
- WooCommerce: Add gap around WC single product images
- WooCommerce: Remove arrow from checkout button
- WooCommerce: Hide view cart link on add to cart click
- WooCommerce: Organize CSS
- Introduce in-Customizer shortcuts
- Add generate_disable_customizer_shortcuts filter
A few weeks ago, a friend asked me how to change arrowto minus, plus, I inserted code into functions.
With this GP 1.8, my friend will be able to change without code.
Big Update, Thanks Tom <3
Awesome! Thank you 🙂
Change list looks great, can’t wait to try it out!
On the forums you mentioned there will be some new sites within the site library for 1.8, will these be released as part of beta/alpha testing or only when properly released?
Cheers,
Duncan
Sites will likely be released once 1.8 is officially released 🙂
Holy moly, that’s a big update. Awesome and useful new additions. Looking forward to taking GP 2.3 for a spin as well. 🙂
Amazing work as usual Tom. Huge update.
Loving the menu mini cart feature!
Lovely. Great update. Have you tested the new WooCommerce option with the petformatters plugin? Thanks.
We haven’t, but there shouldn’t be any issues 🙂
Thank you, Tom
Looks fantastic, especially for a couple of Woo sites I do (one that I need to migrate to GP/GPP!) — awesome work, thank you Tom!
Any update about substituting SVG or something else in place of the “generatepress.woff2” font? I’ve seen comments on this and I’ve been doing a lot of testing. That particular file, even though tiny, causes a bottleneck, adding half a second or more to the page load time.
The file also gets a ding on Google PageSpeed Insights:
“The Critical Request Chains below show you what resources are loaded with a high priority. Consider reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load.”
“Maximum critical path latency: 1,300 ms”
“fonts/generatepress.woff2 670 ms, 1.66 KB”
For my page it added 670 ms to the load time.
Excited about these other improvements by the way. Don’t want to sound like a chronic complainer. Lol. I’m sure there is a solution it, but I have no idea what it would be.
Thanks for all the hard work you guys do! Wonderful theme. 🙂
Joan
That’s a theme thing, so it’ll be in 2.3 🙂
Hi Tom .
Any more details of ‘Elements: Improve WPML compatibility’
I have the same header for all languages for a given set of pages and have a huge stack of pages in display rules. These need to be duplicated in all languages – just wondering if this update will help in any way. Thanks
This version should make it so Elements are treated like any other custom post type. It should simplify things a lot 🙂
You have no idea how desperately non-CSS-coders need this. Thank You so much!
Hi Tom,
Great job again brother. Do you have an anticipated launch date for 1.8?
Thanks,
Paul
Thanks! Depends on the feedback we get from the alpha/beta stages. Should be soon 🙂
Man, I’m so happy I found your theme, this update looks great. One thing I would love is a quick color changer. Like the presets for the primary navigation but instead some that change the whole website.
Something like that would be very cool. I’ll keep it in mind 🙂
Hi Tom,
This looks like a great update, as always. I’m pleased that you’ve included the “Improve product tab design to look more like tabs” for Woocommerce.
Is there any chance that you could add a border around the tab content as well? At the moment, the tab titles look “tabbified”, but the content undereath doesn’t look like it’s attached to the tab (if that makes sense).
Thanks
Duncan
I’ll look into this 🙂
Hello Tom,
amazing update. When do you think (approximately) this comes out of the testing phase? Thanks.
Wow. That looks promising. What a great list of USEFUL improvements. I am not into WooCommerce, but the rest… Can’t wait!
Hi team. That’s a BIG update, looks great!
Love the minicart, and many other features.
Is there any place where to request for new features?
I have some expectancy for a closer Gutenberg integration.
Knowing your way of working only can be expected great things.
Thanks a lot.
The forum is best for feature requests 🙂
Thanks!
Nice list of changes but I’m a little disappointed to see svg icons have not been implemented for the menu, search, etc yet instead of loading a separate GP icon file. Seems like an easy change to make and would be a great speed boost.
Those icons are in the theme – not GP Premium. We’ll be making that change in GP 2.3 🙂
Hello Tom! Excellent work!
I tested the beta on a test site and found that:
1. The sticky add to cart only works in simple products, it would be good to make it work for variable products (95% of the products of my stores are variable)
2. The buttons of the mini cart (view cart and checkout) are very large for the size of the text (17px)
3. It would be good if the pop up of adding product to the cart could be placed as the slideshow (to the side and with a dark background). It would also be nice to include the view cart button in addition to checkout.
I look forward to the final version to install it on my production site.
Thank you!
Glad you like it!
1. The issue here is there isn’t enough room for variations in the panel.
2. Will take a look at this.
3. It can be altered using CSS quite easily – happy to help with that kind of stuff in the forum.
Hello Tom! Thanks for answering.
With regard to the sticky add to cart for variable products, one option would be to not show the variations, but when people click on the add to cart button, a pop up with the variations available to choose and the button to open add to cart
I hope my opinion is taken into account, because as I mentioned before, the vast majority of my products are variable.
Hello! Another thing.
I see that the pop up when a product is added to the cart only shows on the pages of the store, but it does not appear on the page of the individual products.
Is there any way to fix this?
Thank you!
Great work Tom, it sounds like you and your team have made lots of improvements. I am excited to use it on our live site once it comes out of Beta.
Did you happen to implement better image resizing?
I am currently working on making my images rescale or resize properly between mobile and desktop, without loading large image files when not needed.
Michael
Thanks! Not yet, that’s something we’ll be focusing on soon 🙂
I hope the new version woocommerce is no longer have a left – right scrolling bar, it’s very anoying when browsing with iphone. see here : https://i.imgur.com/5Wt3XlG.png
That was actually a bug in the CSS for the Seller site. We’ve fixed it. Let us know in the forum if you need help fixing it on your site 🙂
Hi.
there seems to be a bug in the current Beta Version with the Improved Quantity Fields or “Add to Cart” botton CSS in combination with the plugin “WooCommerce Upload Files”.
codecanyon.net/item/woocommerce-upload-files/11442983
Any chance to look into that?
Best regards.
Hi there,
Can you link us to a page where we can see the issue?
Thanks!
Hi Tom,
Thanks.
I am currently testing on a test environment with protected htaccess. can i send you the access via PN?
You can send it via our contact form: https://generatepress.com/contact
Just be sure to mention the issue we’re looking for as well.
Thanks!
Hello Tom and greetings from Italy really a great job. Congratulations also for the new plugin. your profile picture with your baby is always beautiful.
I love the new update.
Is it possible to have Infinite Scroll and Quick View for products?
Thanks
Awesome! Not at this time. Quick View might be in a future update 🙂
Hey Tom!,
Another feature that would be greatly useful to us in 1.8 and pretty easy to implement would be the ability to swap the content and image in single WooCommerce products. Having the image on the left has never made any sense to me in terms of usability. A single toggle for that would be great!
Good idea! Thanks 🙂
We’re about to enter the release candidate stage, so we’re at a feature freeze. However, I’ll look at this for 1.9. It’s also likely very easy with some CSS which I’m happy to help with if need be 🙂
Hello Tom, Excellent work,
kindly can you add with this update a way to change WooCommerce default login form appears with a smartest ways to customize WooCommerce checkout login and”my account” page.
Thanks,
Really like the new options, especially since I have three Woocommerce installs (across various sites). Looking forward to trying it out.
Thanks for the hard work! We will be launching our company blog in a week or so and I really wanted that full screen slide out menu but since the overlay was closing the menu I decided I wouldn’t work too much on trying to make it work with custom coding but this new release is coming with it! How exciting!
What do you guy would recommend? Waiting for 1.8.0 to be official or I should/could use it for our blog release?
It’s a release candidate now, so you’re good to use it on your site 🙂
Wow, big positive news on the logo/header nav thing! I should have waited. 😉 Now I wonder if I’ll blow everything up by upgrading and/or if I should migrate to the new approach.
Updating shouldn’t break anything you’ve done 🙂
Hi Tom, I think I found a bug. Layout >> Blog, I can’t display a read more link or button. Tested it on 1.8.0-alpha.2 and on the newest version aswell.
Hi there,
Can’t reproduce this one. What happens when you check the box and save? Does the box stay checked? Can you link me to your blog?
Ok it works sorry. I was playing around again:
I have imported blog posts from my older Website where the Classic editor was enabled into my new Local Site that uses Gutenberg. Those posts are missing the excerpt and the read more (I guess the read more wont show if the excerpt is missing).
But when I create a new Post with Gutenberg its works just fine.
Currently I edit the class-hero.php to put the blog posts header inside the content area and to the left of the side bar, instead of above the content area. As described here: https://generatepress.com/forums/topic/posts-header-inside-content-area-left-of-the-side-bar/
Will I still need to do that in 1.8 and if so, will it still work by replacing that same code in the class-hero.php?
Thanks,
Eric
In 1.8, you won’t need to alter that file anymore. You’ll just need the filter in #3 here: https://generatepress.com/forums/topic/posts-header-inside-content-area-left-of-the-side-bar/#post-748927
Very nice and big update. Would love to see some more elements such as dropcap, message box built-in in next big update 🙂
One-click update – no issues at all. Beautiful.
Loving the Customizer shortcuts, very handy indeed.
Wow this looks great, a big update, especially after Elements (which is great too).
Scott
GP Premium translation intregation schedule?
Trying to figure out the best way to do it. Adding every translation into the plugin would almost double its size.
I’d like to develop a one-click solution in the Dashboard to download the latest translations (like WP does for WP.org plugins/themes).
Great update GP team!
I have one suggestion about new function navigation as header.
Can you add WPHeader schema.org markup when new navigation as header is activated? Google really loves structured data.
Glad you like it!
While we call it “Navigation as Header”, the actual element is still the navigation (has menu items), and uses the `