Change Product Title on Variation Select in WooCommerce
Quick Summary
- A jQuery snippet swaps the single product title text to match the variation option a customer selects, such as Hoop Cam Plus.
- The code is a handler body, so run it inside a change handler on the variation dropdown, with one if block per option.
- For global attributes the option value is the term slug, and the title changes only in the browser, not in cart or orders.
On a WooCommerce variable product you may want the product title to follow the option the customer picks, for example switching between Hoop Cam and Hoop Cam Plus. This jQuery code changes the title text based on the selected value.
The snippet is the body of an event handler, not a complete script. It uses $(this), so it has to run inside a change handler attached to the variation dropdown (the select element in the product’s variations form). Put it in your theme’s JavaScript file, and because WordPress loads jQuery in no-conflict mode, wrap your code in a jQuery ready handler that passes in $ (see why $ is not a function in WordPress).
if ($(this).val() == "Hoop Cam Plus") {
$(".single-product .product_title.entry-title").text("Hoop Cam Plus");
}
if ($(this).val() == "Hoop Cam") {
$(".single-product .product_title.entry-title").text("Hoop Cam");
}How it works
$(this).val()reads the value of the option the customer selected..single-product .product_title.entry-titletargets the product title on the single product page, which WooCommerce prints with the classesproduct_titleandentry-title..text()replaces the title with the given text.- There is one
ifblock per option. ReplaceHoop Cam PlusandHoop Camwith your own values and titles, and add a block for each extra option.
Things to check
- For a global attribute (Products > Attributes), the option value is the term slug, such as
hoop-cam-plus, not the label you see. For a custom product attribute it is the text itself. Look at the option values in your page source before you edit the comparisons. - The title only changes in the browser. The product name in the cart and in orders stays the same.
For product pages that react to variation choices like this, see my WooCommerce development services.
Related articles
- adding stock status to the variation dropdown: another change to the same select element
- listing every variation with its image and price: when a list suits better than a changing title
See also: How to Change the WooCommerce Subscriptions Product Price String.
