Using Canva with WooCommerce

Now that your setup is complete, follow these steps to design and update product imagery directly from WooCommerce into Canva and save them back to your store.

Step 1: Launch "Design with Canva" from Product Edit Page

• What to click: Go to Products > All Products and click Edit on the product you want to design (e.g., Nike Air Jordan 1 Low).
• What to do: In the right-hand sidebar, locate the Design with Canva meta box (placed above or below the Product Image box) and click the blue Design with Canva button.
• Expected result: Canva opens in a new browser tab with a design canvas automatically scaled to your product's image dimensions.

Step 2: Quick Launch from Products List (Row Action)

• What to click: Go to Products > All Products in WordPress Admin.
• What to do: Hover your mouse over any product row to reveal the quick action links, then click Design with Canva (highlighted in purple).
• Expected result: Canva opens directly for that product in a new tab without having to load the full edit page first.

Step 3: Open Webkul App in Canva Sidebar

• What to click: Inside the Canva editor, click the Webkul App icon in the left-hand sidebar navigation.
• What you will see: The Webkul App panel opens, displaying the Current Product details:
  • Product Title & SKU
  • Price & Variation selector dropdown
  • Product thumbnail and gallery images
  • Add Description / Add Name buttons
• Expected result: You can access all product data directly within Canva without switching browser tabs.

Step 4: Search & Switch Store Products

• What to do: Use the search bar inside the Webkul App sidebar to find any product in your WooCommerce catalogue by name or SKU.
• What to click: Click on any search result to switch products immediately.
• Expected result: The sidebar updates instantly with the selected product's information and assets, allowing multi-product designing in a single session.

Step 5: Design & Edit on the Canvas

• What to do:
  1. Click on the product image thumbnail in the sidebar to add or replace images on the canvas.
  2. Select product variations to load variation-specific imagery.
  3. Use Canva's rich design tools — add typography, remove backgrounds, apply shadows, add promo badges, adjust colors, and apply effects.
• Expected result: A high-quality, branded product graphic ready to publish back to your WooCommerce store.

Step 6: Save Design Back to WooCommerce Store

• What to click: In the Webkul App sidebar, locate the Save Design to Store section.
• What to select: Choose where you want to apply the new design:
  • Main Featured Image: Replaces the primary featured image of the product.
  • Variation Image: Attaches the design to a specific product variation.
• What to click: Click the purple Save Design to Store button.
• Expected result: Canva renders the design, securely transfers it to your WordPress Media Library, and links it directly to the product.

Step 7: Return to Store & Verify Updated Imagery

• What to click: Click Return to {your store} at the top right of the Canva editor (or return to your open WordPress tab).
• What you will see: The product edit screen refreshes with the new design set as the Product Image or variation image.
• Expected result: Your WooCommerce store displays the new high-resolution Canva graphic live on the storefront.