---
title: How to Customize the Make an Offer Button and Form
description: Place the Make an offer button, choose form fields and set popup colors and width; the offer form always opens in a popup.
url: "https://wpfactory.com/docs/display-customize-make-offer-form/"
updated: "2026-09-27"
category: Troubleshooting
tags:
  - Name Your Price
---

# How to Customize the Make an Offer Button and Form

In [Name Your Price: Make Your Own Offer for WooCommerce](https://wpfactory.com/item/price-offers-for-woocommerce/), the offer form always opens in a popup when a customer clicks **Make an offer**; it cannot be embedded inline. You choose where the button appears, which fields the form shows and its colors under **WPFactory > Price Offers** on the **Button**, **Form** and **Styling** tabs.

## What you can and cannot do

- **The form is a popup (modal).** There is no setting, shortcode or attribute that prints the full form directly on a page.
- **The only button shortcode is `[alg_wc_price_offers_button]`.** It prints the button for the product being viewed, so it works in single product templates (for example an Elementor or block theme product template). It takes no attributes: `product_id`, `show` or `render` are ignored, and shortcodes such as `[price_offering_form]` do not exist. See [Name Your Price: Shortcodes Guide](https://wpfactory.com/docs/shortcodes-guide-price-offer/).
- All button, form and styling options below are free.

## Step 1: Place the button

1. Go to **WPFactory > Price Offers** (also reachable at **WooCommerce > Settings > Price Offers**) and open the **Button** tab.
2. Set **Label** (default Make an offer), **HTML class** (default `button`, so it inherits your theme's button style) and optional inline **HTML style**.
3. Choose **Position on single product page** (default Inside single product summary) and its **Position priority** (default 31). Choose **Do not add** if you place the button with the shortcode instead.
4. Showing the button on shop and archive pages, or on custom hooks, uses the Pro **Advanced Positions Options**. See [How to Craft the Offer Button in Name Your Price](https://wpfactory.com/docs/custom-offer-button/).

## Step 2: Choose the form fields

On the **Form** tab, **Enabled fields** adds optional fields: Quantity, Customer name, Customer phone, Customer message, reCAPTCHA and the Send a copy to customer checkbox. Price input, Customer email and the Send button are always shown. By default Customer name, Customer message and the copy checkbox are on. Use **Required fields** to make any of them mandatory, and set the price step, minimal, maximal and default price. Details: [How to Customize Form Field Options in Name Your Price](https://wpfactory.com/docs/form-field-options/).

## Step 3: Edit the header, footer and notice

Also on the **Form** tab, under **Form and Notice Options**: **Form header** (supports `%product_title%`), **Form button** label (default Send) and HTML style, **Form footer**, **Required HTML**, and the **Customer notice** shown after sending (default "Your price offer has been sent."). See [Form and Notice Options in Name Your Price](https://wpfactory.com/docs/form-and-notice-options/).

## Step 4: Set the colors and width

On the **Styling** tab, **Form Styling Options** sets:

| Label | Option ID | Default |
| --- | --- | --- |
| Width | `alg_wc_price_offerings_styling[form_content_width]` | 80% |
| Header background color | `alg_wc_price_offerings_styling[form_header_back_color]` | #3d9cd2 |
| Header text color | `alg_wc_price_offerings_styling[form_header_text_color]` | #ffffff |
| Footer background color | `alg_wc_price_offerings_styling[form_footer_back_color]` | #3d9cd2 |
| Footer text color | `alg_wc_price_offerings_styling[form_footer_text_color]` | #ffffff |

More: [Form Styling Options in Name Your Price](https://wpfactory.com/docs/form-styling-options/).

## Step 5: Fine-tune with custom CSS

If your theme overrides the popup, add CSS in **Appearance > Customize > Additional CSS** (or your child theme). The popup uses these classes: `.alg-wc-price-offerings-modal` (overlay), `.alg-wc-price-offerings-modal-content`, `.alg-wc-price-offerings-modal-header`, `.alg-wc-price-offerings-modal-body` and `.alg-wc-price-offerings-modal-footer`. The button has the class `.alg-wc-price-offerings-button` inside `.alg-wc-price-offerings-button-wrapper`. Example:

```
.alg-wc-price-offerings-modal-content { max-width: 560px; border-radius: 6px; }
.alg-wc-price-offerings-button { margin-top: 10px; }
```

## Confirm the result

Clear your cache, open a product in a private window, click the button and check the popup on desktop and mobile. Send a test offer and check that it appears under **Offers** in wp-admin.

### Get more control

The button, form and styling options are free. [Name Your Price](https://wpfactory.com/item/price-offers-for-woocommerce/) Pro adds archive and custom-hook button positions, offers on selected products, categories and variations, and auto-accept and auto-reject. [See what Pro unlocks](https://wpfactory.com/item/price-offers-for-woocommerce/).

Need a hand? Our team answers every ticket on the [Name Your Price support forum](https://wpfactory.com/support/item/price-offers-for-woocommerce/).

Related articles

- [Restrict Make-Offer Button by User Role](https://wpfactory.com/docs/restrict-make-offer-by-role/)
- [Make-Offer Button Not Visible or Working](https://wpfactory.com/docs/make-offer-button-not-working/)
- [How to Add reCAPTCHA to the Offer Form](https://wpfactory.com/docs/woocommerce-offer-form-recaptcha/)
- [Name Your Price Overview: Let Customers Make a Price Offer](https://wpfactory.com/docs/intro-name-your-price/)
- [How to Let Customers Offer a Price for a Quantity](https://wpfactory.com/docs/support-quantity-make-offer/)

 

[![Name Your Price: Make a Price Offer for WooCommerce](https://wpfactory.com/wp-content/uploads/Price-Offers-for-WooCommerce.webp)](https://wpfactory.com/item/price-offers-for-woocommerce/)