DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Common Ninja's Template for WooCommerce - Bring Your E-Commerce App to WooCommerce With Zero Effort
Daniel Sternlicht for Common Ninja

Posted on • Updated on

Common Ninja's Template for WooCommerce - Bring Your E-Commerce App to WooCommerce With Zero Effort

Developing a WooCommerce plugin is not the greatest experience for developers.

If you decide that you want to bring your e-commerce app to WooCommerce, you'll need to download WordPress, learn PHP, and hack your way through WordPress' different APIs and hooks in order to build the plugin you want.

It’s safe to say that if you developed the original app for Shopify, BigCommerce, or Wix, you probably didn’t use PHP as your backend, or even plain HTML. In WordPress / WooCommerce you must use both, and the plugin development process will require you to upload your plugin's files to WordPress’ plugins directory, rather than load the app remotely from a URL.

At Common Ninja, we believe that developers should focus and spend their time on building the product side of their e-commerce app, and not on the integrations with the different e-commerce platforms.

The way we do that is by creating a set of tools for e-commerce app developers that allow them to reduce the time they spend on platform integrations by 90%, and to create one universal e-commerce app for all platforms.

This is why we're so happy to introduce to you Common Ninja's template for WooCommerce β€” a simple way to bring your Shopify app to WooCommerce.

Link to the template's repository:
https://github.com/CommonNinja/woocommerce-plugin-template

How to use

1) Download || clone the following repo.

git clone https://github.com/CommonNinja/woocommerce-plugin-template.git
Enter fullscreen mode Exit fullscreen mode

2) Change the main folder's name (plugin-template) to your plugin's slug name.

  • The plugin's slug name must be unique, lower and kebab case. 3) In the plugin-template folder, rename the plugin-template.php file to the slug name you chose in the previous step. 4) Open the config.php file under the plugin-template folder and change the following details:
  • cn_app_id - Your public Common Ninja's app ID.
  • plugin_name - The name of the plugin as it will appear on WordPress's menu.
  • plugin_icon - The icon of the plugin as it will appear on WordPress's menu. (accepts url, base64 format, or relative path from the _inc folder as root). 5) In the plugin-template file, change the meta data of the plugin (the comments on top).
  • Note, the Text Domain setting must be your plugin's slug. 6) Edit and change the details on the readme.txt file under the plugin-template folder.

Please note, the actual folder that you'll use for pushing your code to WordPress's SVN repo is the main folder (the one that includes the plugin-template and assets folders).

Next steps

Once your plugin is ready, the next step will be to submit it to WordPress' plugin directory.

1) Create a .zip file from the main plugin-template folder.

2) Go to https://wordpress.org/plugins/developers/add/ and submit the zip file.

3) After WordPress' team reviews it, you'll get an email from plugins@wordpress.org. This email will contain two links. For example:

SVN URL: https://plugins.svn.wordpress.org/{PLUGIN_NAME}
Public URL: https://wordpress.org/plugins/{PLUGIN_NAME}
Enter fullscreen mode Exit fullscreen mode

4) Run the following command to download your new repository code:

svn co https://plugins.svn.wordpress.org/{PLUGIN_NAME} {PLUGIN_NAME}
Enter fullscreen mode Exit fullscreen mode

5) Copy the original code from the previous section to the trunk folder. Add the relevant assets to the assets folder (icon and banner).

Your project's file structure should look like that:

- assets
- tags
- trunk
 |__ _inc
 |__ commonninja
 |__ {PLUGIN_NAME}.php
 |__ config.php
 |__ readme.txt
Enter fullscreen mode Exit fullscreen mode

6) Browse to the plugin's folder and add the new files to svn:

cd {PLUGIN_NAME}
svn add trunk/*
svn add assets/*
Enter fullscreen mode Exit fullscreen mode

7) Commit and push changes to WordPress:

svn ci -m 'Adding first version of my plugin'
Enter fullscreen mode Exit fullscreen mode

And that's it! Your app will be ready to be used by WooCommerce users.

❓ What is Common Ninja?

Common Ninja is a platform that allows developers to build & monetize apps for e-commerce platforms very easily. With our single e-commerce API you can build your app once, and integrate it with multiple platforms like Shopify, BigCommerce, Wix, WooCommerce, and more. There's no need to rebuild the app and make it work on every platform individually.

In addition, Common Ninja offers a set of APIs and tools that help developers to boost up the development process, and provide payments and storage solutions.

πŸ“š Learn more

If you're not familiar with Common Ninja or how to build your first app using our API, here's the previous article we wrote about it.

In addition, you can use the following resources to learn more and get help:

πŸ“œ Common Ninja Docs
πŸ’¬ Discord Community

Top comments (0)

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.