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
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
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
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
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;
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.
Check out our ever-growing list of extensions for OpenCart here.
Some useful extensions for a better admin experience: Image File Manager Pro • Drag & Drop Sort Order
Reach out to us at hello@softmonke.com for your OpenCart web development needs or feedback for our extensions.
You can see how it appears on our themes: https://www.antropy.co.uk/opencart-serv ... me-builds/
UK OpenCart Hosting | OpenCart Audits | OpenCart Support - please email info@antropy.co.uk
Entered this on the CSS, but it doesn't work.softmonke wrote: ↑Mon Jan 20, 2025 10:44 amYou can try adding the following CSS style to the <h4> tag (assuming you are using the default OpenCart theme) of your product title:
This will force all titles that exceed a single line to be truncated and end with an ellipsis.Code: Select all
white-space: nowrap; overflow: hidden; text-overflow: 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.
Code: Select all
.product-thumb h4 {
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
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
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.
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
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')) . '..',A third option is to increase the height of the product thumb, this would also align all the add to cart buttons
DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.
https://www.youtube.com/watch?v=zXIxDoCRc84
@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.by mona wrote: ↑Mon Feb 17, 2025 11:01 amYou could also use the code from the product category controller and follow the same principle as the description.This uses the admin config but it can be replaced that with a number.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')) . '..',
Regards,
Knowband Team
Opencart Plugins: Knowband Store
Email: support@knowband.com
BTW.: You should use V4.17.x of the Export/Import tool, Version 3.22 is quite old.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
Export/Import Tool * SpamBot Buster * Unused Images Manager * Instant Option Price Calculator * Number Option * Google Tag Manager * Survey Plus * OpenTwig
@knowband.plugins,
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.
Indeed it might not work and then again it mightIt doesn't seem a good practice to make the changes with static values, as the same might not work with different screen sizes.
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.
DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.
https://www.youtube.com/watch?v=zXIxDoCRc84
"Oops!paulfeakins wrote: ↑Mon Jan 20, 2025 7:04 pmYou can see how it appears on our themes: https://www.antropy.co.uk/opencart-serv ... me-builds/
Looks like we've moved the page you were after!"
John :-#(#
That's for spotting that one, I've raised it with the team.jrr wrote: ↑Fri Mar 07, 2025 8:43 am"Oops!paulfeakins wrote: ↑Mon Jan 20, 2025 7:04 pmYou can see how it appears on our themes: https://www.antropy.co.uk/opencart-serv ... me-builds/
Looks like we've moved the page you were after!"
John :-#(#
In the meantime you can see our themes here:
https://www.opencart.com/index.php?rout ... er=antropy
UK OpenCart Hosting | OpenCart Audits | OpenCart Support - please email info@antropy.co.uk
