Knowledgebase

How to remove the "New" text indicating newly added products in PrestaShop

When you add new products in PrestaShop by default these products are marked as new. There's a option in the admin panel which controls this and it's enabled by default. You can find it in Preferences>Products. It's set to 20 which means that after you add a product it's considered new for twenty days. To disable this option just set it to 0 (zero). By default, when new products are displayed on the frontend this is visually indicated with a text New on product list/category pages.

However, if for some reason you want to keep the option enabled but you want to hide the New text on the frontend, you can do it with a simple code modification. Note that whether such a text is displayed at all, and if it is, where exactly it's displayed, and which file has to be edit to remove the text depends on the particular theme that you use. In this article we'll use as examples the default themes that come prepackaged with PrestaShop 1.4, PrestaShop 1.5 and PrestaShop 1.6:

The principle is the same for other themes. There are some useful tools that you can use to find in which CSS file you have to perform the modification and the exact code that you have to modify. One such tool is the add-on Firebug for Mozilla Firefox. After you install it just click with the right mouse button on the element on the page and from the menu that appears select Inspect Element with Firebug. This will display at the bottom of the page the HTML and CSS code of the element, as well as the CSS file(s) in which the code is located. The web browser Google Chrome has a similar built-in tool; just click with the right mouse button on the element and from the menu that appears select Inspect element.

PrestaShop 1.4

In the PrestaShop 1.4 default theme the notification New is displayed on a green background next to the image of the product on category pages. To hide it you need to edit the product_list.css file of your theme. For example, if your store is installed directly in the public_html folder on your PrestaShop hosting account and you use the default theme, the path to the file will be public_html/themes/prestashop/css/product_list.css. Find the following code:

ul#product_list li .new {
	background: transparent url(../img/flag_new_bg.jpg) repeat-x scroll 0%;
	border: 1px solid #488C40;
	color: white;
	font-size: 0.6em;
	font-weight: bold;
	margin: 0 1em 0 0;
	padding: 0 0.4em;
	text-transform: uppercase;
	vertical-align: 0.3em
}

On a new line somewhere between the brackets put display: none; and save the file. You can edit the file from the Files section of the Pixie control panel, or you can download it with an FTP client, edit it with a text editor (e.g. Notepad) and upload it back overwriting the old file. Then clear your browser cache and refresh the frontend of your site to see the result.

PrestaShop 1.5

With the default theme that comes prepackaged with PrestaShop 1.5 the New sign appears on a red background across the top right corner of product images on product list/category pages, as well as on the home page in the featured products section. To remove it on category pages you have to edit the product_list.css file of your theme. For instance, if your PrestaShop is installed directly in the public_html folder on your hosting account, meaning the site is accessible at yourdomain.com, and you use the default theme, then the path to the file will be public_html/themes/default/css/product_list.css. Find the following code in the file:

#product_list li span.new {
	display: block;
	position: absolute;
	top: 15px;
	right:-30px;
	padding: 1px 4px;
	width: 101px;
	font-size:10px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform:rotate(45deg);
	-ms-transform: rotate(45deg);
	background-color: #990000
		}

Replace display: block; with display: none; and save the file. You can do that from the Files section of the Pixie control panel. Alternatively, you can download the file to you local computer, edit it with a text editor (e.g. Notepad), and upload it back overwriting the old file.

New products are also marked with a New sign on the home page in the featured products block. To hide it there you need to edit the file homefeatured.css of the homefeatured module. If the root PrestaShop directory on your hosting account is public_html, the path to the file will be public_html/modules/homefeatured/homefeatured.css. Find the following code:

#featured-products_block_center .product_image span.new {
	display: block;
	position: absolute;
	top: 15px;
	right:-30px;
	padding: 1px 4px;
	width: 101px;
	font-size:10px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform:rotate(45deg);
	-ms-transform: rotate(45deg);
	background-color: #990000
}

Change display: block; with display: none; and save the change. Clear your browser cache and refresh the frontend of your site to check the results.

PrestaShop 1.6

The default theme of PrestaShop 1.6 displays a text New on blue background over the left corner of product images.

In PrestaShop 1.6 the default theme that comes with the application is in a folder labeled default-bootstrap, and unlike the default themes of the previous versions this time you have to edit the file global.css. So if the application is installed directly in the public_html directory on your account, meaning the homepage of the frontend is yourdomain.com, then the path to the file on the account will be public_html/themes/default-bootstrap/css/global.css. In the file find the following code:

.new-label {
  font: 700 14px/12px Arial, Helvetica, sans-serif;
  color: white;
  background: #6ad4ff;
  text-transform: uppercase;
  padding: 9px 0 7px;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.24);
  width: 130px;
  text-align: center;
  display: block;
  position: absolute;
  left: -33px;
  top: 16px;
  z-index: 1;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg); }

On a new line before the last bracket put the code display: none; and save the change. This will remove the New sign from category pages and from any place on the frontend of the site where it's otherwise shown.

You can edit the file from the Files section of the Pixie control panel, or you can download it with an FTP client, edit it with a text editor and upload it back overwriting the old file.

Was this answer helpful?

 Print this Article

Also Read