Hide the separator line in the grid products page if no attributes

Dear,

Please check the screenshots below.

When using the products grid style shown in the screenshot and when you enable the display of the attributes in the grid, then we see a “line” appearing in the products grid (which is OK) but when there are no attributes available, then you should not display this separator line.

This line should only appear if the product indeed has attributes, otherwise it shouldn’t appear.

Thanks

Attachments:

You must be logged in to view attached files.

Hello,

Add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS.

.wd-product.wd-hover-fw-button :is(.hover-content-wrap, .wd-progress-bar) {
    border-top: 0px !important;
}

Best Regards.

Your code removes the line in ALL the situations.

Please read again my initial thread to understand my request here. Thansk

Hello,

Yes, it will remove the line on all the products. It is not possible to keep the line in some products where the attributes are added. HTML structure does not allow solving it by custom CSS.

Best Regards.

Please look at the link and screenshot attached.

It’s not a matter of custom css. You need to solve this by default in the theme.

You can see that if (1) a product has no attributes but if (2) the product has a countdown for instance, then in this case you are displaying a double horizontal line. This is not ok.

A) The separator of the attribute should only appear if there is an attribute.
B) The separator of the countdown should only appear if there is a countdown.

Attachments:

You must be logged in to view attached files.

Hello,

Add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS.

.wd-product.wd-hover-fw-button .wd-product-countdown {
    border-top: 0px !important;
}

Best Regards.

Can you please read carefully what I wrote? For the second time, you’re providing me a custom CSS that is not answering the problem.

A) The separator of the attribute should only appear if there is an attribute.

B) The separator of the countdown should only appear if there is a countdown.

Hello,

Sorry, but there is no option in Theme Settings available for that.

It requires customizations and this is beyond our limitations and support policy.

Regards.
Xtemos Studios

This is not a request for customization.

This is a request for you to fix WRONG STYLES from your theme.

Please check the screenshots I provided !

[Aizaz Imtiaz Awan]

Hello

If you don’t want to show either the short description or the attributes on the grid, there is a special option that will disable this wrapper on the grid https://prnt.sc/iTLs9zWb0b_s. However, if you has enabled product attributes (Additional content) but decided not to add attributes for certain products (which is very rare), then you should use this custom solution.

.hover-content-wrap:not(:has(.shop_attributes)) {
	display: none;
}

Best Regards.

• This reply was modified 5 months ago by Aizaz Imtiaz Awan.

Please pass this ticket to another person in your support, because I can’t keep re-explaining the same 3 times.

I didn’t say that I want to hide attributes. Please read carefully what I wrote, and look at the screenshots.

Read again what I wrote in the below reply :

https://xtemos.com/forums/topic/hide-the-separator-line-in-the-grid-products-page-if-no-attributes/#post-582501

Hi,

I have checked your site and didn’t find the applied custom code provided earlier in the following reply https://xtemos.com/forums/topic/hide-the-separator-line-in-the-grid-products-page-if-no-attributes/#post-582851.

Without custom code – https://prnt.sc/T2CvFOKYi737.
With custom code – https://prnt.sc/gKclRMtE9QtA.

With this custom code, the border will be visible only if hover-content-wrap contains attributes. In other cases, it will be hidden, which is what you requested in this message https://xtemos.com/forums/topic/hide-the-separator-line-in-the-grid-products-page-if-no-attributes/#post-582501. Try to first add custom CSS code from the previous reply to your Global Custom CSS area and check again.

Kind Regards

I applied the custom code. Please check the two links below.

On the first link, the code works fine.

On the second link, when you hover, the border appears then disappears, which is still not good.

I checked both links, and the product’s custom code on them works identical without border. Here’s the video:

filtres – https://monosnap.com/file/fK3oMsmcn8yIniNkTCQ4TcNOK0loQx
non-categorisee – https://monosnap.com/file/rMrZhFzZCVF7V6cjrZpELl6bzHGjAe

Kind Regards

In both links, when you hover, the border appears then disappears, which is still not good.

In your initial message, you complained about a border or separator in an area that was supposed to display attributes if a specific grid product didn’t have any attributes. Your screenshot from first message (https://monosnap.com/file/GItxh6SmOL4mIHmHTT9ubM41bHoWe9).

With the custom code provided in this post, this border has been removed:

1. Product video without custom code separator/border is visible: https://monosnap.com/file/KxXQ5PvLvwaPYdlA403fr6OloIbM65.
2. Product video with custom code: https://monosnap.com/file/qRKe3X5qD6KsyouvQSuT3iB1epookD.

Currently, the design of all products does not include any borders or separators you mentioned in your initial message. We are attaching a slow-motion hover video (https://monosnap.com/file/6qGXVZwHMqFG35bb12UZASJjeX8Ssz) of the product, where frame by frame you can see that it does not contain any static borders, both idle and during hover.

Kind Regards

[Author]

Posts