Custom Fields Plugin Compatibility

Commerce Connect is compatible with WordPress® custom fields plugins including Advanced Custom Fields (ACF), Pods, Meta Box, and Carbon Fields.

Overview

Commerce Connect products sync from BigCommerce as the source of truth, but you can extend them with WordPress® custom fields plugins. This allows you to add custom metadata that lives in WordPress® while keeping core product data (price, description, inventory) managed in BigCommerce.

This integration pattern is powerful for adding rich content that doesn’t belong in your commerce platform but enhances the customer experience on WordPress®.

Understanding Read-Only Products

When you navigate to Commerce Connect > Products in WordPress® admin, you’ll see two edit options for each product:

• Edit in BigCommerce - Opens the product in BigCommerce where you manage price, description, inventory, images, variants, and all core commerce data
• Edit in WordPress® - Opens the WordPress® product editor where core fields are read-only but you can add WordPress®-specific metadata via plugins

Why are products read-only in WordPress®?

BigCommerce is the single source of truth for product data. Making product fields read-only in WordPress® prevents conflicts between the two systems. When you sync a product update from BigCommerce, there’s no risk of overwriting changes someone made in WordPress®.

Setup

Prerequisites

1. Commerce Connect Connect plugin installed and configured
2. Products synced from BigCommerce
3. Advanced Custom Fields Pro plugin installed

Installing ACF

# Install via WordPress® admin
# Plugins > Add New > Search "Advanced Custom Fields"
# Or install ACF Pro from your account

Creating Custom Field Groups

In ACF > Field Groups, create a new field group:

1. Click Add New
2. Set Title: “Product Extras” (or your preferred name)
3. Add your custom fields (examples below)
4. Under Location Rules, set:
   • Post Type is equal to product
5. Publish the field group

Use Cases

Size Chart

Add a file upload field for downloadable size charts:

Field Configuration:

• Field Label: Size Chart
• Field Name: size_chart
• Field Type: File

Display in template:

<?php
// In your product template
$size_chart = get_field('size_chart');
if ($size_chart): ?>
  <div class="product-size-chart">
    <h3>Size Chart</h3>
    <a href="<?php echo esc_url($size_chart['url']); ?>"
       download
       class="btn-download">
      Download Size Chart (<?php echo $size_chart['filesize']; ?>)
    </a>
  </div>
<?php endif; ?>

Care Instructions

Add a WYSIWYG field for detailed care instructions:

Field Configuration:

• Field Label: Care Instructions
• Field Name: care_instructions
• Field Type: WYSIWYG Editor

Display in template:

<?php
$care_instructions = get_field('care_instructions');
if ($care_instructions): ?>
  <div class="product-care">
    <h3>Care Instructions</h3>
    <?php echo wp_kses_post($care_instructions); ?>
  </div>
<?php endif; ?>

Shipping Details

Add custom shipping messaging for specific products:

Field Configuration:

• Field Label: Special Shipping Notes
• Field Name: shipping_notes
• Field Type: Text Area

Display in cart/checkout:

<?php
// Hook into cart display
add_filter('woocommerce_cart_item_name', function($product_name, $cart_item) {
  $product_id = $cart_item['product_id'];
  $shipping_notes = get_field('shipping_notes', $product_id);

  if ($shipping_notes) {
    $product_name .= sprintf(
      '<div class="shipping-notice">%s</div>',
      esc_html($shipping_notes)
    );
  }

  return $product_name;
}, 10, 2);

Product Badges

Add conditional badges based on custom fields:

Field Configuration:

• Field Label: Product Badge
• Field Name: product_badge
• Field Type: Select
• Choices:
  • New Arrival
  • Best Seller
  • Limited Edition
  • Sustainable

Display in product grid:

<?php
$badge = get_field('product_badge', get_the_ID());
if ($badge): ?>
  <span class="product-badge badge-<?php echo sanitize_html_class(strtolower($badge)); ?>">
    <?php echo esc_html($badge); ?>
  </span>
<?php endif; ?>

Code Examples

Displaying ACF Fields in Single Product Block

Since Commerce Connect uses the block editor, you can create a custom block pattern that includes ACF fields:

Create a custom block pattern:

<?php
// In your theme's functions.php
function register_product_extras_pattern() {
  if (function_exists('get_field')) {
    register_block_pattern(
      'my-theme/product-with-extras',
      array(
        'title'       => 'Product with Custom Fields',
        'description' => 'Product display including ACF custom fields',
        'content'     => '
          <!-- wp:group {"className":"product-extras"} -->
          <div class="wp-block-group product-extras">
            ' . get_acf_content() . '
          </div>
          <!-- /wp:group -->
        ',
        'categories'  => array('wpe-commerce'),
      )
    );
  }
}
add_action('init', 'register_product_extras_pattern');

function get_acf_content() {
  ob_start();

  // Size chart
  $size_chart = get_field('size_chart');
  if ($size_chart) {
    echo '<div class="size-chart">';
    echo '<a href="' . esc_url($size_chart['url']) . '">Download Size Chart</a>';
    echo '</div>';
  }

  // Care instructions
  $care = get_field('care_instructions');
  if ($care) {
    echo '<div class="care-instructions">';
    echo wp_kses_post($care);
    echo '</div>';
  }

  return ob_get_clean();
}

Adding ACF Fields to Product Archive

Display custom field data in product grids:

<?php
// Hook into Commerce Connect product grid rendering
add_action('wpe_commerce_after_product_title', function($product_id) {
  $badge = get_field('product_badge', $product_id);

  if ($badge) {
    echo sprintf(
      '<span class="product-badge">%s</span>',
      esc_html($badge)
    );
  }
}, 10, 1);

Conditional Display Based on Product Category

Show different ACF fields based on the BigCommerce category:

<?php
// In your product template
$product_categories = wp_get_post_terms(get_the_ID(), 'product_category');

if ($product_categories && !is_wp_error($product_categories)) {
  $category_names = wp_list_pluck($product_categories, 'name');

  // Show size chart only for clothing
  if (in_array('Clothing', $category_names)) {
    $size_chart = get_field('size_chart');
    if ($size_chart) {
      // Display size chart
    }
  }

  // Show care instructions for linens
  if (in_array('Linens', $category_names)) {
    $care = get_field('care_instructions');
    if ($care) {
      // Display care instructions
    }
  }
}

How to Add Fields to Synced Products

Step-by-Step Workflow

1. Navigate to Products Tab

   • Go to Commerce Connect > Products in WordPress® admin
   • Find the product you want to extend

2. Click “Edit in WordPress®”

   • This opens the WordPress® product editor
   • Notice core product fields (price, description, inventory) are grayed out/disabled
   • This is intentional - BigCommerce manages those fields

3. Scroll to ACF Field Group

   • Below the disabled product fields, you’ll see your ACF custom field group
   • Fill in your custom fields (size chart, care instructions, etc.)

4. Publish/Update

   • Click Update to save your changes
   • These custom fields are stored in WordPress® only
   • They won’t sync back to BigCommerce (by design)

5. Verify on Frontend

   • View the product page to confirm your custom fields display correctly
   • Custom fields persist across product syncs from BigCommerce

If You Need to Edit Core Product Data

If you accidentally clicked “Edit in WordPress®” but need to change price, inventory, or description:

1. Look for the “Edit in BigCommerce” button at the top of the WordPress® editor
2. Click it to open the product in BigCommerce’s admin
3. Make your changes there
4. Save in BigCommerce
5. Changes will sync to WordPress® automatically via webhook

Troubleshooting

Custom fields not appearing in product editor

Check field group location rules:

• Go to ACF > Field Groups
• Edit your field group
• Verify Location Rules include: Post Type is equal to product
• Make sure there are no conflicting rules

Changes to custom fields not saving

Verify user permissions:

• Ensure the user has permission to edit products in WordPress®
• ACF fields require the same permissions as the post type

Check for JavaScript errors:

• Open browser console (F12)
• Look for errors when clicking Update
• Disable other plugins to test for conflicts

Custom fields disappearing after product sync

This should not happen - ACF fields are WordPress® metadata, separate from synced BigCommerce data.

If this occurs:

1. Check your Commerce Connect sync settings
2. Ensure you’re not running full re-imports that delete/recreate products
3. Contact WPE support - delta sync should preserve WordPress® metadata

ACF fields showing on wrong products

Review field group location rules:

• If fields appear on all products but should only show on specific categories:
  • Add taxonomy term conditions to your field group location rules
  • Example: Product Category is equal to “Clothing”

Best Practices

1. Keep core product data in BigCommerce

   • Don’t try to override synced fields
   • Use ACF for WordPress®-specific content only

2. Use conditional logic

   • Show fields only when relevant (e.g., size chart for clothing)
   • Keeps the product editor clean

3. Document your custom fields

   • Create internal documentation explaining what each field is for
   • Include examples of when to use them

4. Test before rolling out

   • Add fields to a test product first
   • Verify they display correctly on frontend
   • Ensure they persist across BigCommerce syncs

5. Plan for scale

   • If adding custom fields to hundreds of products, consider bulk editing tools
   • ACF supports CSV import via plugins like WP All Import

Related Documentation

• SEO Plugins - Add SEO metadata to products
• Product Templates - Customize product display
• Hooks & Filters - Developer guide for custom integrations