Change text of "previous and next" in product page

Site URL: https://www.terroir-imports.com/produits

Hi guys, 

I am looking to change the "previous" and "next" text on my product page on my french version website. Does anyone have some custom CSS for this? I would like it to be:

• previous = précédent
• next = suivant

Thanks guys, 

🙂 

Add the following to Store Settings > Advanced > Page Header Code Injection.

<style>

  .ProductItem-nav {
  
    line-height: 1.5em;
    
    }
    
  .tweak-product-item-nav-pagination-style-previousnext .ProductItem-nav-pagination-link--next .ProductItem-nav-pagination-link-direction,
  .tweak-product-item-nav-pagination-style-previousnext .ProductItem-nav-pagination-link--prev .ProductItem-nav-pagination-link-direction
  
    {
  
    display: none;
    
    }
    
  .tweak-product-item-nav-pagination-style-previousnext .ProductItem-nav-pagination-link--next:after {
  
    content: 'Suivant \0020\203A';
    
    }
    
  .tweak-product-item-nav-pagination-style-previousnext .ProductItem-nav-pagination-link--prev:before {
  
    content: '\2039\0020 Pr\00e9 c\00e9 dent';
    
    }
    
  </style>

This for v7.0.

Let us know how it goes.

11 hours ago, creedon said:

Add the following to Store Settings > Advanced > Page Header Code Injection.

<style>

  .ProductItem-nav {
  
    line-height: 1.5em;
    
    }
    
  .tweak-product-item-nav-pagination-style-previousnext .ProductItem-nav-pagination-link--next .ProductItem-nav-pagination-link-direction,
  .tweak-product-item-nav-pagination-style-previousnext .ProductItem-nav-pagination-link--prev .ProductItem-nav-pagination-link-direction
  
    {
  
    display: none;
    
    }
    
  .tweak-product-item-nav-pagination-style-previousnext .ProductItem-nav-pagination-link--next:after {
  
    content: 'Suivant \0020\203A';
    
    }
    
  .tweak-product-item-nav-pagination-style-previousnext .ProductItem-nav-pagination-link--prev:before {
  
    content: '\2039\0020 Pr\00e9 c\00e9 dent';
    
    }
    
  </style>

Let us know how it goes.

This worked out perfectly! Thank you very much @creedon!

How do I add a "Next" and "Previous" button in the first place? I can't figure out if it comes with my site version or not. That would be SO helpful

On 12/6/2020 at 10:59 AM, elijah_aaron said:

How do I add a "Next" and "Previous" button in the first place? I can't figure out if it comes with my site version or not. That would be SO helpful

Do you still need help on this?

@tuanphan

I responded to @elijah_aaron's question here.

Yes, but can I bypass this?

I am also looking for a "Next" and "Previous" button that would show up on an individual product page so you could go to the next product in catalog (or ideally whats filtered by category),  https://www.fitbarstrong.com/ocr-ninja-warrior-equipment.  Using Fulton template SS 7.0.  It would be a much better user experience than back, reload catalog, and reclick.  Any help is appreciated! @tuanphan

On 10/25/2020 at 10:46 AM, creedon said:

Add the following to Store Settings > Advanced > Page Header Code Injection.

<style>

  .ProductItem-nav {
  
    line-height: 1.5em;
    
    }
    
  .tweak-product-item-nav-pagination-style-previousnext .ProductItem-nav-pagination-link--next .ProductItem-nav-pagination-link-direction,
  .tweak-product-item-nav-pagination-style-previousnext .ProductItem-nav-pagination-link--prev .ProductItem-nav-pagination-link-direction
  
    {
  
    display: none;
    
    }
    
  .tweak-product-item-nav-pagination-style-previousnext .ProductItem-nav-pagination-link--next:after {
  
    content: 'Suivant \0020\203A';
    
    }
    
  .tweak-product-item-nav-pagination-style-previousnext .ProductItem-nav-pagination-link--prev:before {
  
    content: '\2039\0020 Pr\00e9 c\00e9 dent';
    
    }
    
  </style>

Let us know how it goes.

Hii @creedon This code not working in version 7.1 

linke:https://www.billingsauction.com/

On 12/9/2020 at 3:19 AM, tuanphan said:

Do you still need help on this?

yes,@tuanphan please help me 

7 minutes ago, formsquarespace said:

This code not working in version 7.1 

The code is for a v7.0 site.

5 minutes ago, creedon said:

The code is for a v7.0 site.

you help me use for v7.1 site.