Previous Next Product Navigation for Magento 2

Previous Next Product Navigation

Introduction

The extension allows to easily navigate between product pages with a single click

Installation

The extension has 2 separate ways of installation, via Composer or by copying the code.

Please follow this Installation Guide to install the extension.

Configuration

Configuration Settings

To access the Previous Next Product Navigation settings, log into the Magento Admin panel and go to STORES ⟶ Configuration ⟶ ULMOD EXTENSIONS ⟶ Product Previous Next

The module settings contain five sections: General, Sorting Settings, Previous Settings, Next Settings, and Back Settings

General

Set Enabled to "Yes", to enable the extension in the storefront or "No" to disable

Display Prev Product Link - set to "Yes", to display the previous link on the navigation or "No" to hide it

Display Next Product Link - set to "Yes", to display the next link on the navigation or "No" to hide it

Display Back Link - set to "Yes", to display the back to category link on the navigation or "No" to hide it

Layout Type - select the layout type of the Previous Next Product Navigation:

  • Layout 1: Previous link in the left side, Next link in the right side, Back to a category link in the center
  • Layout 2Previous and Next links in the right side, Back to a category link in the left side
  • Layout 3: Previous and Next links in the left side, Back to the category link in the right side

Sorting Settings

Product Sort by - choose the way of sorting product on the navigation, by "Product Name", "Price" or "Id"

Product Direction - choose the sort direction of products on the navigation: "Ascending" or "Descending"

Previous Settings

Show previous link as - choose to show the previous link in the form of "Text", "Arrow" or "Image"

  • If "Text" is selected, in the Previous link text -  field, define the text to appear on the navigation. eg: Previous or Prev
  • If "Arrow" is selected, in the Previous arrow type -  field, select the arrow type to appear on the navigation. Up to 10 arrow type available
  • If "Image" is selected, in the Previous image - field, upload the image to appear on the navigation

Show Previous Product Image - set to "Yes" to show the product image on the previous link block

  • Product Image Width (Resized) - enter the resized width of the previous product image in pixel. Example: 60. Default: 80
  • Product Image Height (Resized) - enter the resized height of the previous product image in pixel. Example: 60. Default: 80

Show previous product image on hover prev block - if "Yes", the product image will show on hovering previous link block

Show Previous product name - if "Yes", the product name will show on previous link block

  • Prev product name Max Length -  define the maximum length/character of the product name. eg: 20. If not set, full product name length will show

Next Settings

Show next link as - choose to show next link in a form of "Text", "Arrow" or "Image"

  • If "Text" is selected, in the Next link text -  field, define the text to appear on the navigation. eg: Next or Next
  • If "Arrow" is selected, in the Next arrow type -  field, select the arrow type to appear on the navigation. Up to 10 arrow type available
  • If "Image" is selected, in the Next image - field, upload the image to appear on the navigation

Show Next Product Image - set to "Yes" to show the product image on next link block

  • Product Image Width (Resized) - enter the resized width of the next product image in pixel. Example: 60. Default: 80
  • Product Image Height (Resized) - enter the resized height of the next product image in pixel. Example: 60. Default: 80

Show next product image on hover next block - if "Yes", the product image will show on hovering next link block

Show Next product name - if "Yes", the product name will show on next link block

  • Next product name Max Length -  define the maximum length/character of the product name. eg: 20. If not set, full product name length will show

Back Settings

Show back to category link as - choose to show back link in form of "Text", "Arrow" or "Image"

  • If "Text" is selected, in the Back link text -  field, define the text to appear on the navigation. eg: Back or Back
  • If "Arrow" is selected, in the Back arrow type -  field, select the arrow type to appear on the navigation. Up to 10 arrow type available
  • If "Image" is selected, in the Back image - field, upload the image to appear on the navigation

Show category image in back link - set to "Yes" to show the category image on back link block

  • Category Image Width (Resized) - enter the resized width of the category image in pixel. Example: 60. Default: 80
  • Category Image Height (Resized) - enter the resized height of the category image in pixel. Example: 60. Default: 80

Show back category image on hover back block - if "Yes", category image will show on hovering back link block

Show category name in back link - if "Yes", category name will appear on back link block

  • Category name max length - define the maximum length/character of the category name. eg: 20. If not set, full category name length will show

Frontend View

Example of Previous Next Product Navigation with layout 1


Example of Previous Next Product Navigation with layout 2


Example of Previous Next Product Navigation with layout 3

Extension Support

Need Help?

Ulmod Support team is always ready to assist you, no matter which part of the world you are in. If something does happen and you think you might be experiencing an issue or bug, please contact us via [email protected] or submit a ticket from our Helpdesk Ticket and we will help you out.

Got Questions?

Should you have any questions or feature suggestions, please Contact Us. Your feedback is welcome!

Extension Product Page