WooCommerce

In this article, you will find out how to create an app and mobile website from your WooCommerce desktop shop.

 

Available features

With WooCommerce and Shopgate, you are able to create your app and mobile website with the following features:

Support Import to WooCommerce
Version 2.4, 2.5 Orders
Customer Account Export to Shopgate Mobile Shop
Login with Desktop Shop Account
Login to Desktop Shop with Mobile Account
Customer Groups / Tier Pricing
Show Desktop Orders on Mobile


✘ / ✘
Products
Categories
Reviews



Sync Validate, upon Cart Changes
Delivery Status "Shipped"
Order Status "Canceled"
Stock Quantity, on Product Detail Page


Coupon
Shipping Method
Payment MethodNew!
Product Availability




Supported Payments Notes
Shopgate New! The payment validation feature allows you to offer specific payment options to targeted carts and customers.

 

Get started

Collect information

To get started, please collect the following information:

Consumer Key

Consumer Secret

Your Consumer Key and Consumer Secret are API elements used by WooCommerce to control access to your shop backend. To create or manage the keys, follow the instructions Generate API keys

Category Route

The category route is part of the URL of your web shop. You can find it between "wordpress/" and a category name.

To find out your category route, go to your webshop and click on any category. You will see the Category Route like this:

Default Product Tax Depending on your WooCommerce version, your default product tax can be "Standard" or "Default". Ask your WooCommerce support if you are not sure about this.

 

Generate API keys

To generate your WooCommerce Consumer Key and Consumer Secret, follow the steps here:

  1. Go to WooCommerce → Settings → API → Keys/Apps and select Add Key.
  2. Select a User and add a Description. Choose Read/Write access Permissions. Click Generate API Key. WooCommerce will generate API keys for that user.
  3. Now your keys have been generated. You should see your Consumer key and Consumer Secret like shown below. Enter these 2 keys in your Shopgate Admin as described in the next step.

  

Build your mobile shop

Establishing a connection to Shopgate

To establish a connection between your WooCommerce backend and your mobile shop, follow the steps here:

  1. Log in to your Shopgate Admin and navigate to Integration → Install Interface.
  2. In the drop-down labeled Select a system, start typing "WooCommerce" and select it from the list when it appears.
  3. A lightbox will open. Enter all the information shown below. The Shopgate technology will authenticate your credentials immediately.

 

If a connection is made successfully, a lightbox shown below will open. Leave all assignments to ON to access all the functions in your Shopgate mobile shop. Click Save.

That's it! Now the Shopgate backend will automatically start to import product data via the newly established interface. Welcome to the mobile world 😊

 

Set up mobile redirect

To redirect mobile visitors to your mobile website, add the following code block to your template.

To do so, follow the steps here:

  1. Locate your template on your FTP server. You should be able to find it in the file "/wp-content/themes/<your_theme_name>/header.php" in your WordPress.
  2. Add the following code block to your template right above the closing <?php wp_head(); ?> tag.
  3. Replace "YOUR SHOP NUMBER" (line 22) with your shop number at Shopgate. Where can I find my shop number?
<?php /* SHOPGATE MOBILE HEADER START */
if (!is_customize_preview() && class_exists('WooCommerce')) {
    $shopgateMobileHeader = '';
    if (is_product_category()) {
        $categoryId           = get_queried_object()->term_id;
        $shopgateMobileHeader = "_shopgate.redirect = 'category';\n\t\t";
        $shopgateMobileHeader .= "_shopgate.category_number = '{$categoryId}';";
    } elseif (is_product()) {
        $productId            = wc_get_product()->id;
        $shopgateMobileHeader = "_shopgate.redirect = 'item';\n\t\t";
        $shopgateMobileHeader .= "_shopgate.item_number = '{$productId}';";
    } elseif (is_front_page()) {
        $shopgateMobileHeader = "_shopgate.redirect = 'start';";
    } else {
        $shopgateMobileHeader = "_shopgate.redirect = 'default';";
    }

    if (!empty($shopgateMobileHeader)): ?>
        <!-- SHOPGATE MOBILE HEADER START -->
        <script type="text/javascript">
            var _shopgate = {};
            _shopgate.shop_number = "YOUR SHOP NUMBER";

            <?php echo $shopgateMobileHeader; ?>

            _shopgate.is_default_redirect_disabled = true;
            _shopgate.host = (("https:" == document.location.protocol) ? "https://static-ssl.shopgate.com" : "http://static.shopgate.com");
            document.write(unescape("%3Cscript src='" + _shopgate.host + "/mobile_header/" + _shopgate.shop_number + ".js' type='text/javascript' %3E%3C/script%3E"));
        </script>
        <!-- SHOPGATE MOBILE HEADER END -->
    <?php endif; ?>
<?php } /* SHOPGATE MOBILE HEADER END */ ?>

 

Frequently Asked Questions

Where can I update API keys and other configurations?

If you have updated your WooCommerce API keys or other configurations, you need to update the same info for your mobile shop. To do so, log into your Shopgate Admin website and click on the Actions drop-down and select Edit.

Configure your connection on the settings page below. Detailed explanations for options listed can be found below.

Debug This enables advanced debugging for identifying issues in your connection. Use ONLY when you know what you're doing.
Advanced error logging This will break ALL operations over your connection even on minor errors. Use ONLY when you know what you're doing.

Consumer Key

Consumer Secret

Category Route

Product Tax Class

Here you can update your WooCommerce API Keys and other info.
Enable base price export When turned ON, we will export base price for your products.

Do I need to update my mobile shop in the future?

You do not need to manually update your mobile shop. Whenever there is an update in the Shopgate software, we will update your shop via API method automatically.

 

Was this article helpful?
0 out of 0 found this helpful