GeneratePress works with WooCommerce out of the box. GP Premium’s WooCommerce module adds settings for your shop: a cart in the menu, product columns, what shows on shop and product pages, a sticky add-to-cart panel, distraction-free checkout and shop colours.
Requires GP Premium — WooCommerce module. The whole guide is a GP Premium feature. The module only appears once the WooCommerce plugin is active; then turn it on in Appearance → GeneratePress.
Layout: Appearance → Customize → Layout → WooCommerce
Colours: Appearance → Customize → WooCommerce → Colors
Layout
The WooCommerce section in the Layout panel has four groups.
General
- Display cart in menu — adds a cart icon with the cart total to the primary navigation. The menu needs a theme location.
- Display mini cart sub-menu — shows the cart contents when you hover over the icon.
- Menu Item Icon — a Shopping Cart (default), Shopping Bag or Shopping Basket.
- Menu Item Content — the cart Amount (default) or Number of Items.
- Display breadcrumbs — WooCommerce’s breadcrumbs on shop and product pages.
Shop
These settings are for the shop page and product archives.
- Sidebar Layout — the shop’s sidebar layout (default Content / Sidebar).
- Product Columns and Column Gap — the number of columns (default 4, tablet 2, mobile 1) and the space between them (default 50px). Use the device buttons for tablet and mobile.
- Image Alignment — Left, Center (default) or Right. Left or right is best with one column.
- Products Per Page — default 9.
- Text Alignment — for the product title, price and so on.
- Display cart panel on add to cart — opens a cart panel when a product is added.
- Display toggles — the page title, results count, sorting, product image, secondary image on hover (the product’s second gallery image), title, sale flash (and Sale flash over image), rating, price, add to cart button and short description.
Single product
These settings are for single product pages.
- Sidebar Layout — default Inherit (the site’s sidebar layout).
- Product Image Area Width — the width of the image gallery (default 50%).
- Display add to cart panel on scroll — a sticky bar with the add-to-cart button once the visitor scrolls past it.
- Display quantity buttons — plus and minus buttons beside the quantity.
- Display toggles — the sale flash, product tabs (description, reviews and so on), related products, upsell products, product meta (category, SKU) and short description.
- Related/Upsell Columns — default 4, tablet 2, mobile 1.
Checkout
Distraction-free mode (on by default) removes the sidebars, footer widgets and sticky navigation from the checkout page, so customers can focus on paying.
Colors
Shop colours are in Customize → WooCommerce → Colors — WooCommerce’s own Customizer panel, not the theme’s Colors section. Groups: Buttons (the alternative button, such as Checkout), Products (title, star ratings, sale sticker, price), Sticky Panel Cart, Menu Mini Cart, Price Slider Widget, Product Tabs and Messages (success, info and error). Colours for everything else are in Colors.
Typography
Set fonts for shop elements, such as product titles, with the Typography Manager: click Add Typography and choose Catalogue Product Titles (product titles on the shop and archives) or Related/Upsell Product Titles.
Recipes & customizations
Recipes add code as explained in Adding Custom Code.
Hide the menu cart when it’s empty
Show the cart icon only when there’s something in the cart:
.mobile-bar-items.wc-mobile-cart-items:not(.has-items),
.main-navigation .wc-menu-item:not(.has-items) {
display: none;
}Put the cart inside the menu items
The cart icon normally sits apart from the menu, at its right-hand end. To make it the last menu item instead:
add_filter( 'wp_nav_menu_items', function( $items, $args ) {
if ( 'primary' === $args->theme_location && function_exists( 'generatepress_wc_cart_link' ) ) {
$has_items = ! WC()->cart->is_empty() ? 'has-items' : '';
$items .= sprintf(
'<li class="wc-menu-item menu-item-align-right %1$s %2$s">%3$s</li>',
is_cart() ? 'current-menu-item' : '',
$has_items,
generatepress_wc_cart_link()
);
}
return $items;
}, 10, 2 );Then turn off Display cart in menu, so the icon doesn’t show twice.
All options
| Setting | Section | Choices | Default | Requires | Customizer option |
|---|---|---|---|---|---|
| Display cart in menu | Layout › WooCommerce › General | On / Off | On | GP Premium — WooCommerce | generate_woocommerce_settings[cart_menu_item] |
| Display mini cart sub-menu | Layout › WooCommerce › General | On / Off | Off | GP Premium — WooCommerce | generate_woocommerce_settings[menu_mini_cart] |
| Menu Item Icon | Layout › WooCommerce › General | Shopping Cart · Shopping Bag · Shopping Basket | Shopping Cart | GP Premium — WooCommerce | generate_woocommerce_settings[cart_menu_item_icon] |
| Menu Item Content | Layout › WooCommerce › General | Amount · Number of Items | Amount | GP Premium — WooCommerce | generate_woocommerce_settings[cart_menu_item_content] |
| Display breadcrumbs | Layout › WooCommerce › General | On / Off | On | GP Premium — WooCommerce | generate_woocommerce_settings[breadcrumbs] |
| Sidebar Layout | Layout › WooCommerce › Shop | Sidebar / Content · Content / Sidebar · Content (no sidebars) · Sidebar / Content / Sidebar · Sidebar / Sidebar / Content · Content / Sidebar / Sidebar | Content / Sidebar | GP Premium — WooCommerce | generate_woocommerce_settings[sidebar_layout] |
| Product Columns | Layout › WooCommerce › Shop | 1–6 columns | 4 | GP Premium — WooCommerce | generate_woocommerce_settings[columns] |
| Product Columns (tablet) | Layout › WooCommerce › Shop | 1–6 columns | 2 | GP Premium — WooCommerce | generate_woocommerce_settings[tablet_columns] |
| Product Columns (mobile) | Layout › WooCommerce › Shop | 1–6 columns | 1 | GP Premium — WooCommerce | generate_woocommerce_settings[mobile_columns] |
| Column Gap | Layout › WooCommerce › Shop | 0–100 px | 50 | GP Premium — WooCommerce | generate_woocommerce_settings[columns_gap] |
| Column Gap (tablet) | Layout › WooCommerce › Shop | 0–100 px | — (inherits) | GP Premium — WooCommerce | generate_woocommerce_settings[tablet_columns_gap] |
| Column Gap (mobile) | Layout › WooCommerce › Shop | 0–100 px | — (inherits) | GP Premium — WooCommerce | generate_woocommerce_settings[mobile_columns_gap] |
| Image Alignment | Layout › WooCommerce › Shop | Left · Center · Right | Center | GP Premium — WooCommerce | generate_woocommerce_settings[product_archive_image_alignment] |
| Products Per Page | Layout › WooCommerce › Shop | Number | 9 | GP Premium — WooCommerce | generate_woocommerce_settings[products_per_page] |
| Text Alignment | Layout › WooCommerce › Shop | Left · Center · Right | Center | GP Premium — WooCommerce | generate_woocommerce_settings[product_archive_alignment] |
| Display cart panel on add to cart | Layout › WooCommerce › Shop | On / Off | Off | GP Premium — WooCommerce | generate_woocommerce_settings[off_canvas_panel_on_add_to_cart] |
| Display page title | Layout › WooCommerce › Shop | On / Off | On | GP Premium — WooCommerce | generate_woocommerce_settings[shop_page_title] |
| Display product results count | Layout › WooCommerce › Shop | On / Off | On | GP Premium — WooCommerce | generate_woocommerce_settings[product_results_count] |
| Display product sorting | Layout › WooCommerce › Shop | On / Off | On | GP Premium — WooCommerce | generate_woocommerce_settings[product_sorting] |
| Display product image | Layout › WooCommerce › Shop | On / Off | On | GP Premium — WooCommerce | generate_woocommerce_settings[product_archive_image] |
| Display secondary image on hover | Layout › WooCommerce › Shop | On / Off | On | GP Premium — WooCommerce | generate_woocommerce_settings[product_secondary_image] |
| Display product title | Layout › WooCommerce › Shop | On / Off | On | GP Premium — WooCommerce | generate_woocommerce_settings[product_archive_title] |
| Display sale flash | Layout › WooCommerce › Shop | On / Off | On | GP Premium — WooCommerce | generate_woocommerce_settings[product_archive_sale_flash] |
| Sale flash over image | Layout › WooCommerce › Shop | On / Off | On | GP Premium — WooCommerce | generate_woocommerce_settings[product_archive_sale_flash_overlay] |
| Display rating | Layout › WooCommerce › Shop | On / Off | On | GP Premium — WooCommerce | generate_woocommerce_settings[product_archive_rating] |
| Display price | Layout › WooCommerce › Shop | On / Off | On | GP Premium — WooCommerce | generate_woocommerce_settings[product_archive_price] |
| Display add to cart button | Layout › WooCommerce › Shop | On / Off | On | GP Premium — WooCommerce | generate_woocommerce_settings[product_archive_add_to_cart] |
| Display short description | Layout › WooCommerce › Shop | On / Off | Off | GP Premium — WooCommerce | generate_woocommerce_settings[product_archive_description] |
| Sidebar Layout | Layout › WooCommerce › Single Product | Inherit · Sidebar / Content · Content / Sidebar · Content (no sidebars) · Sidebar / Content / Sidebar · Sidebar / Sidebar / Content · Content / Sidebar / Sidebar | Inherit | GP Premium — WooCommerce | generate_woocommerce_settings[single_sidebar_layout] |
| Product Image Area Width | Layout › WooCommerce › Single Product | 10–100 % | 50 | GP Premium — WooCommerce | generate_woocommerce_settings[single_product_image_width] |
| Display add to cart panel on scroll | Layout › WooCommerce › Single Product | On / Off | Off | GP Premium — WooCommerce | generate_woocommerce_settings[sticky_add_to_cart_panel] |
| Display quantity buttons | Layout › WooCommerce › Single Product | On / Off | On | GP Premium — WooCommerce | generate_woocommerce_settings[quantity_buttons] |
| Display sale flash | Layout › WooCommerce › Single Product | On / Off | On | GP Premium — WooCommerce | generate_woocommerce_settings[single_product_sale_flash] |
| Display product tabs | Layout › WooCommerce › Single Product | On / Off | On | GP Premium — WooCommerce | generate_woocommerce_settings[product_tabs] |
| Display related products | Layout › WooCommerce › Single Product | On / Off | On | GP Premium — WooCommerce | generate_woocommerce_settings[product_related] |
| Display upsell products | Layout › WooCommerce › Single Product | On / Off | On | GP Premium — WooCommerce | generate_woocommerce_settings[product_upsells] |
| Related/Upsell Columns | Layout › WooCommerce › Single Product | 1–6 columns | 4 | GP Premium — WooCommerce | generate_woocommerce_settings[related_upsell_columns] |
| Related/Upsell Columns (tablet) | Layout › WooCommerce › Single Product | 1–6 columns | 2 | GP Premium — WooCommerce | generate_woocommerce_settings[tablet_related_upsell_columns] |
| Related/Upsell Columns (mobile) | Layout › WooCommerce › Single Product | 1–6 columns | 1 | GP Premium — WooCommerce | generate_woocommerce_settings[mobile_related_upsell_columns] |
| Display product meta data | Layout › WooCommerce › Single Product | On / Off | On | GP Premium — WooCommerce | generate_woocommerce_settings[product_meta] |
| Display short description | Layout › WooCommerce › Single Product | On / Off | On | GP Premium — WooCommerce | generate_woocommerce_settings[product_description] |
| Distraction-free mode | Layout › WooCommerce › Checkout | On / Off | On | GP Premium — WooCommerce | generate_woocommerce_settings[distraction_free] |
| Alt Button Background | WooCommerce › Colors › Buttons | Colour | #1e73be | GP Premium — WooCommerce | generate_settings[wc_alt_button_background] |
| Alt Button Background Hover | WooCommerce › Colors › Buttons | Colour | #377fbf | GP Premium — WooCommerce | generate_settings[wc_alt_button_background_hover] |
| Alt Button Text | WooCommerce › Colors › Buttons | Colour | #ffffff | GP Premium — WooCommerce | generate_settings[wc_alt_button_text] |
| Alt Button Text Hover | WooCommerce › Colors › Buttons | Colour | #ffffff | GP Premium — WooCommerce | generate_settings[wc_alt_button_text_hover] |
| Product Title | WooCommerce › Colors › Products | Colour | — (empty) | GP Premium — WooCommerce | generate_settings[wc_product_title_color] |
| Product Title Hover | WooCommerce › Colors › Products | Colour | — (empty) | GP Premium — WooCommerce | generate_settings[wc_product_title_color_hover] |
| Star Ratings | WooCommerce › Colors › Products | Colour | #ffa200 | GP Premium — WooCommerce | generate_settings[wc_rating_stars] |
| Sale Sticker Background | WooCommerce › Colors › Products | Colour | #222222 | GP Premium — WooCommerce | generate_settings[wc_sale_sticker_background] |
| Sale Sticker Text | WooCommerce › Colors › Products | Colour | #ffffff | GP Premium — WooCommerce | generate_settings[wc_sale_sticker_text] |
| Price | WooCommerce › Colors › Products | Colour | #222222 | GP Premium — WooCommerce | generate_settings[wc_price_color] |
| Background Color | WooCommerce › Colors › Sticky Panel Cart | Colour | #ffffff | GP Premium — WooCommerce | generate_settings[wc_panel_cart_background_color] |
| Text Color | WooCommerce › Colors › Sticky Panel Cart | Colour | #000000 | GP Premium — WooCommerce | generate_settings[wc_panel_cart_text_color] |
| Button Background | WooCommerce › Colors › Sticky Panel Cart | Colour | — (empty) | GP Premium — WooCommerce | generate_settings[wc_panel_cart_button_background] |
| Button Background Hover | WooCommerce › Colors › Sticky Panel Cart | Colour | — (empty) | GP Premium — WooCommerce | generate_settings[wc_panel_cart_button_background_hover] |
| Button Text | WooCommerce › Colors › Sticky Panel Cart | Colour | — (empty) | GP Premium — WooCommerce | generate_settings[wc_panel_cart_button_text] |
| Button Text Hover | WooCommerce › Colors › Sticky Panel Cart | Colour | — (empty) | GP Premium — WooCommerce | generate_settings[wc_panel_cart_button_text_hover] |
| Background Color | WooCommerce › Colors › Menu Mini Cart | Colour | #ffffff | GP Premium — WooCommerce | generate_settings[wc_mini_cart_background_color] |
| Text Color | WooCommerce › Colors › Menu Mini Cart | Colour | #000000 | GP Premium — WooCommerce | generate_settings[wc_mini_cart_text_color] |
| Button Background | WooCommerce › Colors › Menu Mini Cart | Colour | — (empty) | GP Premium — WooCommerce | generate_settings[wc_mini_cart_button_background] |
| Button Background Hover | WooCommerce › Colors › Menu Mini Cart | Colour | — (empty) | GP Premium — WooCommerce | generate_settings[wc_mini_cart_button_background_hover] |
| Button Text | WooCommerce › Colors › Menu Mini Cart | Colour | — (empty) | GP Premium — WooCommerce | generate_settings[wc_mini_cart_button_text] |
| Button Text Hover | WooCommerce › Colors › Menu Mini Cart | Colour | — (empty) | GP Premium — WooCommerce | generate_settings[wc_mini_cart_button_text_hover] |
| Slider Background Color | WooCommerce › Colors › Price Slider Widget | Colour | #dddddd | GP Premium — WooCommerce | generate_settings[wc_price_slider_background_color] |
| Slider Bar Color | WooCommerce › Colors › Price Slider Widget | Colour | #666666 | GP Premium — WooCommerce | generate_settings[wc_price_slider_bar_color] |
| Product Tab Text | WooCommerce › Colors › Product Tabs | Colour | #222222 | GP Premium — WooCommerce | generate_settings[wc_product_tab] |
| Product Tab Active | WooCommerce › Colors › Product Tabs | Colour | #1e73be | GP Premium — WooCommerce | generate_settings[wc_product_tab_highlight] |
| Success Message Background | WooCommerce › Colors › Messages | Colour | #0b9444 | GP Premium — WooCommerce | generate_settings[wc_success_message_background] |
| Success Message Text | WooCommerce › Colors › Messages | Colour | #ffffff | GP Premium — WooCommerce | generate_settings[wc_success_message_text] |
| Info Message Background | WooCommerce › Colors › Messages | Colour | #1e73be | GP Premium — WooCommerce | generate_settings[wc_info_message_background] |
| Info Message Text | WooCommerce › Colors › Messages | Colour | #ffffff | GP Premium — WooCommerce | generate_settings[wc_info_message_text] |
| Error Message Background | WooCommerce › Colors › Messages | Colour | #e8626d | GP Premium — WooCommerce | generate_settings[wc_error_message_background] |
| Error Message Text | WooCommerce › Colors › Messages | Colour | #ffffff | GP Premium — WooCommerce | generate_settings[wc_error_message_text] |
Settings can be changed in code with the option_generate_woocommerce_settings filter (layout) and option_generate_settings (colours).
Related
- Primary Navigation — menu locations and menu bar items
- Sidebars — sidebar layouts
- Colors — site colours
- Elements › Layout Elements — layouts for product categories and other shop pages
- Developer reference: Settings defaults filters, WooCommerce filters