---
title: "Sales Bump Developer Reference: Hooks, Options and CSS Classes"
description: Hooks, AJAX endpoint, option names, script handles, CSS classes and code snippets for developers extending Sales Bump.
url: "https://wpfactory.com/docs/sales-bump-developer-reference/"
updated: "2026-10-05"
category: Developers
---

# Sales Bump Developer Reference: Hooks, Options and CSS Classes

This reference lists the hooks, AJAX endpoint, options, script handles and CSS classes in [WooCommerce Sales Bump: Upsell, Cross-sell & Related Products Popup](https://wpfactory.com/item/woocommerce-upsell-cross-sell-related-products-popup/), for developers extending the popup. Store owners manage the same options at **WPFactory > Upsell, Cross-sell & Related Products Popup Pro**. Internally the plugin uses the prefixes `wpfactory_wc_ucr_pro` and `WebdWoocommerceCrosellPopupPro`.

## Hooks provided by the plugin

| Hook | Type | Arguments | Fires |
| --- | --- | --- | --- |
| `wpfactory_wc_ucr_pro_settings_saved` | Action | `$current_section` (`''` for General, `style`) | After the settings are saved and any section reset has run |
| `woocommerce_get_settings_wpfactory_wc_ucr_pro_{section}` | Filter | `$settings` array | When a settings tab is built. The plugin adds its fields at priority `PHP_INT_MAX`. |
| `woocommerce_get_sections_wpfactory_wc_ucr_pro` | Filter | `$sections` array | When the tab list (General, Style, Instructions) is built |

## WordPress and WooCommerce hooks the plugin uses

| Hook | Callback purpose |
| --- | --- |
| `woocommerce_product_upsells_products_heading` | Applied to the shop page popup heading (default “You may also like…”) |
| `wp_ajax_addtocart-upsells`, `wp_ajax_nopriv_addtocart-upsells` | Returns the shop page popup HTML |
| `wp_enqueue_scripts` | Loads the frontend CSS, Font Awesome and popup scripts (default priority) |
| `wp_footer` | Prints the Style tab CSS |
| `woocommerce_after_shop_loop` (priority 9) | Calls the popup output; it prints nothing without a product ID in the request |
| `widget_text` | Runs `do_shortcode` on Text widget content site-wide |

## AJAX endpoint

The shop page script sends a `POST` to `admin-ajax.php` with `action=addtocart-upsells` and `id=<product ID>`. The response is HTML: a `div.up-sells` containing the View Your Cart and Checkout links, the heading and a `[products ids="..." limit="..." columns="..."]` shortcode render. The handler is registered only when **Show popup** is Yes and the request is allowed by **Show popup on mobile**. It returns nothing when the product has no products of the selected type. There is no nonce check.

## Options

| Option | Default | Values |
| --- | --- | --- |
| `WebdWoocommerceCrosellPopupProonMobile` | `Yes` | `Yes`, `No` |
| `WebdWoocommerceCrosellPopupProshowRelated` | `Yes` | `Yes`, `No` |
| `WebdWoocommerceCrosellPopupProonArchive` | `Yes` | `Yes`, `No` |
| `WebdWoocommerceCrosellPopupProshowOnArchive` | `Upsells` | `Upsells`, `Crosells`, `Related` |
| `WebdWoocommerceCrosellPopupPro_archive_limit` | `0` | Integer; 0 means all |
| `WebdWoocommerceCrosellPopupPro_archive_columns` | `4` | Integer, 1 or more |
| `WebdWoocommerceCrosellPopupPropopupWidth` | Empty | CSS width |
| `WebdWoocommerceCrosellPopupPropopupMarginTop` | Empty | CSS length |
| `WebdWoocommerceCrosellPopupProborderRadius` | Empty | CSS length |

Option values are case sensitive: `Yes` and `No` start with a capital letter, and the cross-sells value is spelled `Crosells`.

## Script and style handles

| Handle | Type | Loaded when |
| --- | --- | --- |
| `WebdWoocommerceCrosellPopupPro-frontend` | Style | Always, unless **Show popup on mobile** is No on a mobile device |
| `WebdWoocommerceCrosellPopupPro_fa` | Style (Font Awesome 4) | Same as above |
| `WebdWoocommerceCrosellPopupPro-archive-page` | Script | **Show popup** is Yes |
| `WebdWoocommerceCrosellPopupPro-single-show-related` | Script | **Show related if upsells are not set** is Yes |
| `WebdWoocommerceCrosellPopupPro-single-product-page` | Script | **Show related if upsells are not set** is No |

The scripts receive a localized object named `WebdWoocommerceCrosellPopupPro` with `ajax_url`, `siteUrl`, `plugin_url`, `plugin_wrapper`, `view_your_cart` and `checkout`. After a product page add to cart they trigger `wc_fragment_refresh` on `document.body`.

## Frontend markup and classes

| Selector | Role |
| --- | --- |
| `.woocommerce .up-sells` | Full-screen popup layer and backdrop (hidden until opened) |
| `.woocommerce .up-sells .wrapper` | White popup box (Style tab width and border radius apply here) |
| `.woocommerce .up-sells .links` | View Your Cart and Checkout links |
| `.woocommerce .up-sells .close` | Close button |
| `body.loadingPopup` | Added while the popup loads; fades the page |
| `#upsellProducts` | Container appended to `.products` for the shop page popup |
| `p.viewcart` | View Your Cart link added under the product page Add to cart button |

## Code snippets

### Change the popup heading

```
add_filter( 'woocommerce_product_upsells_products_heading', function () {
	return 'Complete your order';
} );
```

This WooCommerce filter also changes the upsells heading on product pages that use the default WooCommerce template.

### Turn off the shop page popup on one category

```
add_action( 'wp_enqueue_scripts', function () {
	if ( is_product_category( 'gift-cards' ) ) {
		wp_dequeue_script( 'WebdWoocommerceCrosellPopupPro-archive-page' );
	}
}, 20 );
```

### Run code after the settings are saved

```
add_action( 'wpfactory_wc_ucr_pro_settings_saved', function ( $section ) {
	if ( 'style' === $section ) {
		// For example, purge your page cache here.
	}
} );
```

Need a hand? Our team answers every ticket on the [Sales Bump support forum](https://wpfactory.com/support/item/woocommerce-upsell-cross-sell-related-products-popup/).

Related articles

- [Sales Bump Settings Reference](https://wpfactory.com/docs/sales-bump-settings-reference/)
- [Sales Bump Popup Not Showing: Troubleshooting](https://wpfactory.com/docs/sales-bump-popup-not-showing/)
- [How to Customize the Sales Bump Popup Design and Texts](https://wpfactory.com/docs/sales-bump-popup-design-texts/)
- [How to Control Where the Sales Bump Popup Appears](https://wpfactory.com/docs/sales-bump-popup-display-rules/)
- [How to Choose Which Products Appear in the Sales Bump Popup](https://wpfactory.com/docs/sales-bump-choose-popup-products/)