AppCommerce Setup

Requirements:

  • AppPresser plugin setup and active
  • AppCommerce plugin active
  • WooCommerce 3.5
  • Cart, shop, and account pages created in your app

Setup at a glance:

  1. Install and activate the AppCommerce plugin
  2. Create your cart, shop, and account pages, add them to your menu, and rebuild your app
  3. Enable the HTTP Authorization Header on your server (if required)

Plugin Installation

Install and activate the AppCommerce plugin. You can download it from your account page. (Click Account at the top left of your app dashboard)

Visit the WooCommerce settings page on your WordPress site, and click the advanced tab. Click "REST API" in blue. Enable the REST API if it is not already.

Add WooCommerce Pages to Your App

The last thing you need to do is add your shop, cart, and account pages to your app.

Note: If you used the WooCommerce app template, you may already have these pages created. If so, you do not need to create them again.

Visit your app customizer, and go to Custom Pages, choose Page Builder.

Click Add Block, and choose the WooCommerce Products block.

If this is your main shop page, select this option. You should only do this for one page.

By default all of your products will be shown on this page. To customize what products are displayed, add parameters like on_sale=true&type=simple,variable&category=123

See a full list of possible parameters here.

Other options:

Display - show in a single column card style list with large featured images, or a more condensed list with smaller images.
Infinite Scroll - load more products when you get to the bottom of the page.
Show Tabs - if you have a tab menu and you want the tab menu to continue to show on single product pages. This is not recommended because it makes app navigation difficult.
Search - search the products that are displayed on this page only.
Add Refresh - show a manual refresh button above the list.
Hide Filter - do not show the product filter button.
Show Reviews - show product reviews on the single product page, and allow customers to add new reviews.
Filter Categories - customize what categories are displayed on the filter modal. See this article for details.
Make shop page - use this as the main shop page, used for redirecting from the empty cart page. Only one product list should have this checked.

You can create as many product pages as you want, for example one for each major category. 

Cart Page

Next, create a cart page by visiting Custom Pages => Add New, and choose the Page Builder.

Add the cart block.

Add the page to one of your active menus, and save.

Account Page

Do the same for the account page. Create a new page, and add the account block.

Save this page and add it to your app menu.

The shop, cart, and account page are all that is required, you can now rebuild your app and try it out.

Wishlist Page

Customers can click "Add to list" on a product, which saves to their wishlist. You must add the wishlist page to your app.

To create a wishlist page, create a new custom page and choose the Page Builder. Select the WooCommerce Wishlist component, add it to your page, then save and add the page to your app menu. There are no options to configure.

Troubleshooting

If you see a connection error, you may need to enable the HTTP Authorization Header. See below.

Enable Authorization Header

Most of the shared hosting has disabled the HTTP Authorization Header by default. To enable this option you’ll need to edit your .htaccess file adding the follow

RewriteEngine on RewriteCond %{HTTP:Authorization} ^(.*) RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]

To enable this option on a WP Engine hosting you’ll need to edit your .htaccess file adding the follow

SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1

Add the code for enabling the Authorization header right before this line  # BEGIN WordPress  or ask your web host provider to make that change.

API Routes

To customize what products or categories are displayed, you can add "products?category=clothing" to only display products from a certain category. Please see this article for information on customization.

Checkout

Checkout happens on your website through the in app browser.

Customization

You can customize your WooCommerce pages, and also add other pages such as a wish list or category pages.  Please see this article for information on customization.