Return to previous page

Can the complete product name be shown when hovering the mouse over it?

This topic has 8 replies, 2 voices, and was last updated 1 years, 7 months ago ago by Rose Tyler

Catholicans

Participant

April 24, 2023 at 10:10

Can the complete product name be shown when hovering the mouse over it?

#354342 Copied Theme version: 0.0.1 WooCommerce version: Version 7.5.1

7 Answers

Rose Tyler

Support staff

April 24, 2023 at 10:44

Hello, Catholicans,

Please provide a screenshot of where the product name is not fully shown.

Kind Regards,
8theme team

#354351 Copied

Catholicans

Participant

April 24, 2023 at 10:53

I want the product name to fit in one line, but when I did this, it was cut off. I want it to fully display when someone hovers over it with their mouse, while still being limited to one line.

Screenshot: https://snipboard.io/4D7j0E.jpg

#354352 Copied
Rose Tyler

Support staff

April 24, 2023 at 13:27
Hello, Catholicans,

Please try to use the next custom CSS code:
```
.content-product:not(:hover) .product-title a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
```
Kind Regards,
8theme team
#354356 Copied
Catholicans

Participant

April 25, 2023 at 06:02

Can I display the full name of the product while hovering on ‘Add to cart’ button instead of the above?
Screenshot: https://snipboard.io/G90Bxt.jpg

#354414 Copied

Rose Tyler

Support staff

April 25, 2023 at 08:40

Hello, Catholicans,

There is no such possibility, unfortunately.

Kind Regards,
8theme team

#354440 Copied

Catholicans

Participant

April 26, 2023 at 10:59

.content-product:not(:hover) .product-title a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

I am experiencing difficulty in setting the product name to display in two lines while using the code mentioned above. I would like to format the product name to appear on two lines and also have the full name of the product appear when the user hovers over it

#354562 Copied
Rose Tyler

Support staff

April 26, 2023 at 11:07
Hello, Catholicans,

In such case you may use next options set -> https://prnt.sc/iXPGE4stwbSZ + add custom CSS
```
.content-product:hover {
    --product-title-lines: '';
}
```
Here is the result you can get -> https://gyazo.com/0fc3f4dbe423f4f540401bab7d057f1b
If you require additional customization, it is always possible to contact campaigns that offer such options: https://wpkraken.io/?ref=8theme.

Kind Regards,
8theme team
#354564 Copied
Tagged: hovering, mouse, name, product, templates, woocommerce, wordpress
Viewing 8 results - 1 through 8 (of 8 total)