Configuration: Canva Connect Settings

After installing the plugin, configure your Canva Developer credentials from Webkul WC Addons > Canva Connect (or Settings > Canva Connect). The settings screen requires the manage_woocommerce capability.

The settings page is located at:

https://your-domain.com/wp-admin/admin.php?page=wkwc-canva-connect

Settings Overview

Every value is sanitised before it is saved, and the form is protected by the wkwc_settings_action nonce.

App ID

Paste the App ID you copied from Your apps in the Developer Portal. It begins with AAG…, for example AAHOGOJacpE.

This is used for strict security validation. Every request the Canva app makes to your store carries a Canva-issued RS256 JWT, and the plugin compares that token's aud claim against this value before doing anything with it.

⚠ Do not leave this field empty. The aud comparison only executes when the field has a value. With it blank, any Canva app presenting a validly signed token is accepted, and could read your catalogue or overwrite product images.

Client ID

Paste the Client ID from your Canva Integration. It begins with OC-…, for example OC-AZ_6NBnoLhwl.

The Client ID identifies your store to Canva during the OAuth2 handshake. If it is missing, clicking Design with Canva returns:

{
  "code": "no_key",
  "message": "Client ID not set.",
  "data": { "status": 400 }
}

Client Secret

Paste the Client Secret generated alongside your Client ID. The field is rendered as a password input, so the stored value is masked on screen.

The secret is combined with the Client ID into an HTTP Basic Authorization header when the plugin exchanges an authorization code, or a refresh token, for an access token at https://api.canva.com/rest/v1/oauth/token.

⚠ Rotating the secret in the Developer Portal invalidates the one saved here. Update this field immediately afterwards, or every design attempt will fail at the token exchange.

Disable CORS Headers

Leave this unchecked on a standard installation.

The Canva app runs inside an iframe served from https://app-{app-id}.canva-apps.com, so every call it makes to your store is cross-origin and preceded by a preflight request. By default the plugin answers those preflights for the canva/v1 namespace and sends:

Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Authorization, Content-Type
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Max-Age: 86400
Vary: Origin

Tick the box only if your web server already adds its own Access-Control-Allow-Origin header, for instance through an Apache Header always add rule or an Nginx add_header directive. Two copies of that header is a hard browser error ("contains multiple values … but only one is allowed"), and PHP cannot remove one the web server appends after PHP has finished running.

When ticked, the plugin stops sending Access-Control-Allow-Origin but still sends the other headers, because hand-written server CORS blocks commonly omit Authorization from Access-Control-Allow-Headers, which would break every bearer-token request the app makes.

Access-Control-Allow-Credentials is deliberately never sent: browsers reject the combination of a wildcard origin and credentials, and the app authenticates with a bearer token rather than cookies.

Restricting the origin in code

If a wildcard origin is too permissive for your policy, narrow it with the provided filter instead of disabling the headers:

add_filter(
    'wkwc_canva_allowed_origin',
    function ( $origin, $request_origin ) {
        $app_id = strtolower( get_option( 'canva_app_id' ) );

        return 'https://app-' . $app_id . '.canva-apps.com';
    },
    10,
    2
);

Returning an empty string from this filter omits the header entirely and blocks all cross-origin browser calls.

Important URLs

Below the form the page prints the two URLs that must be registered on your Canva Integration:

Always copy these from your own settings page rather than typing them by hand, they are generated with rest_url(), so they already reflect your site address, any subdirectory install and your permalink structure.

See Redirect URIs & HTTPS for what each URL does and why HTTPS is non-negotiable.

Saving

Click Save Settings. A Settings saved. notice confirms the update.

Nothing else needs to be configured on the WordPress side, there are no per-product settings, and no shortcodes to place.

Verifying the Configuration

1. Open any product for editing.
2. Confirm the Design with Canva meta box is present in the right-hand column.
3. Click the button. On the first run Canva shows its consent screen; approve it.
4. You should land in the Canva editor on a canvas sized to your product image.

If step 3 or 4 fails, check Troubleshooting.