WooCommerce: How to style attribute archive pages?

Peter,

I can’t say for sure, but it may be a hook you need to add into archive-product.php. If you look within plugins/woocommerce/templates/taxonomy-product_cat.php it pulls styling from the archive-product.php template when accessed directly. I’ll be interested to know if you figure this out.

I’m also really interested to know how you made your attributes links in themselves? I agree that type of navigation is useful and I’d love to be able to do that on a client’s site. Care to share how you did that?

I’ve been able to get as far as displaying products with the same attribute – it displays like the shop page with the related products organized in rows and columns – instead of it outputting the blog-style of the product’s body (like it does on yours). This helped in that area, but make sure when creating the template that you don’t copy the taxonomy-product_cat.php file to the woocommerce folder in your child theme folder, but directly into your child theme folder (which makes no sense because everything else related to woocommerce goes in the woocommerce folder). https://docs.woothemes.com/document/using-custom-attributes-in-menus/

Anyway, hope that helps.

I got the attributes links solved via a job on Codeable.io.

After that my product-attributes.php looks like this:

<?php
/**
 * Product attributes
 *
 * Used by list_attributes() in the products class
 *
 * @author 		WooThemes
 * @package 	WooCommerce/Templates
 * @version     2.0.8
 */

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

global $woocommerce;

$alt = 1;
$attributes = $product->get_attributes();

if ( empty( $attributes ) && ( ! $product->enable_dimensions_display() || ( ! $product->has_dimensions() && ! $product->has_weight() ) ) ) return;
?>
<table class="shop_attributes">

	<?php if ( $product->enable_dimensions_display() ) : ?>

		<?php if ( $product->has_weight() ) : ?>

			<tr class="<?php if ( ( $alt = $alt * -1 ) == 1 ) echo 'alt'; ?>">
				<th><?php _e( 'Weight', 'woocommerce' ) ?></th>
				<td class="product_weight"><?php echo $product->get_weight() . ' ' . esc_attr( get_option('woocommerce_weight_unit') ); ?></td>
			</tr>

		<?php endif; ?>

		<?php if ( $product->has_dimensions() ) : ?>

			<tr class="<?php if ( ( $alt = $alt * -1 ) == 1 ) echo 'alt'; ?>">
				<th><?php _e( 'Dimensions', 'woocommerce' ) ?></th>
				<td class="product_dimensions"><?php echo $product->get_dimensions(); ?></td>
			</tr>

		<?php endif; ?>

	<?php endif; ?>

	<?php foreach ( $attributes as $attribute ) :

		if ( empty( $attribute['is_visible'] ) || ( $attribute['is_taxonomy'] && ! taxonomy_exists( $attribute['name'] ) ) )
			continue;
		?>

		<tr class="<?php if ( ( $alt = $alt * -1 ) == 1 ) echo 'alt'; ?>">
			<th><?php echo $woocommerce->attribute_label( $attribute['name'] ); ?></th>
			<td><?php
				if ( $attribute['is_taxonomy'] ) {

				//	$values = woocommerce_get_product_terms( $product->id, $attribute['name'], 'names' );
				//	echo apply_filters( 'woocommerce_attribute', wpautop( wptexturize( implode( ', ', $values ) ) ), $attribute, $values );

				//https://gist.github.com/coenjacobs/2594985

				global $post;

				$attribute_names = $attribute;

				foreach ( $attribute_names as $attribute_name ) {
					$taxonomy = get_taxonomy( $attribute_name );

					if ( $taxonomy && ! is_wp_error( $taxonomy ) ) {
						$terms = wp_get_post_terms( $post->ID, $attribute_name );
						$terms_array = array();

				        if ( ! empty( $terms ) ) {
					        foreach ( $terms as $term ) {
						       $archive_link = get_term_link( $term->slug, $attribute_name );
						       $full_line = '<a href="' . $archive_link . '">'. $term->name . '</a>';
						       array_push( $terms_array, $full_line );
					        }

					        echo '<p>'. implode( $terms_array, ',  ' ) . '</p>';
				        }
			    	}
			    }								

				} else {

					// Convert pipes to commas and display values
					$values = array_map( 'trim', explode( '|', $attribute['value'] ) );
					echo apply_filters( 'woocommerce_attribute', wpautop( wptexturize( implode( ', ', $values ) ) ), $attribute, $values );

				}
			?></td>
		</tr>

	<?php endforeach; ?>

</table>

Hope this helps.

I’m still working on the styling of the attribute archives, but haven’t had much time to look into it yet.

Hi!
I’m not sure this is where I ask this question, so I apologize if it’s the wrong forum!
I have wp version 3.8.1, and am using the plugin Woo Commerce Google Merchant Center Feed, which works great , btw! The only problem I’m having is adding a custom identifier attribute. I have all vintage/collectibles which don’t have a upc or item number. Google says I must add an “identifier exists attribute with a value of FALSE. I have done this, but am still getting errors. Then I read that I have to map the attribute, which I don’t know how to do. Could someone please tell me how I can do this, if possible without too much coding? I’ve been researching for days and have found no solution. I’ve also had no response from the plugin author.
Thanks in advance!

sorry, if you need it, the url is oldtimeglass.com
Thanks!

the page that you need is:

https://docs.woothemes.com/document/using-custom-attributes-in-menus/

You will need to theme your attribute to make it display products how you want. To do this:

Copy woocommerce/templates/taxonomy-product_cat.php into your theme folder
Rename the template to reflect your attribute – in our example we’d use taxonomy-pa_size.php
Thats all there is to it. You will now see this template when viewing taxonomy terms for your custom attribute.

Works well for me

Thanks!

I just installed the free WooCommerce Google Merchant Center Feed by Claudio Sanches. If you just install it and leave all of the identifier boxes unchecked, it adds the “identifier exists=FALSE” attribute by default. It creates a google feed as well, so you just name the file, mine is data_feed.xml, and it sends it to google. Mine is error and trouble free! Works fantastic and easy!

Peter,

I’ve been wanting to accomplish something like this for some time. I found some TinyMCE type of plugins that allow you to add a HTML box above the Product Tag listing page — similar to your site. My question takes the styling of the Attribute Archive page to another level:

Can you add some sort of function to be able to sort products on the Attribute Page by the Product Category they are in? In the example of Peter’s Wine site, say there was both Wine and Cheese available for sale. If you had products from two different categories (Wine & Cheese) that shared an Attribute (in this case, the Region where it’s from), can you then sort by those same Categories (Wine & Cheese) on the Product Attribute Page?

My example is actually for a Auto Parts website I’m working on, and I want to be able to implement a sort of Make-Model look-up feature. For my example, there is Air Filters, Oil Filters, Tires, etc that would all fit a certain Vehicle Model ( Product Attribute). Ideally, a customer can visit that Product Attribute page to see all of the Products that share that attribute and “fit” his vehicle. Instead of a unsorted list, I’d rather have the ability to then shop/sort by the different Product Categories that have products w/ the said Attribute.

Any advice?! NOTE: I’ve been experimenting with using Product Tags to accomplish this but am running into the same problem.