Images on add-to-cart buttons

Since the add-to-cart buttons and the options buttons are different from regular buttons, namely their container element is not present, it is difficult to add images to their background. Here is the code which injects DIVs into them, and the CSS for styling the buttons.

HTML:

JAVASCRIPT:

document.addEventListener('DOMContentLoaded', () => {  
const subString = 'shop';
const subStringTwo = 'shop/p/';
const getURL = window.location.href;
if (getURL.includes(subString)) {
const headerActions = document.querySelector('.header-actions');
let isTouch = false;
function checkHeader() {
const styles = window.getComputedStyle(headerActions);
isTouch = styles.getPropertyValue('display') !== 'flex';
}
checkHeader();
let optionsButtons = document.getElementsByClassName('sqs-view-options-button-wrapper');
const optionsButtonsArray = Array.from(optionsButtons);
optionsButtonsArray.forEach(optionButton => {
const wrenchDiv = document.createElement('div');
wrenchDiv.classList.add('wrenchDiv');
wrenchDiv.id = "wrenchDiv";
optionButton.appendChild(wrenchDiv); 
});
let addCartButtons = document.getElementsByClassName('sqs-add-to-cart-button');
const addCartButtonsArray = Array.from(addCartButtons);
addCartButtonsArray.forEach(addCartButton => {
const addToCartDiv = document.createElement('div');
addToCartDiv.classList.add('addToCartDiv');
addToCartDiv.id = "addToCartDiv";
addCartButton.appendChild(addToCartDiv);
	if (getURL.includes(subStringTwo) && isTouch === false) {
const moveRight = 7.5;
const moveUp = -71;
addToCartDiv.style.transform = `translate(${moveRight}%, ${moveUp}%)`;
	}
	if (getURL.includes(subStringTwo) && isTouch === true) { 
const moveRightMobile = -1;
const moveUpMobile = -75;
addToCartDiv.style.transform = `translate(${moveRightMobile}%, ${moveUpMobile}%)`;
	}
});
if (getURL.includes(subStringTwo)) {
let addCartButtonsProduct = document.getElementsByClassName('sqs-add-to-cart-button-inner');
const addCartButtonsProductArray = Array.from(addCartButtonsProduct);
addCartButtonsProductArray.forEach(addCartButtonProduct => {
}); 
}
}
});

CSS:

.sqs-view-options-button-inner {
  visibility: hidden;
  font-size: 0px;
}
.sqs-view-options-button-inner:after {
  visibility: visible;
  font-size: 18px;
  content: "MODIFY";
  letter-spacing: 2.5px;
}
.sqs-view-options-button-wrapper.sqs-button-element--primary {
  transition-delay: 0s !important;
  transition: all 0.8s !important;
}
.wrenchDiv {
  height: 50px;
  width: 100%;
  display: flex;
  position: absolute;
  z-index: 1000;
 // bottom:5;
  left:0;
  pointer-events: none;
  background-image: url(https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/a6276c4e-1a53-4f3b-850e-03091aaca954/wrenchIcon1.png) !important;
  background-size: contain;
  background-position: left 5px center;
  background-clip: content-box !important;
  background-repeat: no-repeat !important;
}

//add to cart button picture
.addToCartDiv {
  height: 50px;
  width: 100%;
  display: flex;
  position: absolute;
  z-index: 1000;
//  bottom: 1;
  left:0;
  pointer-events: none;
  background-image: url(https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/d5c47552-54a2-4d71-99e8-074cd157c8bd/grabdemonIcon1.png) !important;
  background-size: contain;
  background-position: left 5px center;
  background-clip: content-box !important;
  background-repeat: no-repeat !important;
}

There is some more styling required, but you got this.