Setting up your websites for WordPress and nopCommerce Integration

Setting up your websites for WordPress and nopCommerce Integration is quite easy. Make sure you have installed all the necessary plugins / add-ons and have configured your WordPress site and nopCommerce store site as per the installation guide.

Setting up your nopCommerce site for the integration

Once you have installed the plugin "Misc.WordPressIntegration", open the "Configure" page by clicking on the configure button from your plugin list.

Here is the direct URL to access the configure page: /Admin/Widget/ConfigureWidget?systemName=Misc.WordPressIntegration

1) Allow NopCatalog Navigation In Wordpress

ENABLE this option if you are planning to display nopCommerce products on your WordPress site

2) Is WordPress CartIntegration Allowed

ENABLE this option if you are planning to give checkout option to your WordPress users and they will be navigated to your nopCommerce site to finish the checkout process & pay for the order.

3) Is User Integration Allowed

ENABLE this option if you would like to sync customer data with WordPress users (meaning: all new customers created or registered on your nopCommerce site will be created on your WordPress site as well. Your customers will be able to login to your WordPress site with the same password. 

NOTE: You will have to provide a WordPress DOMAIN, USERNAME and PASSWORD of a user from WordPress site that has admin privileges. 

Required plugins on your WordPress site (in order for this option to work):

1) Install WordPress REST API (Version 2) on your WordPress site

2) Install HTTP Headers on your WordPress site

NOTE: In HTTP Headers settings, enable "Access Control" configure following:

Access-Control-Allow-Origin * ON
Access-Control-Allow-Credentials true ON
Access-Control-Allow-Methods GET, POST, OPTIONS, HEAD, PUT, DELETE, TRACE, CONNECT, PATCH ON
Access-Control-Allow-Headers Accept, Authorization, Cookie ON

3) Install Basic Authentication handler on your WordPress site

4) Is WordPress Blog Integration Allowed

ENABLE this option if you would like to display blog content from a WordPress site on your nopCommerce store site in a widget zone.

NOTE: You will have to provide a WordPress DOMAIN, USERNAME and PASSWORD of a user from WordPress site that has admin privileges. In addition to that, you will have to provide a blog post count and widget zone name from the dropdown menu.

Required plugins on your WordPress site (in order for this option to work):

1) Install WordPress REST API (Version 2) on your WordPress site

2) Install HTTP Headers on your WordPress site

NOTE: In HTTP Headers settings, enable "Access Control" configure following:

Access-Control-Allow-Origin * ON
Access-Control-Allow-Credentials true ON
Access-Control-Allow-Methods GET, POST, OPTIONS, HEAD, PUT, DELETE, TRACE, CONNECT, PATCH ON
Access-Control-Allow-Headers Accept, Authorization, Cookie ON

3) Install Basic Authentication handler on your WordPress site

Setting up your WordPress site for the integration

Once you have installed the plugin "nopCommerce Integration", you should see a "Nop Integration" menu on the side bar in dashboard. 

1) Setup Authentication

Select Nop Integration > Oauth Client Settings

Add the Client ID and Client Secret Key from the API plugin (in nopCommerce)

NOTE: DO NOT touch the "Callback URL", you need to copy this URL and paste it in your API plugin client key setup (in nopCommerce)

2) API Settings

Select Nop Integration > API Settings

- General Settings TAB:

"Enable NOP Registration" and enter the role in the textbox below - ENABLE this option if you would like to sync customer data with nopCommerce customerss (meaning: all new users created or registered on your WordPress site will be created on your nopCommerce site as well. Your users will be able to login to your nopCommerce site with the same password during checkout process.

- Api Configuration TAB:

"Configuration for API Url" and enter the domain of your nopCommerce site in the textbox provided

3) Register Users

Select Nop Integration > Register Users

This registration forms can be used by WordPress administrators to add new users manually in WordPress and those users will be created in nopCommerce as well as a customer with same password.

WordPress Short Codes

Category Tree

[display_categories_tree]

Product catalog

[NOP_categories]

*A page is needed to display product catalog i.e. categories and products (make sure to name page "Products", URL should have "products"). This is required with category tree.

Product Detail

[display_product]

*A page is needed to display product details (make sure to name page "Product-Details", URL should have "product-details"). This is required with category tree and product catalog.

Single Product

[Nop_Catalog_Product id=1]

*This short code can be placed anywhere where you would like to display a single product with add to cart button.

* where id is the id of your nopCommerce product

Category Tree (limited to a store)

[display_categories_tree_store id=1] 

* where id is the id of your nopCommerce store

Product Search

[NOP_Search_Form_Sidebar]

Product Search (limited to a store)

[NOP_Search_Form_Sidebar id=1]

* where id is the id of your nopCommerce store to limit search results from a particular store only

Search Results

[NOP_Search_Form]

*A page is needed to display search results (make sure to name page "Search", URL should have "search"). This is required with product search.

Shopping Cart

[Nop_Shopping_Cart]

Homepage / Featured Categories

[Nop_Catalog_Homepage_Categories]

Homepage / Featured Products

[Nop_Catalog_Homepage_Products]

Orders

[Nop_Customer_Orders]

*A page is needed to display order list for the logged in user / customer (make sure to name page "Orders", URL should have "orders")

Order Detail

[Nop_Order_Details]

*A page is needed to display order details (make sure to name page "Order-Details", URL should have "order-details"). This is required with Orders.

DISCLAIMER: This integration is NOT ready for production. The idea behind this integration is only to show a development approach by which WordPress and nopCommerce can be integrated.