1. 1. Upfront Installation and Overview
    1. 1.1 Upfront Basics
    2. 1.2 Choosing and Installing an Upfront Starter Theme
    3. 1.3 Installing the Upfront Builder Plugin
  2. 2. Upfront Admin Settings
    1. 2.1 General Settings
    2. 2.2 User Restrictions
    3. 2.3 Experimental Settings
  3. 3. Upfront Editor Tour
    1. 3.1 Activating the Upfront Editor
    2. 3.2 Basic Editor Tools
    3. 3.3 Media Management
    4. 3.4 Manage Posts and Pages
    5. 3.5 Drag and Drop Elements Toolbox
    6. 3.6 Global Theme Settings
    7. 3.7 How to Enable and Disable Responsive Mode
    8. 3.8 Toggling the Grid View
    9. 3.9 Saving and Exiting the Upfront Edtior
  4. 4. Upfront Theme Global Settings
  5. 5. Upfront Regions and Backgrounds
    1. 5.1 Editing, Adding, and Deleting Regions
    2. 5.2 Region Types
    3. 5.3 Region Backgrounds
    4. 5.4 Custom Region CSS
  6. 6. Upfront Elements
    1. 6.1 Using Drag & Drop
    2. 6.2 Text Element
    3. 6.3 Image and Gallery Elements
    4. 6.4 Slider Element
    5. 6.5 Map Element
    6. 6.6 Menu Element
    7. 6.7 Widget Element
    8. 6.8 YouTube and Like Box Elements
    9. 6.9 Contact Element
    10. 6.10 Code Element
    11. 6.11 Tab and Accordion Elements
    12. 6.12 Button Element
    13. 6.13 Login Element
    14. 6.14 Posts Element
  7. 7. Upfront Presets
    1. 7.1 Default Presets
    2. 7.2 Creating, Selecting, Editing and Deleting Presets
    3. 7.3 Appearance Settings and Preset CSS
  8. 8. Upfront Pages and Posts
    1. 8.1 Create A New Post
    2. 8.2 Create a New Page
  9. 9. Using the Upfront Builder
    1. 9.1 Requirements
    2. 9.2 Options
    3. 9.3 Modify Existing Theme
    4. 9.4 Create New Upfront Theme
    5. 9.5 Make Your Masterpiece
    6. 9.6 Save Your New Theme
  10. 10. Upfront MarketPress and WooCommerce Integration
    1. 10.1 Getting Started with MarketPress and WooCommerce and Upfront
    2. 10.2 Creating Upfront Store Pages with MarketPress or WooCommerce
    3. 10.3 MarketPress and WooCommerce Store Pages in the Upfront Editor
    4. 10.4 Preview of WooCommerce Pages in Upfront Starter Themes
    5. 10.5 Preview of MarketPress Pages in Upfront Starter Themes
Docs / / Upfront MarketPress and WooCommerce Integration

10. Upfront MarketPress and WooCommerce Integration

Written by Michelle Shull | Last updated: January 4, 2017

With the most recent Upfront update, we added an oft-requested new feature, support for WooCommerce and our very own MarketPress’ virtual pages. Now you can create beautiful store pages within your favorite Upfront starter theme. Woo! (*ahem*)

10.1 Getting Started with MarketPress and WooCommerce and Upfront

Link to chapter 1

Getting started with WooCommerce and Upfront is super simple.

  1. Ensure you have the latest versions of Upfront, your favorite Upfront starter theme, and the free WooCommerce plugin found on wp.org. If you want to build a WooCommerce Upfront theme from scratch, you’ll also want to install the Upfront Builder plugin.
  2. Activate both the WooCommerce Plugin and your starter theme.
  3. Start building your WooCommerce store pages via your wp-admin dashboard.
  4. Preview your store pages looking shiny in your Upfront theme.

Getting started with MarketPress and Upfront is just as simple.

  1. Ensure you have the latest version of Upfront, your favorite Upfront starter theme and/or the Upfront Builder plugin if you want to build an Upfront theme from scratch, and the most recent version of MarketPress.
  2. Activate MarketPress, and complete the setup wizard if you haven’t already. Add your store content.
  3. Activate your Upfront starter theme of choice or activate the Upfront builder with a new, blank theme.
  4. Preview your MarketPress pages looking just as shiny as the Woo pages from the section above.

 

10.2 Creating Upfront Store Pages with MarketPress or WooCommerce

Link to chapter 2

Working with your WooCommerce and MarketPress content works just like always. You’ll add your products, product categories, and store pages from your WordPress admin area.

Upfront supports all of MarketPress and WooCommerce’s widgets, so these can be added to your pages via the Upfront editor, and you can continue to make styling decisions on your store pages.

 

10.3 MarketPress and WooCommerce Store Pages in the Upfront Editor

Link to chapter 3

Since your store content isn’t handled by Upfront, you’ll see placeholders for product text, price, tags, categories, descriptions, and images when you look at a store or product page within the Upfront editor.

You may still edit the regions and backgrounds on your MarketPress and WooCommerce pages, and you can drag in Upfront elements as well.

WooCommerce

upfront_woo_content_in_editor_shop_page

upfront_woo_content_in_editor_single_product

MarketPress

upfront_mp_editor_example

10.4 Preview of WooCommerce Pages in Upfront Starter Themes

Link to chapter 4

Get an idea of how WooCommerce and Upfront work together with the examples below.

Shop Page

upfront_parrot_woo_shop

Using Parrot starter theme.

Single Simple Product

upfront_lukesara_woo_simple_product

Using Luke & Sara

Sale Product

upfront_gillie_woo_sale_product

Using Gillie

Product with Variations

upfront_spirit_woo_product_with_variations

Using Spirit

My Account Page

upfront_fixer_woo_myaccount

Using Fixer

Related Products

upfront_issue_woo_related_products

Using Issue

Cart

upfront_panino_woo_cart

Using Panino

Checkout

upfront_scribe_woo_checkout

Using Scribe.

 

10.5 Preview of MarketPress Pages in Upfront Starter Themes

Link to chapter 5

Product Page

upfront_mp_product_page_issue

Using Issue

Simple Product

upfront_mp_simple_product_lukesara

Using Luke & Sara

Product with Variations

upfront_mp_multivari_scribe

Using Scribe

Sale Product

upfront_mp_sale_product_spirit

Using Spirit

Order Status

upfront_mp_order_status_gillie

Using Gillie

Cart

upfront_mp_cart_fixer

Using Fixer

Checkout

upfront_mp_checkout_panino

Using Panino