Skip to main content

Useful JS Snippets

Below are some useful JS snippets that you can add to your WordPress theme to customize ShopWP

Add a custom input above the buy button to pass to the cart

This code does two things. It adds a custom "Special instructions" input above any product buy button. If a user adds a value to this input, the value will then get passed to the line item and eventually the Shopify order.

wp.hooks.addFilter(
'cart.lineItemAttributes',
'shopwp',
function (defaultAttributes, variant, quantity, buyButtonState, buttonRef) {
var $parentWrapper = jQuery(buttonRef).closest('.swp-item')

var $inputElement = $parentWrapper.find(
'.special-instructions-wrapper input'
)
var inputVal = $inputElement.val()

if (!$inputElement.length) {
return defaultAttributes
}

if (!inputVal) {
return defaultAttributes
}

return [
{
key: 'Special instructions',
value: inputVal,
},
]
}
)

wp.hooks.addFilter(
'before.productBuyButton',
'shopwp',
function (defaultValue, productState) {
return `
<style>
.special-instructions-wrapper {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}

.special-instructions-wrapper label {
font-weight: bold;
}
</style>
<div class="special-instructions-wrapper">
<label for="instructions">Enter special instructions:</label>
<input type="text" id="instructions" name="instructions" placeholder="Your instructions go here" />
</div>
`
}
)