{"id":412,"date":"2019-04-24T16:39:58","date_gmt":"2019-04-24T16:39:58","guid":{"rendered":"https:\/\/docs.generatepress.com\/?post_type=keep_articles&p=412"},"modified":"2019-04-24T16:39:58","modified_gmt":"2019-04-24T16:39:58","slug":"woocommerce-overview","status":"publish","type":"keep_articles","link":"https:\/\/docs.generatepress.com\/article\/woocommerce-overview\/","title":{"rendered":"WooCommerce Overview"},"content":{"rendered":"\n

GP Premium has an awesome WooCommerce (WC) add-on which gives you layout, color and typography options for your WC elements.<\/p>\n\n\n\n

In order to activate the WC add-on, you must have WC installed and activated. Then you can activate the add-on in Appearance > GeneratePress<\/strong>.<\/p>\n\n\n\n

Layout<\/h2>\n\n\n\n

Most of the WC options are layout options, which you can find in Customize > Layout > WooCommerce<\/strong>.<\/p>\n\n\n\n

General<\/h3>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n

Display cart in menu<\/strong> – Adds a cart icon with the total price of your items in the primary navigation.
You must have a theme location set<\/a> for your primary navigation.\n\n<\/p>\n\n\n\n

Display mini cart sub-menu<\/strong> – Show a mini cart when the icon above is hovered.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Menu Item Icons<\/strong> – Choose to use cart, bag or basket as the icon.<\/p>\n\n\n\n

Menu Item Content<\/strong> – Choose to display the amount of number of items.<\/p>\n\n\n\n

Display breadcrumbs<\/strong> – turn the WC breadcrumbs on or off.<\/p>\n<\/div>\n<\/div>\n\n\n\n

Shop<\/h3>\n\n\n\n

These options relate to your main shop\/product archive pages.<\/p>\n\n\n\n

\n
\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n\n
\n

Sidebar layout<\/strong> – Choose the sidebar layout of your shop.<\/p>\n\n\n\n

Product columns<\/strong> – Choose the number of columns to display your products in. Use the toggle to set specific number for mobile.<\/p>\n\n\n\n

Image alignment<\/strong> – Choose the product image alignment. You typically only want to align it to the left or right if your product columns are set to 1.<\/p>\n\n\n\n

Products per page<\/strong> – Choose the number of products to display on each page. <\/p>\n\n\n\n

Text alignment<\/strong> – Choose the alignment of the product content (title, price, description etc..)<\/p>\n\n\n\n

Display cart panel on add to cart<\/strong> – Show the cart panel when add to cart is clicked.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Display page title<\/strong> – Choose to display the page title.<\/p>\n\n\n\n

Display product results count<\/strong><\/p>\n\n\n\n

Display product sorting<\/strong><\/p>\n\n\n\n

Display product image<\/strong><\/p>\n\n\n\n

Display secondary product image on hover<\/strong> – If you have more than 1 image set for your product, this option can show the second image when you hover over the primary image.<\/p>\n\n\n\n

Display product title<\/strong><\/p>\n\n\n\n

Display sale flash<\/strong><\/p>\n\n\n\n

Sale flash over image<\/strong><\/p>\n\n\n\n

Display rating<\/strong><\/p>\n\n\n\n

Display price<\/strong><\/p>\n\n\n\n

Display add to cart button<\/strong><\/p>\n\n\n\n

Display short description<\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n

Single product<\/h3>\n\n\n\n

These options relate to your single product template.<\/p>\n\n\n\n

\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n

Sidebar Layout<\/strong> – Choose the sidebar layout of the single product pages.<\/p>\n\n\n\n

Product Image Area Width<\/strong> – Set the width of the product image area.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Display add to cart panel on scroll<\/strong> – Display the sticky cart panel when scroll.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Display quantity buttons<\/strong><\/p>\n\n\n\n

Display Sale Flash<\/strong><\/p>\n\n\n\n

Display product tabs<\/strong> – Show tabs which hold your item description, reviews, specs etc..<\/p>\n\n\n\n

Display related products<\/strong> – Show the products related to the currently viewed item.<\/p>\n\n\n\n

Display upsell products<\/strong> – Show the upsell products.<\/p>\n\n\n\n

Related\/upsell columns<\/strong> – Choose the number of columns to show the related\/upsell products in.<\/p>\n\n\n\n

Display product meta data<\/strong> – Show the meta for the current product (category, SKU etc..)<\/p>\n\n\n\n

Display short description<\/strong> – Show the short description below the product title<\/p>\n<\/div>\n<\/div>\n\n\n\n

Checkout<\/h3>\n\n\n\n
  • Distraction-free mode<\/strong> – this option disables unnecessary elements on your checkout page, including the sidebars, footer widgets and sticky menus.<\/li><\/ul>\n\n\n\n

    Colors<\/h2>\n\n\n\n

    You can adjust your WC colors inside Customize > Colors > WooCommerce<\/strong>.<\/p>\n\n\n\n

    \n
    \n
    \"\"<\/figure>\n<\/div>\n\n\n\n
    \n
    \"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
    \n
    \n
    \"\"<\/figure>\n<\/div>\n\n\n\n
    \n
    \"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
    \n
    \n
    \"\"<\/figure>\n<\/div>\n\n\n\n
    \n
    \"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

    Typography<\/h2>\n\n\n\n

    Typography options for WC can be found in Customize > Typography > WooCommerce<\/strong>.<\/p>\n\n\n\n

    Currently, you can edit the product title font weight, transform size and the related\/upsell title font size.<\/p>\n\n\n\n

    Promotional video<\/h2>\n\n\n\n
    \n