JavaScript Filters

The below JavaScript filters allow you to customize various aspects of the plugin. You can do things such as modify the checkout url, add custom HTML into the layout, and more.

To get started, follow our Using JavaScript Hooks guide first.

Any filter name that begins with before or after will allow you to insert custom HTML directly into the product layout.

product.titleText

Allows for customizing the product title text. You must return a string after completing any customizations.

Parameter	Description
productTitle - (string)	The product title text
productPayload - (object)	The product data

Example

wp.hooks.addFilter(
    'product.titleText',
    'shopwp',
    function (productTitle, productPayload) {
        return productTitle + ' plus custom text'
    }
)

product.optionName

Allows for customizing the name of a product option. For example, Color or Size. This will run for both variant styles.

Parameter	Description
optionName - (string)	The option name text
productOptionState - (object)	The state of the product option. Contains info such as whether the option is selected.

Example

wp.hooks.addFilter(
    'product.optionName',
    'shopwp',
    function (optionName, productOptionState) {
        return optionName + ' custom'
    }
)

product.subscriptionsInfoHTML

Allows for customizing the HTML inside the subscription info tooltip. Must return a string of HTML.

Parameter	Description
None	-

Example

wp.hooks.addFilter(
    'product.subscriptionsInfoHTML',
    'shopwp',
    function (defaultHTML) {
        return '<p>Custom subscription info</p>'
    }
)

product.missingSelectionText

Allows for customizing the "missing selection" text. This text shows when a customer tries adding to cart without selecting the required variants.

Parameter	Description
missingText - (string)	The default missing selections text. "Please select a color..."
productOptionState - (object)	The state of the product option. Contains info such as whether the option is selected.

Example

wp.hooks.addFilter(
    'product.missingSelectionText',
    'shopwp',
    function (missingText, productOptionState) {
        return 'Whoops, you must select all options first.'
    }
)

product.variantValue

Allows for customizing the text of each variant value.

Parameter	Description
variantValue - (string)	The text of the variant value

Example

wp.hooks.addFilter('product.variantValue', 'shopwp', function (variantValue) {
    return 'New variant value text'
})

product.preSelectVariantById

Allows for selecting a product variant on page load, based on variant id. You must return a valid GraphQL product variant ID.

The GraphQL product id is a base64-encoded string in this format: gid://shopify/ProductVariant/40323659989183. To create the GraphQL id, append the numeric product id to this string: gid://shopify/ProductVariant/, like this:

var graphId = 'gid://shopify/ProductVariant/' + '40323659989183'

Parameter	Description
variantId - (bool)	This will always be false
productPayload - (object)	The product payload data

Example

wp.hooks.addFilter(
    'product.preSelectVariantById',
    'shopwp',
    function (variantId, payload) {
        return 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC80MDMyMzY1OTk4OTE4Mw=='
    }
)

product.lineItemOptions

Allows you to customize the line item options before they're added to the cart. Useful for customizing things like the quantity, variant, or min/max quantity.

Parameter	Description
lineItemOptions - (object)	Represents the line item options to be added

Example

wp.hooks.addFilter(
    'product.lineItemOptions',
    'shopwp',
    function (lineItemOptions) {
        lineItemOptions.minQuantity = 2
        return lineItemOptions
    }
)

product.colorSwatchValue

Allows you to customize the value of the color swatch when using the variant buttons. This is useful if you want to display a custom color for each variant option. By default, the plugin will attempt to use the variant value to generate the color.

Parameter	Description
color - (string)	Represents the name of the color. For example, black or red

Example

wp.hooks.addFilter('product.colorSwatchValue', 'shopwp', function (color) {
    return color
})

product.variantStyles

Allows you to customize the CSS styles of the variant buttons

Parameter	Description
styles - (string)	Represents the CSS inline styles to be added

Example

wp.hooks.addFilter('product.variantStyles', 'shopwp', function (styles) {
    return styles
})

product.modalSettings

Allows you to customize the modal settings. The available modal settings match the available [wps_products] shortcode attributes. In other words, any shortcode attribute can be used to customize the modal.

Parameter	Description
modalSettings - (object)	Represents the modal settings

Example

// Disable image zoom within modal only
wp.hooks.addFilter('product.modalSettings', 'shopwp', function (modalSettings) {
    modalSettings.showZoom = false
    return modalSettings
})

cart.checkoutUrl

Allows you to customize the final checkout url. Useful for adding tracking parameters or customizations to the final checkout page.

Parameter	Description
url - (string)	Represents the checkout url

Example

wp.hooks.addFilter('cart.checkoutUrl', 'shopwp', function (url) {
    return url
})

cart.isCheckingOut

Allows you to short-circuit the checkout redirect.

Parameter	Description
isCheckingOut - (bool)	Whether to redirect to checkout page

Example

// Prevent the checkout redirect
wp.hooks.addFilter('cart.isCheckingOut', 'shopwp', function (isCheckingOut) {
    return false
})

cart.lineItemsLink

Allows you to set a link for the lineitems inside the cart.

Parameter	Description
defaultLink - (bool)	link
lineItem - (object)	Represents the line item data
cartState - (object)	Represents the cart state

Example

wp.hooks.addFilter(
    'cart.lineItemsLink',
    'shopwp',
    function (defaultLink, lineItem, cartState) {
        return false
    }
)

cart.lineItemSubscriptionDescription

Allows you to customize the subscription description label

Parameter	Description
subscriptionLabel - (string)	Subscription label

Example

wp.hooks.addFilter(
    'cart.lineItemSubscriptionDescription',
    'shopwp',
    function (subscriptionLabel) {
        return subscriptionLabel
    }
)

cart.lineItemVariantTitleText

cart.lineItemTitleText

misc.linkHref

misc.linkTarget

misc.carouselSettings

storefront.availableCollections

Allows you to filter the available collections that the user is shown. Useful for preventing users from filtering certain collections. You must return the same collections data structure from the callback.

Parameter	Description
collections - (object)	Represents the collections shown to filter

Example

// Exclude the "games" collection
wp.hooks.addFilter(
    'storefront.availableCollections',
    'shopwp',
    function (collections) {
        return collections.filter(collection => collection.label !== 'Games')
    }
)

storefront.availableTags

storefront.availableVendors

storefront.availableTypes

storefront.availablePricing

before.cartCheckoutButton

after.cartCheckoutButton

before.lineItemTitle

after.lineItemTitle

before.cartTitle

after.cartTitle

before.productBuyButton

after.productBuyButton

before.productThumbnail

after.productThumbnail

before.productPricing

after.productPricing

before.productTitle

Example

wp.hooks.addFilter(
    'before.productTitle',
    'shopwp',
    function (defaultValue, props) {
        return '<p>Vendor: ' + props.product.vendor + '</p>'
    }
)

after.productTitle