How Hub

NCC E-cards – Adding and Testing a New E-Card

Updated:

Categories: ,

Author:

zeitguys

To add a new e-card to giving.natureconservancy.ca, ensure you have the following details:

  • Heading
  • Card Title
  • E-card Category
  • Product Description
  • Short Description
  • Default Message
  • Image (saved in both English and French)
  • Image Alt-Text
  • Photo Credit
  • Package Code/SKU

This information can be found in the provided spreadsheet.

Image Preparation & Upload

  1. Download the image from the link in the spreadsheet.
  2. Resize to match existing e-cards.
  3. Save two versions:
    • English: ecard-{subject}-en.jpg
    • French: ecard-{subject}-fr.jpg
      • (Example: ecard-cardinal-en.jpg, ecard-cardinal-fr.jpg)
  4. Upload both images to the media library and assign them as the product image.

Product Data Configuration

  1. Set the Product Type to Variable Product.
  2. Inventory Tab: Enter the product SKU in the designated field.
  3. Attributes Tab:
    • Add a new attribute titled “Please select your donation amount.”
    • Enter the following values: $25 | $50 | $100 | $150 | $200.
    • Uncheck “Visible on the product page.”
    • Save the attributes.
  4. Variations Tab:
    • Generate variations.
    • Click “Add Prices” and specify the price range as [min price] – [max price].
    • Save the changes.

Adding the E-Card

  1. In the WordPress admin panel, navigate to E-Cards in the sidebar and click “New E-Card”
  2. Copy the Product E-Card Slug/Link and paste it into the “Add title” field. This will automatically inject the correct slug into the E-Card Link.
  3. Replace the title with the actual E-Card Title (e.g., Holiday E-Card – Cardinal).
  4. Ensure the slug matches the one on the Products page.
  5. Assign the appropriate E-Card Category and click Publish.
  6. Repeat the process for the French version.

Testing the E-Card

  1. Visit the newly added e-card on the website.
  2. Select a donation amount and click “Add to Cart.”
  3. Click “Proceed to Personalize Gifts.”
  4. Enter the following test details:
    • Recipient Name
    • Recipient Email Address
    • Sender Name
    • Personalized Message (e.g., “This is a test.”)
    • Preview the e-card to verify its appearance.
    • Click “Proceed to Checkout.”

Payment Testing

  1. Under Total, confirm that “TEST MODE ENABLED” is displayed.
  2. Enter the test credit card details:
    • Card Number: 4222222222222220
    • Expiry Date: Any future date
    • CVC: Any three digits
  3. In the Billing Information section, enter a valid Contact Email Address (accessible for confirmation emails). Other billing details can be arbitrary.
  4. Click “Place Order.”

Verifying Confirmation Emails

  1. Check the Recipient Email Address and Contact Email Address for the following emails:
    • Order Confirmation: “Thank you for your gift [Contact Name], here is your order confirmation.”
    • E-Card Notification: “[Recipient Name] has sent you an E-Card from The Nature Conservancy of Canada!”
  2. In the second email (recipient notification), click “View your e-card here!” and confirm that the e-card displays correctly.

Once these steps are completed and verified, the e-card is successfully added and ready for use.

zeitguys