[Resolved] Problems with Woo attributes-hook

[Paul]

Hello all, I’ve already posted this in an old thread but since this has already been marked as resolved, I’m afraid that maybe nobody will notice (if you’ve noticed, please feel free to delete or I can delete this topic):

Hi David,
I have to reopen this subject as I’ve come across some problems which I can’t resolve on my own.
I am using the hooks from posting #1994944 in order to display the author attribute on Woo-products. However, differently to what we had in mind in the other discussion, we’ve decided not to have the product info next to the image but below.

These are the issues that I have now:

1. The upsell-products on the products page don’t align to the top but to the bottom. I’ve checked with the inspector and it’s because flex is turned on. Probably this is because of the CSS you’ve provided, but I’m not sure if it’s needed somewhere else.
2. The images on the category pages seem to be not totally centered (at least in categories, where there is no hook applied, such as in my merchandise-section (I added the link)). I found this code, which I think is the issue, but I don’t know where it’s coming from:

.woocommerce ul.products li.product.woocommerce-image-align-left .wc-product-image {
float: left;
margin-right: 2em;
}
I added ‘margin-left: 1em;’ to equal it out, but maybe there’s a better way.
3. Cross-sells on the cart page look chaotic. You can see it if you add the product “Leuchtfeuer …” to the basket.
4. The author-hook makes the titles of the Woo-products non-clickable. Is there a way to undo that?

I hope this has not been too much and that you can help as I’m quite stuck with these problems.

Best, Paul

[David]

Hi there,

so just to be clear, there is NO requirement for the horizontal image/details layout or the author attribute?

If tats the case then it would probably make sense to remove the PHP Snippets and CSS that were provided previously. As it kinda sounds like you need the default layout.

Let me know

[Paul]

Hi David,
thank you for responding here!
I definitely want to keep the author attribute, but there is no need for the horizontal image/detail arrangement.
I assume that I need the hooks and a different wrapper maybe?

[David]

Ok – so lets see if we can unravel some of this.
First thing i notice is that the Image Aligment is still set to Left in Customizer > Layout > Woocommerce. Can you put that back to Center ?

[Paul]

Hey David,
oh, I looked everywehre but oversaw this. I changed it to ‘centered’ now.

This is the Custom-CSS:

@media (min-width: 481px) {
#wc-column-container .product {
/*I changed this entry from 'row-reverse' to 'column'*/
    flex-direction: column;
}
.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
    flex: 0 0 200px;
    margin-left: 20px;
}*

Now the text bottom aligns and when there are two authors, the comma takes a line on its own.

[David]

Where can i see the author meta? particularly the product(s) with 2 x authors ?

[Paul]

For example here, the book in the first row on the left.

https://neu.klingenbergverlag.at/produkt-kategorie/buecher/

[David]

What code did you use to output the autor-link elements ? As you may want to consider removing the comma, if not you will need to add another HTML wrapper around the links to be able to put them inline.

[Paul]

This is the code you gave me:

/*Add authors name from attributes on product page*/
add_action( 'woocommerce_single_product_summary', 'wc_show_attribute_links',5);
add_action( 'woocommerce_shop_loop_item_title', 'wc_show_attribute_links',9);

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

/**
 * Woo Commerce Shop Wrapper
 */
add_action('woocommerce_shop_loop_item_title', 'woo_shop_loop_item_open_wrapper',9);
add_action('woocommerce_after_shop_loop_item', 'woo_shop_loop_item_close_wrapper',100);

function woo_shop_loop_item_open_wrapper() {
    echo '<div class="woo-content-wrap">';
}
function woo_shop_loop_item_close_wrapper() {
    echo '</div>';
}

It would be good to be able to keep the comma, since otherwise it may seem as if the two names are one, but I’m afraid I don’t know how to add an extra wrapper. :-/

[David]

oh jeez i think i need a memory test lol.
So the first function can be changed to this:

/*Add authors name from attributes on product page*/
add_action( 'woocommerce_single_product_summary', 'wc_show_attribute_links',5);
add_action( 'woocommerce_shop_loop_item_title', 'wc_show_attribute_links',9);

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

That will include the wrapper, which we should be able to work with once its in place.

[Paul]

Well, as frequent visitor to this forum I can see how much support you are giving – I certainly wouldn’t remember either. 😉

Thank you for the code, I inserted it.

Now the add to cart button moved to the left and I think the alignment changed a bit. But, yaih, the authors look nice now with a comma in between!

[Paul]

Oh, I’m so sorry, shame on me, I overwrote the second function. I added it again and now the Add-to-cart button is back in its place!

[David]

OK so next the vertical alignment of the product details. Where should the ‘auto’ spacing go ? eg. between the Title and the Price ?

[Paul]

Sorry, I’m not sure if I understand the question correctly.
But if it’s about setting an equal space between title and price and having a different spacing to the Add-to-cart button, that’s good. To put it differently: I think it looks good the way it is now, but the whole text-area and the Add-to-cart button should always align at the top border below the image just like in the default Woo layout.

[Paul]

On a note, if that helps: There are also products without an author attribute, which now align to the bottom. Here is a screenshot of what I mean: https://imgur.com/a/QTzcV72

[Author]

Posts