How to show few lines of text using CSS

On IndoorGuider.com we are using Simple Author Box plugin. IndoorGuider is a website where you can get guidance on kitchen recipes and kitchen appliances. We are using that Author box plugin to show the author’s bio under all blog posts.

How to show few lines of text using CSS
showing few lines of text using CSS

Why show few lines of text using CSS?

We are using free version of Simple Author Box plugin and they have very limited featured on free version. Also they don’t have such feature where you can show exactly 3 or 4 lines of texts. We had a long description for authors bio but we wanted to show exactly 4 lines of texts in both desktop and mobile responsive.

The CSS code

I applied the CSS code:

 .saboxplugin-wrap .saboxplugin-desc p {
    
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 4; /* number of lines to show */
   line-clamp: 4; 
   -webkit-box-orient: vertical;
    
}

With the above code you can apply to any div, just change the class names and it will work.

Let me know in comments if any issues.

How to remove points earned & redeemed from WooCommerce invoice

For WooCommerce eCommerce website, I wanted to remove or delete, a better word is hide Message to display Earned Points” and “Message to Redeemed Points” from Invoice that I am printing for Orders. I wrote my experience below in steps that will help you to hide it from invoice if you don’t want to show it in your printed invoice.

SUMO Reward Points – WooCommerce Reward System

We are using SUMO Reward Points – WooCommerce Reward System WordPress plugin for points reward system for our woocommerce website. This helps us give customers points when they buy from our website, and later customers can use those points to redeem discounts for their next order. This is a paid plugin with many options and helps us a lot when returning customers can avail discounts and comes back to buy from us again and again.

PDF Invoices & Packing Slips for WooCommerce


We are using PDF Invoices & Packing Slips for WooCommerce WordPress plugin to generate Invoices to print when delivering the parcel also this invoice is attached to the email that customers receive after placing the order. We are using the free version from the WordPress plugin repository. This is a fantastic plugin that also has options and if you have coding knowledge you can highly customize the Invoice or packaging slip output by adding extra text and images inside Invoice.

From Invoice pdf

How to remove points earned & redeemed from WooCommerce invoice
Points Redeemed in this Order
How to remove points earned & redeemed from WooCommerce invoice
Points Earned in this Order

I wanted to hide those from my printed invoice because these lines doesn’t matter, as the points redeemed discounts are already shown on the middle part of the Invoice and I need to cut extra piece of paper every time for packaging, therefore, printing it twice on same page was a waste.

SUMO Reward Points – WooCommerce Reward System – plugin options with HTML

While searching for “Message to display Earned Points” and “Message to Redeemed Points” I found it inside SUMO plugin options like the below screenshots

How to remove points earned & redeemed from WooCommerce invoice
Message to Redeemed Points
How to remove points earned & redeemed from WooCommerce invoice
Message to display Earned Points

You will find these option fields on Sumo plugin modules, please go through the options and type in the keyboard “Ctrl+F” to find the text and jump on it.

From the above 2 screenshots, I used HTML to wrap the message and applied <div class.. to hook the message from invoice and used CSS to display:none; that is hide it from invoice. I used HTML CSS here because if you make this message off by clicking the checkbox this message will also be hidden from Order edit wp-admin page, which we don’t want, rather we want to hide it from Invoice only.

How to remove points earned & redeemed from WooCommerce invoice
Order edit wp-admin page

CSS Code

How to remove points earned & redeemed from WooCommerce invoice
CSS code for style.css file

Put your CSS code as per above format marked in red box. Style.css is located under theme folder / woocommerce / invoice folder – these folders are responsible for Invoice customization, these folder structures are documented here.

Checking HTML output

While doing customization you can check the changes live by generating HTML rather than generating pdf every time after making a small code change, by following the below screenshot. So after you are done with the changes you can turn off the checkbox and output PDF as permanent for invoice print.

How to remove points earned & redeemed from WooCommerce invoice
HTML output URL

Done

The final invoice will have no messages at the bottom.

How to remove points earned & redeemed from WooCommerce invoice
final invoice pdf

Conclusion

You can experiment with different HTML and CSS to customize the Invoice as per your needs. Need any help send me a message! Please share this tutorial if it really helped.

How to add tag or badge over WooCommerce single product page with CSS

I had a problem where customers could not see or not wanted to see “SOLD OUT” by scrolling down on mobile and instead calling or messaging for product availability or in stock. So I wanted to show the “SOLD OUT” or “STOCK OUT” or sale badge in mobile with CSS so visitors don’t get confused and see stock out when visiting a single product woocommerce page.

Why choose CSS to make or add changes for woocommerce product badge?

I chose CSS rather than Javascript because CSS is easier to apply and does not interfere too much and for me, CSS is easy to apply and less hassle. You can use javascript but too much javascript is not good as per my experience. CSS does not break a website or create critical errors like javascript if applied by mistake.

How to choose which class to take for applying CSS?

How to add tag or badge over WooCommerce single product page with CSS
WooCommerce default class
How to add tag or badge over WooCommerce single product page with CSS
CSS :before

Check my screenshots you need to find out the CSS container where you need to put the “SOLD OUT” text and you can put text using :before or :after with content: " "

.product and .outofstock are default classes by WooCommerce that are auto-generated so I took those as references and applied the CSS. As per your given theme’s structure, your CSS class will have different configurations and child classes so it is better to play around with classes.

If you found the perfect CSS class just copy and paste the code below by replacing your CSS class and you will have a badge with your text, for me it’s SOLD OUT.

.product.outofstock .apus-images:before {
content: "SOLD OUT";
background: red;
position: absolute;
top: 60px;
font-size: 25px;
z-index: 99999;
color: white;
font-weight: 700;
padding: 2px;
}

Conclusion

If CSS doesn’t work for you in critical situations you have to use javascript because javascript is more powerful but complex.

Hope this helps, please share this and link this article if you find it useful.

Check Most Recent Posts