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 AppCommerce 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.

Click "Add New Page" and choose "AppCommerce."

Create a shop page like this:

All that is required is the woo-list tag, and "Shop" selected under component. Add this page to your menu.

Note: to customize what products or categories are displayed, you can use the url parameters found in the WooCommerce Product List (woo-list) documentation. For example, you can add "products?type=simple" to show only simple products.

Next, create a cart page:

You are required to have the woo-cart tag somewhere on the page, and "Cart" selected as the component.

Do the same for the account page:

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.

Other pages

Customers can click "Add to list" on a product, which saves to their wishlist. 

To create a wishlist page, create a new custom page and choose AppCommerce. Set the component to "None" and add the following component code:

<woo-list wishlist="true"></woo-list>

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.