AppCommerce Setup

Requirements:

  • AppPresser plugin setup and active
  • AppCommerce plugin active
  • WooCommerce 3.5 or later active, with API enabled
  • Cart, shop, and account pages created in your app

Setup at a glance:

  1. Install and activate the AppCommerce plugin
  2. Activate the WooCommerce REST API, and generate a read-only key
  3. Add your key and secret in the app integration settings
  4. Create your cart, shop, and account pages, add them to your menu, and rebuild your app
  5. Enable the HTTP Authorization Header on your server (if required)

Video

AppCommerce Plugin Installation

  1. Download AppCommerce from your account page.
  2. Upload the plugin .zip file under Plugins => Add New => Upload. Activate the plugin.
  3. Visit the AppPresser settings => Licenses and add your license key (for automatic updates)
  4. Visit Settings => Permalinks and press save (You don't need to change anything, this just flushes the permalink cache)

WooCommerce REST API Key

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

Next, click "Add Key."

Give your key a description, and choose your user. Use "Read" for permissions, and click "Generate API Key".

Copy the consumer key and consumer secret to a separate document.

Add your key and secret to app integrations

Visit your myapppresser.com app dashboard, and click your app.

Visit the "Integrations" tab.

Scroll down to "WooCommerce API Key" and add your key and secret, then save.

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 REST API 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 use the url parameters found in the WooCommerce REST API documentation. For example, you can add "products?type=simple" to show only simple products. Please see this article for information on customization.

Checkout

Checkout happens on your website through the in app browser. We recommend using the  WooCommerce Smart Checkout plugin for the best experience.

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.