How Do I Integrate/Sync WooCommerce with BYI’s Product Designer?

In order to integrate your Magento Product Designer with your Woocommerce store, make sure you’ve successfully installed and activated the extension. To check that, on the Product designer backend navigate to:

  • STORES -> Configuration. 

If you can see the ‘Product Designer Settings’ under BRUSH YOUR IDEAS tab then the tool is successfully installed. If not, visit “Product Designer installation guide” and carefully follow each and every installation step. If your tool is successfully installed, integrate and sync your tool with your woocommerce store to get your product customization started.

WOOCOMMERCE PRODUCT DESIGNER APP BACKEND CONFIGURATION:

After installing the “Brush Your Ideas” designer tool, when you open your WordPress back-end you’ll be able to see the Woocommerce option in the left panel.

  • Navigate to WooCommerce -> Settings -> BYI Settings tab.
  • By clicking on the “BYI Settings” tab, you will find the two sub-tabs named Customization and Configuration.

Customization: 

  • The customization settings are the same as the settings in the magento product designer tool. 
  • The general configurations to enable basic designing features are to be configured here. 
  • Make changes in the custom design button and edit it so that it matches your store: 

 Design Tool Button Text: Insert the button text by which the customer will be redirected to the “Product Designer” Page for that product.

Custom CSS: Design the text by inserting the CSS code. Click “Save changes”.

Configuration

  • Now, by clicking on Configurations, the “Store Configuration” will appear. In this section you need to add the store URLs, consumer key, activation key and all other integration details. 
  • These keys also need to be entered in the magento panel. For that go to Magento dashboard -> In the left panel click System -> Integration ->  Create User -> Select woocommerce -> integration details -> You’ll be asked to enter all those keys that you entered in wordpress. Add the same keys. 
  • After everything is set up, click on the Save Changes button to save the changes. Voila! Your magento and woocommerce will be synched!

BYI-WooCommerce Solution also enables you to access and synchronize data of following WooCommerce modules into the Designer Tool backend: Product Categories, Products, Orders, Users (Customers).

WOOCOMMERCE PRODUCT DESIGNER APP BACKEND CONFIGURATION:

Once the modules and their relevant data have been synchronized into the designer tool, you can manage the following configurations from the designer tool backend.

Go to: Stores → Configuration → Product Designer API Configuration

  1. General

You must insert the following details:

Source System Base URL: Insert your Source System Base URL.

i.e. https://domain.com/

Customer Login URL: Insert URL Source System Login.

i.e. https://domain.com/account/login/

Customer Logout URL: Insert URL Source System Logout.

i.e. https://domain.com/account/logout/

Customer Authenticate URL: Insert source system URL for “customer authenticate” to check customer login sessions.

i.e.https://domain.com/account/checklogin

Add To Cart URL: Insert source system URL for “Add To Cart”.

i.e. https://domain.com/save/cart/

Save Design URL: Insert Source system URL for Save/Update Design/Image.

i.e. https://domain.com/account/saveDesignerUrl/

Locale: Select your language for your store view.

Base Currency: Select default currency to display on your website for the designer tool.

  1. Third-Party System Information

Insert the following details of the Third-Party System Information:

App URL: Insert URL for your App.

API Key: Insert the API key of the source system.

Access Token key: Insert Token key of the source system.

  1. Header Configurations

You can manage the following header details of the Shopify user page:

Favicon Image: To specify the favicon image of the product designer page.

Logo Image: To specify the logo image for the product designer page.

Logo Image Alt: To specify the text for the logo image.

Related Articles