How to link an image or container to a Single product page in a Query loop?

Hello!
I have created a custom product archive template with a query loop and I don’t know how to make a link on image or better on the whole container to lead at the Single Product Page?

Please help if anyone knows.

Hey Tino,

that’s actually pretty easy:

  1. Select your query loop block
  2. Set the block’s HTML tag to be a link
  3. Choose “Dynamic Data” as the link type
  4. Type {post_url} as the dynamic data value (or click the lightning icon and select “Post link” which then inserts the correct tag for you)

Note: From an accessibility point of view there are better ways to create those links though. Instead of setting the whole card to be the link it’d be better to add the link to the title and use a pseudo element to stretch the clickable area to the whole card (see Cards).

Let me know if that helped.

Best,

André

1 Like

Yes Andre, it works, thanks a lot!

And I need one more thing so I would be very grateful if you might know.
I would also like to add the product content to the query loop, so do you know how to make it display only the first 100 characters and not the entire text?
I found that I can insert it in a rich text element that adds dynamic post content or a product content element. And in both, I don’t know how to not display the entire text.

Best regards,
Tino

Hey Tino,

glad I could help.

You can output the post content limited to a specific number of words by using a dynamic data filter. In this case you’d use {post_content:10} where 10 is the number of words to use. Instead of using the post content you usually use the post excerpt in those situations though. So {post_excerpt:10} (or whatever number you prefer) is your way to go.

You can find more information about dynamic data and the available filters in the academy.

Let me know if that helped.

Best,

André

Andre,it works and thanks agian. Although it would be better if it could be limited to the number of characters so that they were all the same, but this is also good.

And since you have solved almost all my problems, maybe you can also do this last one.
Maybe you know how to sort products by price in ascending order in the Query Loop? There is an some Order by option, but I didn’t succeed.

Thank you in advance even if you don’t know because you have already helped me a lot.

Tino

Solved, I find it how.
Below the Meta numeric value in the Order meta key should add “_price” (with underscore-what i forgot).

Thanks anyway for all the previous answers.

Tino