Display ACF / Custom Meta for Woocommerce Product-Variations

How To
1

Hey,

what would be the best way to add additional “elements” / “meta data” to a custom woo product page created with bricks?
I am using different custom acf fields added (via custom code) to product variations (not the parent) and i would like to use this data to display more information on the front end, add individual related products for each variation, etc.

for example every variation has its on EAN / GTin that i want to display

using bricks meta data element is not working, i assume its only fetching meta data from the parent

image

cheers

2

Hi I run into the same issues. Are you able to resolve this?

3

i created a custom bricks element to display and behave the way i want

regards

1 Like
4

Hi Tos Thank You!

Sharing solution for Iconic WooCommerce Variation Customs Fields, as the plugin provided shortcode, but native shortcode in bricks do not re-render when variation is selected, so I figure out some way to get it re-render.

Paste in /bricks-child/elements folder

<?php
namespace Bricks;

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

class Iconic_Element_Shortcode extends Element {
	public $category = 'woocommerce_product';
	public $name     = 'iconic-variation-shortcode';
	public $icon     = 'ti-shortcode';

	public function get_label() {
		return esc_html__( 'Shortcode', 'bricks' );
	}

	public function set_controls() {
		$this->controls['shortcode'] = [
			'label'       => esc_html__( 'Shortcode', 'bricks' ),
			'type'        => 'textarea',
			'placeholder' => '[gallery ids="72,73,74,75,76,77" columns="3"]',
			'rerender'    => true,
		];

		$this->controls['showPlaceholder'] = [
			'label' => esc_html__( 'Don\'t render in builder', 'bricks' ),
			'type'  => 'checkbox',
		];

		$this->controls['placeholderWidth'] = [
			'label'    => esc_html__( 'Placeholder', 'bricks' ) . ': ' . esc_html__( 'Width', 'bricks' ),
			'type'     => 'number',
			'units'    => true,
			'required' => [ 'showPlaceholder', '=', true ],
		];

		$this->controls['placeholderHeight'] = [
			'label'    => esc_html__( 'Placeholder', 'bricks' ) . ': ' . esc_html__( 'Height', 'bricks' ),
			'type'     => 'number',
			'units'    => true,
			'required' => [ 'showPlaceholder', '=', true ],
		];
	}

	public function render() {
		// Don't render shortcode in builder (@since 1.7.2)
		if (
			isset( $this->settings['showPlaceholder'] ) &&
			( bricks_is_builder_call() || bricks_is_builder_iframe() || bricks_is_builder_main() )
		) {
			return $this->render_element_placeholder(
				[
					'title' => esc_html__( 'Shortcode', 'bricks' ) . ': ' . esc_html__( 'Don\'t render in builder', 'bricks' ),
					'style' => [
						'width'  => ! empty( $this->settings['placeholderWidth'] ) ? $this->settings['placeholderWidth'] : '',
						'height' => ! empty( $this->settings['placeholderHeight'] ) ? $this->settings['placeholderHeight'] : '',
					],
				]
			);
		}

		$shortcode = ! empty( $this->settings['shortcode'] ) ? stripcslashes( $this->settings['shortcode'] ) : false;

		if ( ! $shortcode ) {
			return $this->render_element_placeholder( [ 'title' => esc_html__( 'No shortcode provided.', 'bricks' ) ] );
		}

		// Render dynamic data first - shortcode attributes might depend on it
		$shortcode = $this->render_dynamic_data( $shortcode );

		// Check: Is 'popup' template
		$template_id       = 0;
		$is_popup_template = false;

		if ( strpos( $shortcode, BRICKS_DB_TEMPLATE_SLUG ) !== false ) {
			$shortcode_text = str_replace( '[', '', $shortcode );
			$shortcode_text = str_replace( ']', '', $shortcode_text );

			$shortcode_atts = shortcode_parse_atts( $shortcode_text );
			$template_id    = ! empty( $shortcode_atts['id'] ) ? intval( $shortcode_atts['id'] ) : 0;

			if ( $template_id ) {
				$is_popup_template = Templates::get_template_type( $template_id ) === 'popup';
			}
		}

		// Return: Template has not been published (@since 1.7.1)
		if ( $template_id && get_post_type( $template_id ) === BRICKS_DB_TEMPLATE_SLUG && get_post_status( $template_id ) !== 'publish' ) {
			return $this->render_element_placeholder(
				[
					'title' => esc_html__( 'Template has not been published.', 'bricks' ),
				]
			);
		}

		// Get shortcode content
		$shortcode = do_shortcode( $shortcode );

		if ( empty( $shortcode ) ) {
			return $this->render_element_placeholder( [ 'title' => esc_html__( 'Shortcode content is empty', 'bricks' ) ] );
		}
		
		$this->set_attribute( '_root', 'class', 'product_meta' );

		// Render 'popup' template without element root wrapper (@since 1.6)
		if ( $is_popup_template ) {
			echo "<div {$this->render_attributes( '_root' )}>";
			do_action( 'woocommerce_product_meta_start' );
			echo $shortcode;
			do_action( 'woocommerce_product_meta_end' );
			echo '</div>';

		} else {
			echo "<div {$this->render_attributes( '_root' )}>";
			do_action( 'woocommerce_product_meta_start' );
			echo $shortcode;
			do_action( 'woocommerce_product_meta_end' );
			echo '</div>';
		}
	}

	public function convert_element_settings_to_block( $settings ) {
		$block = [
			'blockName'    => $this->block,
			'attrs'        => [],
			'innerContent' => isset( $settings['shortcode'] ) ? [ $settings['shortcode'] ] : [ '' ],
		];

		return $block;
	}

	public function convert_block_to_element_settings( $block, $attributes ) {
		$element_settings = [
			'shortcode' => isset( $block['innerContent'] ) && count( $block['innerContent'] ) ? $block['innerContent'][0] : '',
		];

		return $element_settings;
	}
}

And register this custom elements in functions.php in child theme

/**
 * Register custom elements
 */
add_action( 'init', function() {
  $element_files = [
    __DIR__ . '/elements/[FILE_NAME_OF_CUSTOM_ELEMENT],
  ];

  foreach ( $element_files as $file ) {
    \Bricks\Elements::register_element( $file );
  }
}, 11 );

Then in Bricks Editor used this element and copy shortcode from Iconic WooCommerce Variation Custom fields.