Learn Wordpress CSS Tutorial

Tips (Total 3)

1. How to fix Woocommerce title length Broken Grid Product View

2. How to bring woocommerec order button center align

3. How to add Border around Woocommerec Product

# Tips-1) How to fix Woocommerce title length Broken Grid Product View

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

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:

# Tips-2) How to bring woocommerec order button center align

Step-1: Login to WP 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"

ul.products li{
    text-align: center
}

Output should be:

Demo

Output should be:

# Tips-3) How to add Border around Woocommerec Product

Step-1: Login to WP 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.

Demo

Example: WORDPRESS

.type-product {
    border: 1px solid #cdccce;
    box-sizing: border-box;
}