WooCommerce Product Attribute Shortcode

Display product attribute term meta fields that update dynamically when variations are selected.

Description

This WordPress plugin provides a shortcode that displays meta information from WooCommerce product attribute terms. The content updates automatically when a customer selects different product variations, making it perfect for displaying color descriptions, size details, or any custom attribute information.

Features

• Dynamic content updates when variations are selected
• Works with both simple and variable products
• Supports any product attribute (color, size, etc.)
• Can display term descriptions or custom term meta fields
• Compatible with page builders
• AJAX-powered for smooth user experience
• Lightweight and performant

Requirements

• WordPress 5.0 or higher
• WooCommerce 5.0 or higher
• PHP 7.4 or higher

Installation

1. Upload the plugin files to /wp-content/plugins/wc-product-attribute-shortcode/
2. Activate the plugin through the 'Plugins' menu in WordPress
3. Add the shortcode to your product pages or templates

Usage

Basic Usage

Display the description of a color attribute:

[product_attribute_meta attribute="color"]

Custom Meta Field

Display a custom meta field from an attribute:

[product_attribute_meta attribute="color" meta="custom_field_name"]

Wrapping Content (Enclosing Shortcode)

Use the {value} placeholder to wrap the attribute value in custom HTML:

[product_attribute_meta attribute="fund" meta="fund_url"]<a href="{value}">Donate Now</a>[/product_attribute_meta]

This is perfect for creating dynamic links, buttons, or any HTML structure where you need the attribute value inserted.

Shortcode Parameters

• attribute (required) - The attribute slug without the "pa_" prefix (e.g., "color", "size")
• meta (optional) - The meta field to display. Defaults to "description"
  • Built-in options: name, title, description
  • Or any custom term meta field name
• Content (optional) - Enclosing content with {value} placeholder for custom HTML wrapping

Examples

Example 1: Display Attribute Name/Title

Display the selected term name (e.g., "Red", "Blue", "Large"):

[product_attribute_meta attribute="color" meta="name"]

Example 2: Color Description

If you have a product with a "Color" attribute where the "Red" term has the description "Not very red. More like blue.", you can display it with:

[product_attribute_meta attribute="color"]

When a customer selects "Red", the shortcode will display:

Not very red. More like blue.

Example 3: Size Chart Link

If you store a size chart URL in a custom meta field called "size_chart_url":

[product_attribute_meta attribute="size" meta="size_chart_url"]

Example 4: Dynamic Button with Link

Create a button that links to a URL stored in the attribute term meta:

[product_attribute_meta attribute="fund" meta="fund_url"]<a href="{value}" class="btn btn-primary">Donate to this Fund</a>[/product_attribute_meta]

When the user selects a different fund variation, both the link URL and button update automatically.

Example 5: Image with Dynamic Source

Display an image where the source comes from attribute term meta:

[product_attribute_meta attribute="color" meta="color_swatch_image"]<img src="{value}" alt="Color Swatch" />[/product_attribute_meta]

Example 6: Using with Page Builders

The shortcode works with popular page builders like:

• Elementor (use the Shortcode widget)
• Beaver Builder (use the HTML module)
• Divi (use the Code module)
• Gutenberg (use the Shortcode block)

How It Works

1. Initial Load: When the product page loads, the shortcode displays the default selected variation's attribute information
2. Variation Change: When a customer selects a different variation, JavaScript detects the change
3. AJAX Request: The plugin fetches the new attribute term's meta information via AJAX
4. Content Update: The displayed content updates automatically without page reload

Supported Attribute Types

The plugin works with:

• Dropdown selects
• Radio buttons
• Swatches (via compatible plugins)
• Any WooCommerce variation selector

Adding Custom Meta to Attributes

To add custom meta fields to your product attributes:

1. Go to Products > Attributes in WordPress admin
2. Click on a attribute to view its terms
3. Edit a term
4. Use the description field or add custom meta using code:

// Add custom meta to a term
update_term_meta( $term_id, 'custom_field_name', 'Your custom value' );

Styling

The shortcode output is wrapped in a div with the class wc-attribute-meta-display:

<div class="wc-attribute-meta-display" data-attribute="pa_color" data-meta="description">
    [Content here]
</div>

You can style this with custom CSS:

.wc-attribute-meta-display {
    padding: 15px;
    background: #f5f5f5;
    border-radius: 5px;
    margin: 10px 0;
}

Troubleshooting

Content Not Updating

• Ensure JavaScript is not blocked on your site
• Check browser console for errors
• Verify WooCommerce variations are properly configured

No Content Displaying

• Confirm the attribute slug is correct (without "pa_" prefix)
• Check that the attribute term has a description or the specified meta field
• Verify the attribute is assigned to the product

Compatibility Issues

• Clear cache if using a caching plugin
• Disable other plugins to check for conflicts
• Ensure WooCommerce is up to date

Development

File Structure

wc-product-attribute-shortcode/
├── wc-product-attribute-shortcode.php  # Main plugin file
├── assets/
│   └── js/
│       └── product-attribute-shortcode.js  # JavaScript for dynamic updates
└── README.md

Hooks and Filters

The plugin uses standard WordPress and WooCommerce hooks:

• plugins_loaded - Initialize the plugin
• wp_enqueue_scripts - Load JavaScript on product pages
• wp_ajax_get_attribute_term_meta - AJAX handler for logged-in users
• wp_ajax_nopriv_get_attribute_term_meta - AJAX handler for guests

Support

For issues, questions, or contributions, please visit: https://github.com/WeMakeGood/wc-product-attribute-shortcode

License

This plugin is licensed under the GPL v2 or later.

Credits

Developed by WeMakeGood

Changelog

1.0.0

• Initial release
• Shortcode functionality
• Dynamic AJAX updates
• Support for custom meta fields
• Compatibility with variable and simple products