It seems it is impossible to create a useful product category slider with that thing if one needs the category image itself to be the main cta element. It is not possibile to have the category image link to the category which is the only purpose of the image besides of looking fancy.
{woo_product_cat_image:link}
Links to the image itself which for some tinker developers might be interesting but not for the majority of users IMO. Please therefor implement to have the category image link to the category.
It must be hacked now with inserting the term_name with transparent color centered over the image so the user has the fake impression the image is clickable. Again ultra complicated
Anyone can share a light on this?
So this are the settings for the product loop:
The correct url to the product is:
example.com/product/this-is-my-product
When I use {post_title} the url is wrong and looks like that
example.com/shop/this is my product (see also that the hyphens are missing)
{featured_image:link} is also useless. So how in earth is it possible to get to the single product page clicking the product image from the shop archive?
Having the same problem and would love to get a solution for this as well.
Hey, a really dirty workaround but the only way to have a clickable product category image with Bricks is that below. This really dirty and i did swear a lot to find a better solution. And that I needed to look for a solution for a non brainer use case
You kind of use the term_name:links as the clickable element and minus margin to lay it over the image. That need for such solution is euqal to the love from Bricks for the Woocommerce community here…
%root% .slider-content .title {position:relative;}
%root% .slider-content p {
position: relative;
overflow: hidden;
border-radius:20px;}
%root% .slider-content p img {
display: block;
width: 100%;
height: auto;
transition: transform 0.1s ease-in-out;
cursor: pointer;}
%root% .slider-content p:hover img {
transform: scale(1.1);}%root% .content a {
position: relative;
margin-top: -100px;
height: 100px;
display: block;
color: transparent;
}
Have a hover scale on the image and so on which may be irrelevant for you. Hope it helps.
1 Like