Page 1 of 1
Reduce the Product Title to One Line On Home Page
Posted: Mon Jan 20, 2025 9:45 am
by Gobbo
Hi,
How can we reduce the displayed product title to one line on the home page?
This is to align all of our 'Add To Cart' buttons.
Thanks in advance
Re: Reduce the Product Title to One Line On Home Page
Posted: Mon Jan 20, 2025 10:44 am
by softmonke
Gobbo wrote: ↑Mon Jan 20, 2025 9:45 am
Hi,
How can we reduce the displayed product title to one line on the home page?
This is to align all of our 'Add To Cart' buttons.
Thanks in advance
You can try adding the following CSS style to the <h4> tag (assuming you are using the default OpenCart theme) of your product title:
Code: Select all
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
This will force all titles that exceed a single line to be truncated and end with an ellipsis.
If you don't want to truncate your product title but still want to keep your cart buttons aligned, you can try increasing the min-height of ".product-thumb .caption" in stylesheet.css (again, assuming your are using the default OpenCart theme).
If you are using another theme, the above still applies but you will need to target the correct HTML elements.
Re: Reduce the Product Title to One Line On Home Page
Posted: Mon Jan 20, 2025 7:04 pm
by paulfeakins
Gobbo wrote: ↑Mon Jan 20, 2025 9:45 am
How can we reduce the displayed product title to one line on the home page?
You can see how it appears on our themes:
https://www.antropy.co.uk/opencart-serv ... me-builds/
Re: Reduce the Product Title to One Line On Home Page
Posted: Sun Feb 16, 2025 5:40 am
by Gobbo
softmonke wrote: ↑Mon Jan 20, 2025 10:44 am
Gobbo wrote: ↑Mon Jan 20, 2025 9:45 am
Hi,
How can we reduce the displayed product title to one line on the home page?
This is to align all of our 'Add To Cart' buttons.
Thanks in advance
You can try adding the following CSS style to the <h4> tag (assuming you are using the default OpenCart theme) of your product title:
Code: Select all
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
This will force all titles that exceed a single line to be truncated and end with an ellipsis.
If you don't want to truncate your product title but still want to keep your cart buttons aligned, you can try increasing the min-height of ".product-thumb .caption" in stylesheet.css (again, assuming your are using the default OpenCart theme).
If you are using another theme, the above still applies but you will need to target the correct HTML elements.
Entered this on the CSS, but it doesn't work.
Code: Select all
.product-thumb h4 {
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Re: Reduce the Product Title to One Line On Home Page
Posted: Sun Feb 16, 2025 12:56 pm
by nonnedelectari
css is browser cached, you cleared that right?
Re: Reduce the Product Title to One Line On Home Page
Posted: Mon Feb 17, 2025 1:18 am
by Gobbo
Yes, we cleared the history.
Re: Reduce the Product Title to One Line On Home Page
Posted: Mon Feb 17, 2025 11:01 am
by by mona
The code works.
You either have a theme that edits the css selector or you have some caching that prevents it updating in real time.
You could also use the code from the product category controller and follow the same principle as the description.
Code: Select all
'description' => utf8_substr(trim(strip_tags(html_entity_decode($result['description'], ENT_QUOTES, 'UTF-8'))), 0, $this->config->get('theme_' . $this->config->get('config_theme') . '_product_description_length')) . '..',
This uses the admin config but it can be replaced that with a number.
A third option is to increase the height of the product thumb, this would also align all the add to cart buttons
Re: Reduce the Product Title to One Line On Home Page
Posted: Thu Feb 27, 2025 4:43 pm
by knowband.plugins
by mona wrote: ↑Mon Feb 17, 2025 11:01 am
You could also use the code from the product category controller and follow the same principle as the description.
Code: Select all
'description' => utf8_substr(trim(strip_tags(html_entity_decode($result['description'], ENT_QUOTES, 'UTF-8'))), 0, $this->config->get('theme_' . $this->config->get('config_theme') . '_product_description_length')) . '..',
This uses the admin config but it can be replaced that with a number.
@by mona, It doesn't seem a good practice to make the changes with static values, as the same might not work with different screen sizes.
Re: Reduce the Product Title to One Line On Home Page
Posted: Thu Feb 27, 2025 7:04 pm
by JNeuhoff
Using opencart 3.0.3.2 - PHP 7.4 - Standard Template - Add to Cart Enable Disable Out of Stock Product 3.x - Export/Import Tool (V3.22) for OpenCart 3.x - Footer Social Media Link( 3.x ) v1.0
BTW.: You should use V4.17.x of the Export/Import tool, Version 3.22 is quite old.
Re: Reduce the Product Title to One Line On Home Page
Posted: Thu Feb 27, 2025 10:33 pm
by by mona
@knowband.plugins,
It doesn't seem a good practice to make the changes with static values, as the same might not work with different screen sizes.
Indeed it might not work and then again it might
The description is already static and the thumbs are coded for screen sizes (with height issues), but most importantly the css code is not working for them despite it being correct. It is an alternative. Best practice is probably the wrong word, maybe not the best choice in all circumstances, but quite possibly the best choice in another circumstance.
I find the thumb height issue the most annoying, the user finds the title, you find the filling the screen space on all devices. The world is a wonderful box of liquorice allsorts.
Re: Reduce the Product Title to One Line On Home Page
Posted: Fri Mar 07, 2025 8:43 am
by jrr
"Oops!
Looks like we've moved the page you were after!"
John :-#(#
Re: Reduce the Product Title to One Line On Home Page
Posted: Fri Mar 07, 2025 11:43 pm
by paulfeakins
jrr wrote: ↑Fri Mar 07, 2025 8:43 am
"Oops!
Looks like we've moved the page you were after!"
John :-#(#
That's for spotting that one, I've raised it with the team.
In the meantime you can see our themes here:
https://www.opencart.com/index.php?rout ... er=antropy