Custom display of product attributes for a home builder or property developer site. Used on www.davrose.com.au

wc-house-product-attributes.php

<?php
/* 
	Highly customised output of product attributes
	These functions can be used in hooks in functions/woocommerce.php or directly in templates
	
	Functions: 
	1. doublee_home_room_attributes() gets the number of bedrooms, bathrooms and car spaces and outputs them as a list.
	2. doublee_duo_home_room_attributes() gets the number of bedrooms, bathrooms and car spaces for both residences and outputs them in a condensed list. Used where doublee_home_room_attributes() is not appropriate
	2. doublee_home_dimensions_attributes() gets the living area size, total area size, minimum block width and number of storeys and displays them in a table.
	3. doublee_home_floorplan_image() gets and outputs the floorplan image, which is an ACF field. 
*/

function doublee_home_room_attributes() {

	// Get product attribute values
	global $product;
	$formatted_attributes = array();
	$attributes = $product->get_attributes();
	foreach($attributes as $attr=>$attr_deets){
		$attribute_label = wc_attribute_label($attr);
		if ( isset( $attributes[ $attr ] ) || isset( $attributes[ 'pa_' . $attr ] ) ) {
			$attribute = isset( $attributes[ $attr ] ) ? $attributes[ $attr ] : $attributes[ 'pa_' . $attr ];
			if ( $attribute['is_taxonomy'] ) {
				$formatted_attributes[$attribute_label] = implode( ', ', wc_get_product_terms( $product->id, $attribute['name'], array( 'fields' => 'names' ) ) );
			} else {
				$formatted_attributes[$attribute_label] = $attribute['value'];
			}
		}
	} 

	// The ones we want for this function
	// Most will be have one value, but we must allow for two and output a second set for the duo homes
	// So let's turn the string returned into an array so we can split into two sets where relevant. 
	$bedrooms_field = $formatted_attributes['Bedrooms'];
	$bathrooms_field = $formatted_attributes['Bathrooms'];
	$carspaces_field = $formatted_attributes['Car spaces'];
	
	$bedrooms_array = explode(', ', $bedrooms_field);
	$bathrooms_array = explode(', ', $bathrooms_field);
	$carspaces_array = explode(', ', $carspaces_field);
	
	$bedrooms = $bedrooms_array[0];
	$bathrooms = $bathrooms_array[0];
	$carspaces = $carspaces_array[0];
	
	$bedrooms2 = $bedrooms_array[1];
	$bathrooms2 = $bathrooms_array[1];
	$carspaces2 = $carspaces_array[1];

	// Output them
	?>
	<?php
	// Only output label if there's a second set of values 
	if ( (!empty($bedrooms2)) || (!empty($bathrooms2)) || (!empty($bathrooms2)) ){ ?>
		<span class="residence-1 title">Residence 1</span>
	<?php } ?>
	<ul class="room attributes">
		<li class="bedrooms"><?php echo $bedrooms; ?></li>
		<li class="bathrooms"><?php echo $bathrooms; ?></li>
		<li class="carspaces"><?php echo $carspaces; ?></li>
	</ul>
	
	<?php
	// Only output label and second table if there's a second set of values
	if ( (!empty($bedrooms2)) || (!empty($bathrooms2)) || (!empty($bathrooms2)) ){ ?>
		<span class="residence-2 title">Residence 2</span>
		<ul class="second room attributes">
			<li class="bedrooms"><?php echo $bedrooms2; ?></li>
			<li class="bathrooms"><?php echo $bathrooms2; ?></li>
			<li class="carspaces">
				<?php // If $carspaces2 doesn't exist, assume Residence 2 has the same number as Residence 1 and use $carspaces 
				if (!empty($carspaces2)) { echo $carspaces2; }	else { echo $carspaces; } ?>
			</li>
		</ul>
	<?php } ?>
	
<?php } 

function doublee_duo_home_room_attributes() {

	// Get product attribute values
	global $product;
	$formatted_attributes = array();
	$attributes = $product->get_attributes();
	foreach($attributes as $attr=>$attr_deets){
		$attribute_label = wc_attribute_label($attr);
		if ( isset( $attributes[ $attr ] ) || isset( $attributes[ 'pa_' . $attr ] ) ) {
			$attribute = isset( $attributes[ $attr ] ) ? $attributes[ $attr ] : $attributes[ 'pa_' . $attr ];
			if ( $attribute['is_taxonomy'] ) {
				$formatted_attributes[$attribute_label] = implode( ', ', wc_get_product_terms( $product->id, $attribute['name'], array( 'fields' => 'names' ) ) );
			} else {
				$formatted_attributes[$attribute_label] = $attribute['value'];
			}
		}
	} 

	// The ones we want for this function
	// Looking for two values, so let's turn the string returned into an array so we can split into two sets where relevant. 
	$bedrooms_field = $formatted_attributes['Bedrooms'];
	$bathrooms_field = $formatted_attributes['Bathrooms'];
	$carspaces_field = $formatted_attributes['Car spaces'];
	
	$bedrooms_array = explode(', ', $bedrooms_field);
	$bathrooms_array = explode(', ', $bathrooms_field);
	$carspaces_array = explode(', ', $carspaces_field);
	
	$bedrooms = $bedrooms_array[0];
	$bathrooms = $bathrooms_array[0];
	$carspaces = $carspaces_array[0];
	
	$bedrooms2 = $bedrooms_array[1];
	$bathrooms2 = $bathrooms_array[1];
	$carspaces2 = $carspaces_array[1];

	// Output them as a condensed list
	?>
	<ul class="room attributes">
		<li class="bedrooms"><?php echo $bedrooms; ?> / <?php echo $bedrooms2; ?></li>
		<li class="bathrooms"><?php echo $bathrooms; ?> / <?php echo $bathrooms2; ?></li>
		<li class="carspaces"><?php echo $carspaces; ?> / <?php echo $carspaces2; ?></li>
	</ul>

<?php } 

function doublee_home_dimensions_attributes() {

	// Get product attribute values
	global $product;
	$formatted_attributes = array();
	$attributes = $product->get_attributes();
	foreach($attributes as $attr=>$attr_deets){
		$attribute_label = wc_attribute_label($attr);
		if ( isset( $attributes[ $attr ] ) || isset( $attributes[ 'pa_' . $attr ] ) ) {
			$attribute = isset( $attributes[ $attr ] ) ? $attributes[ $attr ] : $attributes[ 'pa_' . $attr ];
			if ( $attribute['is_taxonomy'] ) {
				$formatted_attributes[$attribute_label] = implode( ', ', wc_get_product_terms( $product->id, $attribute['name'], array( 'fields' => 'names' ) ) );
			} else {
				$formatted_attributes[$attribute_label] = $attribute['value'];
			}
		}
	} 

	// The ones we want for this function
	// Most will be have one value, but we must allow for two and output a second set for the duo homes
	// So let's turn the string returned into an array so we can split into two sets where relevant. 
	$living_field = $formatted_attributes['living-area'];
	$total_field = $formatted_attributes['total-area'];
	$minblock_field = $formatted_attributes['minimum-block-width'];
	$storeys_field = $formatted_attributes['Storeys'];
	
	$living_array = explode('| ', $living_field);
	$total_array = explode('| ', $total_field);
	$minblock_array = explode('| ', $minblock_field);
	$storeys_array = explode('| ', $storeys_field);
	
	$living = $living_array[0];
	$total = $total_array[0];
	$minblock = $minblock_array[0];
	$storeys = $storeys_array[0];
	
	$living2 = $living_array[1];
	$total2 = $total_array[1];
	$minblock2 = $minblock_array[1];
	$storeys2 = $storeys_array[1];
	
	// Output them 
	?>
	
	<?php 
	// Only output heading and second table if there's a second set of values
	if ( (!empty($living2)) || (!empty($total2)) || (!empty($minblock2)) || (!empty($storeys2)) ) { ?>
		<h3 class="residence-1">Residence 1</h3>
	<?php } ?>
	<table class="dimension attributes">
		<tbody>
			<?php if(!empty($living)) { ?>
			<tr>
				<th scope="row">Living area</th>
				<td><?php echo $living; ?>m<sup>2</sup></td>
			</tr>
			<?php } ?>
			<?php if(!empty($total)) { ?>
			<tr>
				<th scope="row">Total area</th>
				<td><?php echo $total; ?>m<sup>2</sup></td>
			</tr>
			<?php } ?>
			<?php if(!empty($minblock)) { ?>
			<tr>
				<th scope="row">Minimum block width</th>
				<td><?php echo $minblock; ?>m</td>
			</tr>
			<?php } ?>
			<?php if(!empty($storeys)) { ?>
			<tr>
				<th scope="row">Storeys</th>
				<td><?php echo $storeys; ?></td>
			</tr>
			<?php } ?>
		</tbody>
	</table>
	
	<?php
	// Only output heading and second table if there's a second set of values
	if ( (!empty($living2)) || (!empty($total2)) || (!empty($minblock2)) || (!empty($storeys2)) ) { ?>
		<h3 class="residence-2">Residence 2</h3>
		<table class="second dimension attributes">
			<tbody>
				<?php if(!empty($living2)) { ?>
				<tr>
					<th scope="row">Living area</th>
					<td><?php echo $living2; ?>m<sup>2</sup></td>
				</tr>
				<?php } ?>
				<?php if(!empty($total2)) { ?>
				<tr>
					<th scope="row">Total area</th>
					<td><?php echo $total2; ?>m<sup>2</sup></td>
				</tr>
				<?php } ?>
				<?php if(!empty($minblock2)) { ?>
				<tr>
					<th scope="row">Minimum block width</th>
					<td><?php echo $minblock2; ?>m</td>
				</tr>
				<?php } ?>
				<?php if(!empty($storeys) || (!empty($storeys2))) { ?>
				<tr>
					<th scope="row">Storeys</th>
					<td><?php if(!empty($storeys2)) { echo $storeys2; } else { echo $storeys; } ?></td>
				</tr>
				<?php } ?>
			</tbody>
		</table>
	<?php } ?>

<?php } 

function doublee_home_floorplan_image() {
	
	global $post;
	$floorplan_field = get_field('floorplan_image');
	$floorplan_preview = $floorplan_field['sizes']['floorplan'];
	$floorplan_full = $floorplan_field['url'];
	echo '<div class="floorplan">';
	echo '<a href="'. $floorplan_full .'" rel="swipebox"><img src="' . $floorplan_preview . '" alt="' . $post->post_title . ' floorplan" /></a>';
	echo '</div>';
	
}
?>

woocommerce-functions.php

// Add custom attributes using hooks and filters rather than overriding templates

	// Add to product lists (e.g. product category page)
	add_action( 'woocommerce_after_shop_loop_item_title', 'doublee_home_room_attributes', 10 );

	// Add to the single product summary div
	add_action( 'woocommerce_single_product_summary', 'doublee_home_room_attributes', 5 );
	add_action( 'woocommerce_single_product_summary', 'doublee_home_dimensions_attributes', 30 );

// end custom attributes implementation

woocommerce-house-attributes.scss

/* Note: This uses Zurb Foundation grid mixins, and a custom mixin for FontAwesome icons.
Vanilla SCSS in comments below each mixin. */

/* Attributes */
ul.attributes {
	list-style: none;
	margin: 0;
	@include flex-grid-row();
	/*
	display: flex;
	flex-flow: row wrap; 
	*/
	justify-content: space-between;

	li {
		@include flex-grid-column(shrink, 0); 
		/*
		flex-grow: 0;
		flex-shrink: 0;
		flex-basis: auto;
		padding-left: 0;
		padding-right: 0;
		*/

		&:before {
			padding-right: $global-padding/4;
			/* 
			padding-right: 4px; 
			font-family: "FontAwesome";
			*/
			font-size: 1.2em;
		}

		&.bedrooms {
			&:before {
				@include icon('\f236');
				/*
				content: '\f236';
				*/
			}
		}

		&.bathrooms {
			&:before {
				@include icon('\f2cd');
				/*
				content: '\f2cd';
				*/
			}
		}

		&.carspaces {
			&:before {
				@include icon('\f1b9');
				/*
				content: '\f1b9';
				*/
			}
		}

	}
}