JavaScript Filters
ShopWP comes with JavaScript filters that allow you to customize things product links or adding custom HTML into the layout.
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 |
| option - (object) | The name value pair |
| state - (object) | The product state object. Contains info such as whether the option is selected or not. |
Example
wp.hooks.addFilter(
'product.optionName',
'shopwp',
function (optionName, option, state) {
return optionName + ' custom'
}
)
product.labelHtml​
Allows for customizing the HTML of the product option label.
| Parameter | Description |
|---|---|
| defaultVal | Empty string, always false by default |
| option - (object) | Represent the product option with name / value |
| productOptionState - (object) | Represent the entire product option state |
| allSelectableOptions - (object) | Represent which product options are selectable |
| settings - (object) | Represent the user settings |
Example
wp.hooks.addFilter(
'product.labelHtml',
'shopwp',
function (
defaultVal,
option,
productOptionState,
allSelectableOptions,
settings
) {
console.log('defaultVal', defaultVal)
console.log('option', option)
console.log('productOptionState', productOptionState)
console.log('allSelectableOptions', allSelectableOptions)
console.log('settings', settings)
return `
<div>
${option.name}
</div>
`
}
)
product.variantButtonHtml​
Allows for customizing the HTML of the product variant button
| Parameter | Description |
|---|---|
| defaultVal | Empty string, always false by default |
| options - (object) | Represent all the options with name / value |
Example
wp.hooks.addFilter(
'product.variantButtonHtml',
'shopwp',
function (defaultVal, options) {
console.log('defaultVal', defaultVal)
console.log('options', options)
return `
<div>
${options.variantValue}
</div>
`
}
)
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 you to automatically select a specific variant on page load. Must return the product variant ID.
| Parameter | Description |
|---|---|
| defaultId - (bool) | This will always be false |
| productPayload - (object) | The product payload data. You can use this to find the variant id |
Example
// Select the first variant automatically
wp.hooks.addFilter(
'product.preSelectVariantById',
'shopwp',
function (defaultId, payload) {
return payload.variants.edges[0].node.id
}
)
// Select a specific variant, depending on the product
wp.hooks.addFilter(
'product.preSelectVariantById',
'shopwp',
function (defaultId, payload) {
if ((payload.title = 'Lismore Mattress')) {
return 'gid://shopify/ProductVariant/47701372666140'
}
return false
}
)
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 ShopWP will attempt to use a "native CSS color" based on the variant name. For example, if you name your variant "White", ShopWP will correctly show a white color. This is because the plugin is able to identify what color that represents in CSS.
The full list of available color names can be found here under the column "Color name".
This filter is particularly useful if you want to make sure to display a custom color not available in the CSS color names.
| Parameter | Description |
|---|---|
| colorName - (string) | Represents the name of the color. For example, black or red |
Example
wp.hooks.addFilter('product.colorSwatchValue', 'shopwp', function (colorName) {
if (colorName === 'Heather Gray') {
return '#2e2e2e'
}
return colorName
})
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
})
product.addToCartText​
Allows you to customize the add to cart button text.
| Parameter | Description |
|---|---|
| defaultText - (string) | Represents the default add to cart text |
| state - (object) | Represents the state of the buy button component |
Example
wp.hooks.addFilter(
'product.addToCartText',
'shopwp',
function (defaultText, state) {
console.log('defaultText', defaultText)
console.log('state', state)
return 'Custom add to cart text'
}
)
product.thumbnails​
Allows you to filter a product's thumbnail images. Useful if you want to hide or customize certain thumbnails.
| Parameter | Description |
|---|---|
| defaultThumbnails - (array) | Represents the default product thumbnails |
Example
wp.hooks.addFilter(
'product.thumbnails',
'shopwp',
function (defaultThumbnails) {
return defaultThumbnails
}
)
product.imageSrc​
Allows for filtering a product images src. Useful if you want to customize the image location or load a specific image.
| Parameter | Description |
|---|---|
| defaultSrc - (string) | Represents the default product image src |
| image - (object) | Represents the full image object including width and height |
| isFeatured - (boolean) | Whether this image is the featured image or not |
| isVideo - (boolean) | Whether this is a video or not |
| payload - (object) | Represents the full product payload |
Example
wp.hooks.addFilter(
'product.imageSrc',
'shopwp',
function (defaultSrc, image, isFeatured, isVideo, payload) {
return defaultSrc
}
)
product.modalLayout​
Allows for customizing the product modal HTML. Useful for creating a custom layout or design.
You must return a valid HTML string.
| Parameter | Description |
|---|---|
| defaultLayout - (string) | Represents the default modal layout in an HTML string |
| settings - (object) | The product settings being used |
In the example below, you'll notice custom HTML elements such as <ProductImages />.
Example
wp.hooks.addFilter(
'product.modalLayout',
'shopwp',
function (defaultLayout, settings) {
return `
<div class="wps-modal-row" style="display: flex;">
<div style="width: 50%;padding: 0px 2em 0px 1em;">
<ProductImages />
</div>
<div style="width: 50%;padding-right: 1em;">
<ProductTitle />
<ProductDescription />
<ProductPricing />
<ProductBuyButton />
</div>
</div>
`
}
)
These are "React JS components" that you can use within your layout. When you use them, they will output the desired component inside your layout. This means you can move them around to create your desired look.
Full list of React components
<ProductImages />
<ProductTitle />
<ProductDescription />
<ProductPricing />
<ProductBuyButton />
<Reviews />
product.subscriptionLabel​
Allows for customizing the label found within the subscriptions widget.
Must return a string of text.
| Parameter | Description |
|---|---|
| text - (string) | Represents the default subscription label text as a string |
| sellingGroup - (object) | The subscription details of the selected option |
| isSelected - (boolean) | Whether the subscription is selected or not |
| saveAmount - (int or boolean) | The amount saved if purchased, false otherwise |
| regularPrice - (int) | The price of the subscription |
| discountPrice - (int or boolean) | The discounted price (if any) of the subscription, false otherwise |
In the example below, you'll notice custom HTML elements such as <ProductImages />.
Example
wp.hooks.addFilter(
'product.subscriptionLabel',
'shopwp',
function (
text,
sellingGroup,
isSelected,
saveAmount,
regularPrice,
discountPrice
) {
if (isSelected) {
// Add custom text when the user selects the subscription option
return 'Subscribe and Save'
} else {
return 'Subscribe and Save'
}
}
)
product.unavailableHtml​
Allows for customizing the HTML of the out of stock notice. This notice replaces the buy button.
Useful for creating things like "Notify me when back in stock" functionality.
| Parameter | Description |
|---|---|
| defaultVal - (boolean) | Represents the default value, always false |
| productState - (object) | The full product state. Contains info such as product data, is selected, the DOM element, etc. |
Example
wp.hooks.addFilter(
'product.unavailableHtml',
'shopwp',
function (defaultVal, productState) {
console.log('productState', productState)
return '<h1>Nothin here ...</h1>'
}
)
product.titleHtml​
Allows for customizing the product title HTML.
| Parameter | Description |
|---|---|
| defaultVal - (boolean) | Represents the default value, always false |
| productState - (object) | The full product state. Contains info such as product data, is selected, the DOM element, etc. |
Example
wp.hooks.addFilter(
'product.titleHtml',
'shopwp',
function (defaultVal, productState) {
console.log('productState', productState)
return '<h1>Custom product title goes here</h1>'
}
)
product.titleHeadingTag​
Allows for customizing the HTML tag for the product title. Default h2 and h1 on product detail pages.
Should return the name of the tag without brackets, e.g., "h3" or "h4".
| Parameter | Description |
|---|---|
| defaultTag - (string) | Represents the default tag. Default h2 |
| productState - (object) | The full product state. Contains info such as product data, is selected, the DOM element, etc. |
Example
wp.hooks.addFilter(
'product.titleHeadingTag',
'shopwp',
function (defaultVal, productState) {
console.log('productState', productState)
return 'h3'
}
)
product.sortingOptions​
Allows for customizing the product sorting options.
| Parameter | Description |
|---|---|
| sortingOptions - (array) | A JavaScript array containing a list of sorting options as objects |
Example
wp.hooks.addFilter(
'product.sortingOptions',
'shopwp',
function (sortingOptions) {
// Remove first sorting option
sortingOptions.slice(1)
return sortingOptions
}
)
product.variants​
Allows for customizing the variants a user will see on the front-end. Useful for hiding specific variants that a user can choose from.
| Parameter | Description |
|---|---|
| variants - (array) | A JavaScript array of the available variants |
Example
// Don't show the user any variants with the title "Ignore me"
wp.hooks.addFilter(
'product.variants',
'shopwp-custom',
function (variants, payload) {
variants.edges = variants.edges.filter(variant => {
if (!variant.node.title === 'Ignore me') {
return false
}
return variant
})
variants.edges = variants.edges.filter(v => v)
return variants
}
)
product.requestSettings​
Allows for customizing the settings used to fetch products. These settings are eventually passed to the raw Shopify API request. Useful for whitelisting specific metafields to include in the request.
| Parameter | Description |
|---|---|
| settings - (object) | A JavaScript object containing a list of all API parameters |
Example
// Tell ShopWP to whitelist custom metafields in the resulting payload for use in other hooks
wp.hooks.addFilter('product.requestSettings', 'shopwp-custom', function (data) {
data.metafields = [
{
namespace: 'custom',
key: 'weeee',
},
]
return data
})
product.leftInStockText​
Allows for customizing the "left in stock"—or urgency—text that is shown to users when a variant is selected.
| Parameter | Description |
|---|---|
| defaultText - (string) | The text of the urgency message shown to customer |
| quantityLeft - (in) | The total available quantity left in stock for the selected variant |
| productState - (object) | A JavaScript object containing the full product state |
Example: Add the total available quantity to the left in stock text
wp.hooks.addFilter(
'product.leftInStockText',
'shopwp',
function (defaultText, quantityLeft, productState) {
return 'Only' + quantityLeft + ' left in stock!'
}
)
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.lineItems​
Allows you to customize the line items before they're added to the cart. Fires whenever a product is added to the ShopWP cart.
If you wish to prevent a user from adding a specific variant to the cart, you can return an object with an error property. The error property's value should contain the error message you wish to display, like this:
return {
error:
'You can only add 1 pack to the cart. Remove existing pack first to add this one.',
}
| Parameter | Description |
|---|---|
| data - (array) | Represents the data being added to the cart |
| variant - (object) | Represents the variant data being added |
| productState - (object) | Represents the latest product state |
| cartData - (object) | Represents the latest cart state |
Example: Add a different product to the cart at the same time (bundles)
wp.hooks.addFilter(
'cart.lineItems',
'shopwp',
function (data, variant, productState) {
var idOfBundleProduct = '22222055505968'
var foundLineItem = data.filter(v => {
console.log('v', v.merchandiseId)
return v.merchandiseId.includes(idOfBundleProduct)
})
// A bundled product has been added to the cart. Now let's add the additional item
if (foundLineItem.length) {
data.push({
merchandiseId: 'gid://shopify/ProductVariant/22221824131120',
quantity: 1,
})
}
return data
}
)
Example: Prevent a variant from being added based on the contents of the cart
function checkIfRestrictedProductsAreAdded(idOfProduct, cartData) {
var idsOfRestrictedProducts = [
'gid://shopify/Product/10547035086',
'gid://shopify/Product/7428111925439',
'gid://shopify/Product/7428115235007',
'gid://shopify/Product/7408819077311',
'gid://shopify/Product/7593148645567',
]
// If we're dealing with a restricted product
if (idsOfRestrictedProducts.includes(idOfProduct)) {
// Cart not empty, need to do addition checks
if (cartData.lines.edges.length) {
var existingPackAlreadyInCart = cartData.lines.edges.filter(line => {
return idsOfRestrictedProducts.includes(
line.node.merchandise.product.id
)
})
if (existingPackAlreadyInCart.length) {
// Can't add to cart, existing pack already here
return true
}
}
}
return false
}
wp.hooks.addFilter(
'cart.lineItems',
'shopwp',
function (data, variant, productState, cartData) {
if (checkIfRestrictedProductsAreAdded(productState.payload.id, cartData)) {
return {
error:
'You can only add 1 of these to the cart. Remove existing product first to add this one.',
}
} else {
return data
}
}
)
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 |
| lineItem - (object) | Cart line item data |
Example
wp.hooks.addFilter(
'cart.lineItemSubscriptionDescription',
'shopwp',
function (subscriptionLabel, lineItem) {
return subscriptionLabel
}
)
cart.lineItemVariantTitleText​
Allows you to customize the line item's product variant title
| Parameter | Description |
|---|---|
| variantTitle - (string) | Represents the line item variant title text |
| lineItem - (object) | Represents the line item data |
Example
// Append the word test to every line item variant title
wp.hooks.addFilter(
'cart.lineItemVariantTitleText',
'shopwp',
function (variantTitle, lineItem) {
return variantTitle + '-test'
}
)
cart.lineItemTitleText​
Allows you to customize the line item's product title
| Parameter | Description |
|---|---|
| title - (string) | Represents the line item title text |
| lineItem - (object) | Represents the line item data |
Example
// Append the word test to every line item title
wp.hooks.addFilter(
'cart.lineItemTitleText',
'shopwp',
function (title, lineItem) {
return title + '-test'
}
)
cart.lineItemThumbnailUrl​
Allows you to customize the URL for each line item thumbnail inside the ShopWP cart.
| Parameter | Description |
|---|---|
| imageSrc - (string) | Represents the thumbnail image src |
| lineItem - (object) | Represents the line item data |
Example
wp.hooks.addFilter(
'cart.lineItemThumbnailUrl',
'shopwp',
function (imageSrc, lineItem) {
return imageSrc
}
)
cart.directCheckoutSettings​
Allows you to customize the cart settings when using the direct checkout feature. Useful for adding things like a custom note, cart attributes, or discount codes. Also provides the ShopWP cartState object within the callback.
The available keys on the cartSettings parameter correspond to Shopify's CartInput object.
| Parameter | Description |
|---|---|
| cartSettings - (object) | Represents cart settings. Corresponds to Shopify's CartInput object. |
| cartState - (object) | Represents ShopWP cart state |
| lineItemData - (object) | Represents the lineItemData being added |
Example
// Add a custom note
wp.hooks.addFilter(
'cart.directCheckoutSettings',
'shopwp',
function (cartSettings, cartState, lineItemData) {
cartSettings.note = 'This is a custom note'
return cartSettings
}
)
cart.createSettings​
Allows you to customize the default cart settings when creating a new cart. Useful for adding things like a custom note, cart attributes, or discount codes. Also provides the ShopWP cartState object within the callback.
The available keys on the cartSettings parameter correspond to Shopify's CartInput object.
| Parameter | Description |
|---|---|
| cartSettings - (object) | Represents cart settings. Corresponds to Shopify's CartInput object. |
| cartState - (object) | Represents ShopWP cart state |
| shopState - (object) | Represents ShopWP shop state |
Example
// Add a custom note
wp.hooks.addFilter(
'cart.createSettings',
'shopwp',
function (cartSettings, cartState, shopState) {
cartSettings.note = 'This is a custom note'
return cartSettings
}
)
cart.lineItemAttributes​
Allows you to add custom attributes to any product variant added to the ShopWP cart. The attributes you pass will be attached to the order data and viewable within the Shopify admin interface.
This filter will run right before a product variant is added to the cart.
In order for this to work properly, you must return an array of objects. Each object must have a key and value property, like this:
return [
{
key: 'Key one',
value: 'Value one',
},
]
| Parameter | Description |
|---|---|
| attributes - (array) | Represents the custom attributes to add. Defaults to an empty array []. |
| variant - (object) | Represents product variant information like title, price, etc. |
| quantity - (int) | Represents the total quantity being added |
| productBuyButtonState - (object) | Represents the React buy button state |
Example
// Add special instructions for a specific line item
wp.hooks.addFilter(
'cart.lineItemAttributes',
'shopwp',
function (defaultAttributes, variant, quantity, buyButtonState) {
if (
variant.node.product.product === 'My special product' &&
variant.node.title === 'Large'
) {
return [
{
key: 'Special instructions',
value: 'This could be user input',
},
]
}
return defaultAttributes
}
)
cart.checkoutButtonDisabled​
Allows for manually determining whether the checkout button is disabled or not
| Parameter | Description |
|---|---|
| defaultValue - (bool) | Represents whether the checkout button is enabled or disabled before customizing |
| cartData - (object) | Represents the current cart data such as total, line items, etc |
| cartState - (object) | Represents the full cart state |
Example
// Only enable checkout button if cart total is more than $15
wp.hooks.addFilter(
'cart.checkoutButtonDisabled',
'shopwp',
function (defaultValue, cartData, cartState) {
if (!cartData) {
return
}
var total = parseFloat(cartData.cost.totalAmount.amount)
if (total > 15) {
return defaultValue
}
return true
}
)
cart.checkoutButtonText​
Allows for customizing the checkout button text
| Parameter | Description |
|---|---|
| defaultValue - (bool) | "Begin checkout" by default |
| cartData - (object) | Represents the current cart data such as total, line items, etc |
| cartState - (object) | Represents the full cart state |
Example
wp.hooks.addFilter(
'cart.checkoutButtonText',
'shopwp',
function (defaultValue, cartData, cartState) {
return 'Something custom'
}
)
misc.linkHref​
Allows you to filter product or collection links. This filter will run whether you link products to WordPress or Shopify.
| Parameter | Description |
|---|---|
| linkHref - (string) | Represents the link's default href value |
| linkTo - (string) | Represents where the link goes |
| payload - (object) | Represents all the product data |
Example
// Added utm params to product links
wp.hooks.addFilter(
'misc.linkHref',
'shopwp',
function (linkHref, linkTo, payload) {
return linkHref + '?utm_campaign=123'
}
)
misc.linkTarget​
Allows you to change the HTML target value of all ShopWP products links. Useful if you want your products to open in a new tab.
| Parameter | Description |
|---|---|
| linkTarget - (string) | Represents the link's target value. Defaults to _self |
| type - (string) | Represents the link type, e.g.: Products or Collections |
| payload - (object) | Represents the product data |
Example
// Added utm params to product links
wp.hooks.addFilter('misc.linkTarget', 'shopwp', function (linkHref, linkTo) {
return '_blank'
})
misc.carouselSettings​
Allows you to customize the product carousel settings.
| Parameter | Description |
|---|---|
| settings - (object) | Represents the carousel settings. Corresponds to the Slick Slider settings |
Example
// Show 4 slides at once
wp.hooks.addFilter('misc.carouselSettings', 'shopwp', function (settings) {
settings.slidesToShow = 4
return settings
})
misc.trackingParams​
Allows for specifying which tracking parameters ShopWP should pass to the Shopify checkout page.
The default parameters to be tracked are:
utm_source
utm_medium
utm_campaign
utm_term
utm_content
utm_keyword
guid
fbclid
gclid
li_fat_id
| Parameter | Description |
|---|---|
| parameters - (array) | Represents the tracking parameters |
Example
wp.hooks.addFilter('misc.trackingParams', 'shopwp', function (trackingParams) {
trackingParams.push('my_custom_tracking_param_1')
trackingParams.push('my_custom_tracking_param_2')
return trackingParams
})
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​
Allows you to customize the available filtering product tag options for the Storefront component.
| Parameter | Description |
|---|---|
| tags | The available tag filtering options |
Example
wp.hooks.addFilter('storefront.availableTags', 'shopwp', function (tags) {
return tags.filter(tag => tag !== 'mytag')
})
storefront.availableVendors​
Allows you to customize the available filtering product vendor options for the Storefront component.
| Parameter | Description |
|---|---|
| vendors | The available vendor filtering options |
Example
wp.hooks.addFilter('storefront.availableVendors', 'shopwp', function (vendors) {
return vendors.filter(vendor => vendor !== 'mytag')
})
storefront.availableTypes​
Allows you to customize the available filtering product type options for the Storefront component.
| Parameter | Description |
|---|---|
| types | The available product type filtering options |
Example
wp.hooks.addFilter('storefront.availableTypes', 'shopwp', function (types) {
return types.filter(type => type !== 'mytag')
})
storefront.availablePricing​
Allows you to customize the available filtering price options for the Storefront component.
| Parameter | Description |
|---|---|
| prices | The available price filtering options |
Example
wp.hooks.addFilter('storefront.availablePricing', 'shopwp', function (prices) {
return prices.filter(price => price !== 'mytag')
})
storefront.collectionsToFetch​
Determines how many collections to fetch on page load for the Storefront filtering functionality. Default 8.
| Parameter | Description |
|---|---|
| numOfCollections | The number of collections to fetch on page load |
Example
// Load 20 collections to filter instead of 8
wp.hooks.addFilter(
'storefront.collectionsToFetch',
'shopwp',
function (numOfCollections) {
return 20
}
)
before.cartCheckoutButton​
Allows you add custom HTML before the cart checkout button. You must return HTML as a string.
| Parameter | Description |
|---|---|
| defaultValue | An empty string by default |
| cartState | Represents the cart state |
Example
wp.hooks.addFilter(
'before.cartCheckoutButton',
'shopwp',
function (defaultValue, cartState) {
return '<p>Test</p>'
}
)
after.cartCheckoutButton ​
Allows you add custom HTML after the cart checkout button. You must return HTML as a string.
| Parameter | Description |
|---|---|
| defaultValue | An empty string by default |
| cartState | Represents the cart state |
Example
wp.hooks.addFilter(
'after.cartCheckoutButton',
'shopwp',
function (defaultValue, cartState) {
return '<p>Test</p>'
}
)
before.lineItemTitle​
Allows you add custom HTML before each lineitem title inside the cart. You must return HTML as a string.
| Parameter | Description |
|---|---|
| defaultValue | An empty string by default |
| cartState | Represents the cart state |
Example
wp.hooks.addFilter(
'before.lineItemTitle',
'shopwp',
function (defaultValue, cartState) {
return '<p>Test</p>'
}
)
after.lineItemTitle​
Allows you add custom HTML after each lineitem title inside the cart. You must return HTML as a string.
| Parameter | Description |
|---|---|
| defaultValue | An empty string by default |
| cartState | Represents the cart state |
Example
wp.hooks.addFilter(
'after.lineItemTitle',
'shopwp',
function (defaultValue, cartState) {
return '<p>Test</p>'
}
)
before.cartTitle​
Allows you add custom HTML before the cart title. You must return HTML as a string.
| Parameter | Description |
|---|---|
| defaultValue | An empty string by default |
| cartState | Represents the cart state |
Example
wp.hooks.addFilter(
'before.cartTitle',
'shopwp',
function (defaultValue, cartState) {
return '<p>Test</p>'
}
)
after.cartTitle​
Allows you add custom HTML after the cart title. You must return HTML as a string.
| Parameter | Description |
|---|---|
| defaultValue | An empty string by default |
| cartState | Represents the cart state |
Example
wp.hooks.addFilter(
'after.cartTitle',
'shopwp',
function (defaultValue, cartState) {
return '<p>Test</p>'
}
)
before.cartLineItems​
Allows you add custom HTML before the cart line items. You must return HTML as a string.
| Parameter | Description |
|---|---|
| defaultValue | An empty string by default |
| cartData | Represents the cart data |
Example
wp.hooks.addFilter(
'before.cartLineItems',
'shopwp',
function (defaultValue, cartData) {
return '<p>Test</p>'
}
)
after.cartLineItems​
Allows you add custom HTML after the cart line items. You must return HTML as a string.
| Parameter | Description |
|---|---|
| defaultValue | An empty string by default |
| cartData | Represents the cart data |
Example
wp.hooks.addFilter(
'after.cartLineItems',
'shopwp',
function (defaultValue, cartData) {
return '<p>Test</p>'
}
)
before.productBuyButton​
Allows you add custom HTML before the product buy button. You must return HTML as a string.
| Parameter | Description |
|---|---|
| defaultValue | An empty string by default |
| productState | Represents the product state |
Example
// Show the total product inventory amount before the buy button
wp.hooks.addFilter(
'before.productBuyButton',
'shopwp',
function (defaultValue, productState) {
return '<p>Total left: ' + productState.payload.totalInventory + '</p>'
}
)
after.productBuyButton​
Allows you add custom HTML after the product buy button. You must return HTML as a string.
| Parameter | Description |
|---|---|
| defaultValue | An empty string by default |
| productState | Represents the product state |
Example
// Show the total product inventory amount after the buy button
wp.hooks.addFilter(
'after.productBuyButton',
'shopwp',
function (defaultValue, productState) {
return '<p>Total left: ' + productState.payload.totalInventory + '</p>'
}
)
// Show a notice if product contains a specific tag
wp.hooks.addFilter(
'after.productBuyButton',
'shopwp',
function (defaultValue, productState) {
if (productState.payload.tags.includes('_preorder')) {
return `<p style='color:#C92228;'>
<strong>PRE-ORDER ITEM!</strong> Order will be fulfilled when the stock arrives by expected ship date listed below. We recommend placing separate orders for pre-order and in-stock items</p>`
}
}
)
before.productThumbnail​
Allows you add custom HTML above each product thumbnail. You must return HTML as a string.
| Parameter | Description |
|---|---|
| defaultValue (string) | An empty string by default |
| productGalleryState (object) | Represents the product gallery state |
wp.hooks.addFilter(
'before.productThumbnail',
'shopwp',
function (defaultValue, productGalleryState) {
return '<p>Test</p>'
}
)
after.productThumbnail​
Allows you add custom HTML below each product thumbnail. You must return HTML as a string.
| Parameter | Description |
|---|---|
| defaultValue (string) | An empty string by default |
| productGalleryState (object) | Represents the product gallery state |
wp.hooks.addFilter(
'after.productThumbnail',
'shopwp',
function (defaultValue, productGalleryState) {
return '<p>Test</p>'
}
)
before.productPricing​
Allows you add custom HTML before the product price. You must return HTML as a string.
| Parameter | Description |
|---|---|
| defaultValue (string) | An empty string by default |
| productState (object) | Represents the product state |
// Adds the product vendor name before price
wp.hooks.addFilter(
'before.productPricing',
'shopwp',
function (defaultValue, productState) {
return '<p>Vendor: ' + productState.payload.vendor + '</p>'
}
)
after.productPricing​
Allows you add custom HTML after the product price. You must return HTML as a string.
| Parameter | Description |
|---|---|
| defaultValue (string) | An empty string by default |
| productState (object) | Represents the product state |
// Adds the product vendor name below price
wp.hooks.addFilter(
'after.productPricing',
'shopwp',
function (defaultValue, productState) {
return '<p>Vendor: ' + productState.payload.vendor + '</p>'
}
)
before.productTitle​
Allows you add custom HTML before the product title. You must return HTML as a string.
| Parameter | Description |
|---|---|
| defaultValue (string) | will be false |
| productState (object) | Represents the product state |
Example
// Add vendor above title
wp.hooks.addFilter(
'before.productTitle',
'shopwp',
function (defaultValue, productState) {
return (
'<p style="color: #828282;margin-bottom: 5px;">' +
productState.payload.vendor +
'</p>'
)
}
)
after.productTitle​
Allows you add custom HTML after the product title. You must return HTML as a string.
| Parameter | Description |
|---|---|
| defaultValue (string) | Will be an empty string |
| productState (object) | Represents the product state |
Example
// Adds the product vendor name after title
wp.hooks.addFilter(
'after.productTitle',
'shopwp',
function (defaultValue, productState) {
return '<p>Vendor: ' + productState.payload.vendor + '</p>'
}
)
before.productImages​
Allows you add custom HTML before the product images. You must return HTML as a string.
| Parameter | Description |
|---|---|
| defaultValue (string) | Will be an empty string |
| payload (object) | Represents the product payload |
Example
// Adds the product vendor before the images
wp.hooks.addFilter(
'before.productImages',
'shopwp',
function (defaultValue, payload) {
return '<p>Vendor: ' + payload.vendor + '</p>'
}
)
after.productImages​
Allows you add custom HTML after the product images. You must return HTML as a string.
| Parameter | Description |
|---|---|
| defaultValue (string) | Will be an empty string |
| payload (object) | Represents the product payload |
Example
// Adds the product vendor after the images
wp.hooks.addFilter(
'after.productImages',
'shopwp',
function (defaultValue, payload) {
return '<p>Vendor: ' + payload.vendor + '</p>'
}
)
before.storefrontFilters​
Allows you add custom HTML before the Storefront filters. You must return HTML as a string.
| Parameter | Description |
|---|---|
| defaultValue (string) | Will be an empty string |
| settings (object) | Represents the Storefront settings object |
Example
wp.hooks.addFilter(
'before.storefrontFilters',
'shopwp',
function (defaultValue, settings) {
return '<p>Before Storefront Filters</p>'
}
)
after.storefrontFilters​
Allows you add custom HTML after the Storefront filters. You must return HTML as a string.
| Parameter | Description |
|---|---|
| defaultValue (string) | Will be an empty string |
| settings (object) | Represents the Storefront settings object |
Example
wp.hooks.addFilter(
'after.storefrontFilters',
'shopwp',
function (defaultValue, settings) {
return '<p>Before Storefront Filters</p>'
}
)
block.productsAttributes​
Allows for customizing the attributes of the ShopWP Products block registration
| Parameter | Description |
|---|---|
| attributes (object) | The default block attributes |
Example
// Lock the ShopWP Products block so users can't remove it
wp.hooks.addFilter('block.productsAttributes', 'shopwp', function (attributes) {
attributes.lock = {
type: 'object',
default: {
move: false,
remove: true,
},
}
return attributes
})
block.productsSupports​
Allows for customizing the supports property of the ShopWP Products block registration
| Parameter | Description |
|---|---|
| defaultVal (bool) | The default supports value. false by default. |
Example
// Only allow one ShopWP products block to be added
wp.hooks.addFilter('block.productsSupports', 'shopwp', function (defaultVal) {
return {
multiple: false,
}
})
shop.textContent​
Allows for customizing any text content within ShopWP.
This will override any dynamic translations made via the Translator extension.
| Parameter | Description |
|---|---|
| textContent (object) | All text content in ShopWP, separated as key value pairs |
| shopState (object) | The global Shop state |
The textContent object contains sub objects with keys that represent the "type" of content. The available keys are:
| key | Description |
|---|---|
| e | Errors |
| w | Warnings |
| n | Notices |
| l | Labels |
| a | Admin only |
Example
wp.hooks.addFilter(
'shop.textContent',
'shopwp',
function (textContent, shopState) {
textContent.l.beginCheckout = 'Custom checkout button text'
textContent.l.cartTitle = 'Custom cart title'
return textContent
}
)