|
|
WOO uses multiple selectors for its titles – so try this instead: |
How to fix Woocommerce title length Broken Grid Product View for Mobile Page
Just copy and paste following codes to yourdomain.com/wp-content/themes/activated-theme/style.css in the most below. Then, Run your website in Browser and Clear Cache for Browser.
style.css
Example:
CSS
.woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h3 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Output should be:
How to fix Woocommerce title length from Wordpress Dashboard
Step-1: Login to WP Dashboard
Login to your "yourdomain.com/wp-admin" Dashboard
Step-2: Click to Appearance
Then,Click on "Appearance" + "Customize" from left sidemenu of Dashboard.
Step-3: Click to Additional CSS
Find "Additional CSS" from leftside menu. Select it.
Step-4: Copy and Paste Following code insert the input box and "Publish"
style.css
Example:
CSS
.woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h3 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Output should be:
| How to fix Woocommerce title length Broken Grid Product View | Wordpress CSS Tutorial |
| How to bring woocommerec order button center align | Wordpress CSS Tutorial |
| How to add Border around Woocommerec Product | Wordpress CSS Tutorial |
| How to fix Woocommerce title length Broken Grid Product View for Mobile Page | Wordpress CSS Tutorial |
| How to fix Woocommerce title length from Wordpress Dashboard | Wordpress CSS Tutorial |
Read Full: | Wordpress CSS Tutorial |
Category: | Web Tutorial |
Sub Category: | Wordpress CSS Tutorial |
Uploaded: | 1 month ago |
Uploaded by: | Admin |
Views: | 130 |
Tested on: | PHP 7 and Wordpress 6.6+ |
Ref on: | View |