add author name to product page

We can utilize some of the code provided by WooCommerce already here:

https://docs.woocommerce.com/document/display-product-attribute-archive-links/

As a quick setup before the code…

1. Navigate to Products->Attributes in the admin dashboard
2. Create a new attribute with Author as the name, book-author as the slug and make sure the Enables Archives? checkbox is checked and click Add attribute
3. After the new attribute is created on the right hand side, click on the Configure terms link.
4. This is where you will add in the book authors one by one
5. Navigate into each product and add in the author in the Product Data section under the Attributes tab.
6. Once you have all those configured, open up your child theme’s functions.php file and add the following code

add_action( 'woocommerce_single_product_summary', 'wc_show_attribute_links', 5 );

function wc_show_attribute_links() {
	global $post;
	$attribute_names = array( 'pa_book-author' );
		
	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 class="author-link" href="' . $archive_link . '">'. $term->name . '</a>';
			       array_push( $terms_array, $full_line );
		        }
		        echo implode( $terms_array, ', ' );
	        }
    	}
    }
}

Save that and refresh and it should have the book author linked to the books they are assigned to. As a side note, you don’t have to use book-author as the attribute slug in Step 2. However, if you decide to use something different, you’ll need to update the pa-book_author string in the block of code to use whatever you set ensuring that pa_ is appended onto the front of it.

As an example, if you decide to use bookauthor as the attribute slug, the code in your functions.php file would look as follows

$attribute_names = array( 'pa_bookauthor' );

Additionally, what you choose for the attribute slug will also set how the URL will display when the user clicks on the author link. With the code above, the URL for the list of books published by the author would look as follows

https://example.com/book-author/author-1/

• This reply was modified 5 years ago by Jarret.

I started to try it on a few pages and it works great, I don’t know how to thank you for the very clear explanation. I have only one last request: on the single product pages I understood how to do it, but on the pages with more aggregated products (shop, categories, etc.) I don’t see the author anymore. I guess it’s possible to do it, because in the site that I have indicated as reference the names of the authors are present everywhere, do you know how to help me?

From a quick test you should be able to add the following after the add_action in the section of code I gave you

add_action( 'woocommerce_shop_loop_item_title', 'wc_show_attribute_links', 10 );

So you should end up with something looking like this

add_action( 'woocommerce_single_product_summary', 'wc_show_attribute_links', 5 );
add_action( 'woocommerce_shop_loop_item_title', 'wc_show_attribute_links', 10 );

The first add_action makes the title show up on the single product page while the second one makes it show up on the when multiple products are being displayed. You should be able to change the 10 value on the second add_action to move where the author link will display.

Thank you, it works! Now the structure is ok but there is an little problem: the author name in the shop page is written very big, in the single product page (under the title) is medium size, and in the related products (visible at the bottom of the single product page) the author’s name is very small.

It would be perfect to uniform the style of the shop font with the style of the related products. It’s strange because they were the same size.

Hmm, maybe try this CSS

.products .product .author-link {
    font-size: initial;
    font-style: initial;
    font-weight: initial;
}

Great, I’ve upgraded and everything works! There’s only one thing to fix: when I view the site from mobile some product titles go on two or maximum three lines and create a misalignment between the various products, how could I fix it?

All of them appear to line up for me though I think you may be talking about the bluish background color not aligning correctly? If so, you can use the following CSS to fix that

.products li.product {
    min-height: 372px;
}

Though this has the downside in that it will target all of the products, so ones with a single line for the title will have extra spacing to account for the minimum height.

When the product title is on one line they are in line, but if the product title is on two lines (it can happen if the title is long) a step is created (see for example the third and fourth line).

Hey, Jarrett, when you got time, can you take a look at it? The problem can also be seen in the first line of products: when the title goes on two lines, the grids are no longer aligned because the height changes. Is there anything I can do? Thank you very much

Hi, the code I gave looks like it worked for the mobile version but not desktop. So replace what I gave you last with the following

@media screen and (min-width: 568px) {
    .products li.product {
        min-height: 465px;
    }
}

@media screen and (max-width: 568px) {
    .products li.product {
        min-height: 372px;
    }
}

Should cover both mobile and desktop

I’ve added your css, and:
1) desktop is ok but there is a misalignment of the author’s link when the title goes on two lines, maybe we can constantly increase the spacing between the title and the attribute?
https://drive.google.com/open?id=1fgQhP3zF6jKB-0MZDvA5BZ7VAmXBAoVP

2) mobile version has a large space underneath and again a misalignment of the link with the “author” attribute.
https://drive.google.com/open?id=1kGv04eqA-q3m6RsXi_AHby1Zw8WohtnK

You can add the following into the (min-width: 568px) code

.products .product h2 {
    min-height: 42px;
}

For mobile, there isn’t really much of a workaround there, at least from a simple fix standpoint. If you scroll down the page, one of the book’s titles is 3/4 lines (depending upon screen width) which requires that the rest of the books have to match up with that one for them all to be equal.

Thanks, I tried to stretch some titles and reduce others to avoid misalignment. The problem is when there are titles on three lines and titles on two (when there are titles on two lines next to titles on one line the problem does not exist). I’d say we’re good at this point, thanks for your assistance and patience!

If I wanted to change the font size and some attributes of the authors names, what kind of css should I use?

You can target the author’s name using .products .product .author-link then use whatever CSS to make changes

.products .product .author-link {
   font-family: Times New Roman;
}

Thanks again!