Tidy up title length in WordPress and WooCommerce with CSS

If you’ve spent any sort of time mass or bulk importing into WordPress, you will know you can get some pretty strange and weird titles. And some titles can be long, very long. This is not ideal for user experience, especially in some parts of your website. For example, if you show recently viewed posts in your sidebar these can stretch out quite a long way. Also if you use shortcodes, the title can be quite long and take away from the overall look of the page.

It is possible to use functions in WordPress and WooCommerce to shorten titles but this is a scattergun approach. There are places where a long title can be great and a short title would be preferable. In this situation, CSS can be really effective at dealing with your titles.

Let’s use imported Amazon products as an example. If you’re an Amazon affiliate and you have a WooCommerce store there’s plenty of software available to auto-import Amazon products. You will most certainly come across products with a lot of words in the title. Amazon is trying to crack down on this at the moment but until they deal with it this issue will continue. The same is not so commonplace on eBay who restricts title length. But you may come across long title issues when importing articles for WordPress or other WooCommerce sources.

Titles of some imported posts and products can be unwieldy in places

Having the product page title quite long on your product page can be beneficial. However, you don’t want to have long titles at the bottom of the page in the related products section. Nor would you want very long titles in your sidebar. The same can be said about when you write up a blog post and you use a  shortcode to advertise products. You want to try and control the length of these titles.

It’s quite easy to reduce title length to be shown everywhere by using a function in WordPress. You can also use a function to reduce the number of words in the title on your archive pages. However, this may not operate in shortcodes and sidebars etc, in which case a CSS solution is a way forward. 

CSS to control title length in WordPress and Woocommerce

So let’s look at the actual CSS code to use and explain each line being used.

{
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
padding-bottom:0;
}

display: -webkit-box – this is pretty straightforward. We’re calling on the browser to set up a box display for the div.

-webkit-line-clamp:3; – the browser is being told to make a maximum measurement of the box 3 lines

-webkit-box-orient:vertical; – the browser is being told that this measurement should apply to the vertical length of the box

overflow:hidden; – the browser is told to hide any text that does not fit in the confines of the box

padding-bottom:0; – this sets the bottom padding of the div at 0 to prevent any tops of the next line peeking through in the padding area.

The actual CSS is fairly simple to use. You can use it on any text area once you discover the div id or class that controls it. You can set the length of the title by changing the number of lines you want visible in the box area.

The more difficult part of using this CSS is finding the id to relate it to. You also need to determine how specific an area you want it to be applied to.

Applying the CSS to title divs

For example, in the before and after picture at the start of this post you can see the related products option. This is displayed at the bottom of a products page if you enable the option. Before the CSS is applied you can see that the titles are of differing length and a little untidy. The actual differences in length are not so great as some you can get. Tidying them up to be similar can be useful.

In dealing with related posts I attached the above CSS to the div: .related.products ul.products li.product.

Note that I used the 3 lines box to set the size of li.product. This also hid the price and just left 3 lines of the title. It’s a lot tidier than it was. I also did not want the price showing on the related products area because I like to encourage people to click through. It helps to reduce bounce rate.

Drilling down into title div ids and classes

But in this next example, I want to display the price. In this example, I am applying the above CSS to titles of recently viewed products in the sidebar.

css to control title display length

As we can see in this example the box height of 3 lines has been restricted to just the title length and the price is showing.

This is done by just drilling down to a more specific id – #secondary .widget_recently_viewed_products ul li .product-title

Here we can see the CSS has been restricted to only operate in the sidebar (secondary) and to the recently viewed widget. We can also see that the CSS has been further targetting to .product-title rather than the li.product list area height as in the previous example.

SEO risks of using CSS hidden value

This can be a really useful way to target specific titles or text areas to give a nicer look to your web pages. But what is the impact of using overflow:hidden on SEO. Will you get a penalty or even kicked out of the Google SERPs for hidden text?

The first thing is don’t panic. If Google kicked everyone out for using display:hidden or overflow:hidden you’d never find a site with a concertina, accordion or tabbed area. These all use the hidden value for CSS.

Google is smart, it can tell the difference between deliberate keyword hiding – which does not work  – and user experience. Google has made a number of statements on this which should allay your fears. In a number of Stackoverflow answers, Google engineers have basically said the following:

Google will index content that is marked as hidden in CSS but will substantially devalue the content.

As we’re only hiding some title from a shortcode or a widget area then this is not a big deal. We are not hiding part of the title on the main product page. Using CSS hidden values in this situation should not have any impact on your site-wide SEO.

But take note of what Google has said. Content marked as hidden will be substantially devalued. Going slightly off-topic, think about this when setting up tabs for important parts of your website. If you have product descriptions that are initially hidden in a tab then Google will substantially mark down the value of that content. 

The take away is that all your most important content should be in the tab that is open and visible when a visitor arrives. 

But there should be no issues with using overflow: hidden for controlling user experience design of the page.

 

Spread the love
Posted in Blog.

The 'corporate' account for ypraise.com. I use this account for posting general issues and helpful advice which are not my own personal blog.

It's a general posting account.

Leave a Reply

Your email address will not be published. Required fields are marked *