WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce - excelling eCommerce
WooCommerce: How to style attribute archive pages? (8 posts)

  1. Peter Sejersen
    Member
    Posted 9 months ago #

    I would like my users to be able to get to an archive page directly from the product page (which is possible since the Attributes works just like other WP taxonomies).

    So I created some custom code from the attribute tabs, which links dynamically to the actual attribute archive page. This works really well, try and click on the "Yderligere information" tab here to see a live example: http://www.vinhit.dk/produkt/quinta-da-romaneira-fine-ruby/

    I think this type of navigation is very useful, since my users can now easily find eg. all other wines produced by "Quinta da Romaneira" when looking at the product page.

    Now I just need to have the archive page styled like a normal product archive page (eg. http://www.vinhit.dk/kategori/lande/portugal/). It could get even more cool if I could insert a Layered nav widget on the archive page.

    Does anybody know how to create a custom styling to the attribute archive page? Hope you can help pointing me in the right direction.

    Thanks!

    http://wordpress.org/plugins/woocommerce/

  2. frjoel
    Member
    Posted 8 months ago #

    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?

  3. frjoel
    Member
    Posted 8 months ago #

    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). http://docs.woothemes.com/document/using-custom-attributes-in-menus/

    Anyway, hope that helps.

  4. Peter Sejersen
    Member
    Posted 8 months ago #

    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.

  5. Ulizee
    Member
    Posted 5 months ago #

    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!

  6. Ulizee
    Member
    Posted 5 months ago #

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

  7. niccol
    Member
    Posted 2 months ago #

    the page that you need is:

    http://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

  8. Ulizee
    Member
    Posted 2 months ago #

    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!

Reply

You must log in to post.

About this Plugin

About this Topic