How can I get the full product clickable and how to filter by SKU, if I use the Bricks WooCommerce product element

[kevinbenjamin]

Is there a way to get the full product clickable if the Bricks WooCommerce product element is used? Currently only the link to the product is clickable and as they differ in length I would like to have the whole product card itself clickable.

Same element but other question: Is there a way to filter by SKU instead of Post ID?

How to get this done? I’m also happy if you can help me with one of my two questions if you don’t know a solution for both of them.

[aslotta]

Hey Kevin,

are you talking about the Products element?

Can you maybe share link to your site so I can see how you are using it? Making the whole card clickable should be easily possible with some custom CSS using this technique.

Best,

André

[kevinbenjamin]

Thank you André! Yes, I configured the height of the element as shown in the screenshot below, but haven’t figured out yet, how to get the whole card clickable. Currently only the link to the “Sample Product” is clickable. I’ve set the min. height to 25rem.

[kevinbenjamin]

Stefan of the Bricks team helped me out. With the following CSS in the CSS section of the Bricks Woo products element the whole element gets clickable, if there’s only one link set.

root .repeater-item {
  position: relative;
}

root .repeater-item a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

Regarding my question to filter by SKU: There isn’t any solution yet, but there’s an entry on the idea board asking for that.