Ionic 5 Full Starter App
  • Enappd Apps
  • Ionic 5 Full App
    • What is Ionic 5 Full App?
    • Template Features
    • Initial Setup
      • Environment Configuration
      • Credentials
    • Running the app
    • Deploying app as PWA
    • Building App on device
    • How to use this template?
      • Copy a module to another app
      • Shared Component & Modules
      • Map Service
    • Beginner Pack Features
      • Firebase
      • Layouts
      • Sidemenus
      • Login and Signups
      • Chat screens
      • Chat Lists
      • Video Playlists
      • Grids and Lists Layouts
    • Startup Pack Features
      • Wordpress
        • Wordpress JSON API Basics
        • Wordpress in Ionic 5 Full App
      • Translation - Multi-language
      • Using Custom Fonts
      • Infinite scroll
      • Content Loaders
      • Pull to refresh
      • List re-ordering
      • Date Pickers
    • Pro Pack Features
      • Phaser Game Framework
      • AdMob Integration
        • AdMob Introduction
        • Setting up Google Admob
        • Integration
      • Social Sharing
      • QR and Barcode Scanning
      • Google Places
      • Google Autocomplete
      • Social Logins
        • Google Login
        • Facebook Login
        • Twitter Login
      • Woo-commerce Integration
    • Removing a Page / Component
    • Removing a plugin
    • FAQs
    • Changelog
    • Troubleshoot
Powered by GitBook
On this page
  • Contents
  • Connecting to Woocommerce
  • Authentication

Was this helpful?

  1. Ionic 5 Full App
  2. Pro Pack Features

Woo-commerce Integration

Learn how to use Woo-commerce integration from Ionic 5 Full App

Woocommerce pages can be found at src/app/pages/woocommerce and the service functions can be found atsrc/app/services/woocommerce

Contents

  • Shop Page - woocommerce-products

    Fetches all products. Filters can be used here

  • Product Detail Page - product-details

    • All product details shown here

  • Cart Page - cart

    • Cart page for selected products

  • Checkout - checkout

    • Checkout page with payment methods

  • Orders

    • Order history page for previous orders

  • Order-details

    • Previous order details

Connecting to Woocommerce

To connect the app to Woocommerce, you need the

  • Base URL - the url of your wordpress installation

  • Consumer Key - Found from Woocommerce settings

  • Consumer Secret - Found from Woocommerce settings

You can change these in src/app/services/woocommerce/woo-commerce.service.ts

Authentication

WooCommerce includes two ways to authenticate with the WP REST API. It is also possible to authenticate using any WP REST API authentication plugin or method. For sake of simplicity, we have directly used userID for placing orders etc.

Details of authentication can be found in official Woocommerce documentation.

Similarly, check details of API parameters and models for all methods on following links

  • Shop Page

  • Product Detail Page

    • Product attributes

    • Product attribute terms

    • Product Categories

    • Product Tags

  • Checkout

    • Payment gateways

  • Orders

    • Create order

    • List previous orders

    • Get an order detail

  • User related functions

All these functions can be found in src/app/services/woocommerce in Ionic 5 Full App.

PreviousTwitter LoginNextRemoving a Page / Component

Last updated 5 years ago

Was this helpful?

Shop page / Products
Product detail page
Order history
Order details