Changing markup of pagination

Store
1

Hey there,

I am working with a client, who wants to change the styling of pagination on the store/product page. Essentially, they want to remove the ‘Of X’ part of the pagination, as it is fussy/confusing for some customers.

I can’t work out if it is possible to edit what happens with the v65-product-pagination tag. I can remove the <li> elements through javascript I suppose, but I want to check if there is a way of changing options for pagination first before I bodge it.

Many thanks!

Alex

2

Incase anybody stumbles across this, I ended up just popping some javascript at the bottom of the template page. I’ve put it below incase anybody finds it useful (it probably needs modifying for different templates, which apply different classes to pagination potentially).

I’m sure it could be more efficient etc, but it essentially finds if there is a ‘last’ button on the page, and if so, removes certain child elements. If there is no ‘last’ page element, it removes a slightly different set of child elements.

<script>

function confirmEnding(string, target) {
	  if (string.substr(-target.length) === target) {
		return true;
	  } else {
		return false;
	  }
	}

	let remover = document.querySelector("div.v65-paging.v65-group ul");
	var removerlastchild = remover.lastElementChild;
	result = confirmEnding(removerlastchild.outerHTML, '»</a></li>');
	
	let remover2 = document.querySelector("div.v65-paging.v65-group.v65-pagingBottom div.v65-product-pagination ul");
	var removerlastchild2 = remover2.lastElementChild;
	
	
	if(result == true) {
		removerlastchild.style.display = 'none';
		removerlastchild.previousElementSibling.previousElementSibling.style.display = 'none';
		removerlastchild.previousElementSibling.previousElementSibling.previousElementSibling.style.display = 'none';
		
		removerlastchild2.style.display = 'none';
		removerlastchild2.previousElementSibling.previousElementSibling.style.display = 'none';
		removerlastchild2.previousElementSibling.previousElementSibling.previousElementSibling.style.display = 'none';
		
	}
	else {
		removerlastchild.style.display = 'none';
		removerlastchild.previousElementSibling.style.display = 'none';
		
		removerlastchild2.style.display = 'none';
		removerlastchild2.previousElementSibling.style.display = 'none';
	}
	
</script>