Product with different variant options and prices

  • Hi All,

    A quick 'how would i...'

    I have a product, for example a t-shirt, and if when the product page loads the default price is £10, and size options are presented X-Small -> XXX-Large.

    If anyone selects, XX-Large or XXX-Large I want the price to increase, for example to £15. (These are purely examples and not my business model!)

    So in the Perch products (I have the Shop add on installed) I created my base product and added the size option variants, then went into the XXL and XXXL and have overridden the price, however, when the user selects the size the price shows 10 but in the basket shows 15. Is there a way I can dynamically update the product page so the customer knows before adding to basket?

    I can list the variants and their respective prices, but i cannot get the product SKU or price to update on selection change.

    Thank you,


  • I think i am using the general product price...

    i have this code on my product page php:

    1. <?php
    2. perch_shop_product($prodSlug, [
    3. 'variants' => 'true'
    4. ]);
    5. ?>

    And this is my product template html: (ignore the div markup, i have removed some of it to make it easier to read)

  • Hi Drew,

    Not sure if you have had a chance to read my response above, but does it look correct, should the price be updating on the front end to my users?



  • Hi Hus-hmd,

    Thank you for your reply.

    Ok I appreciate there is no JavaScript updating the page, but when the customer makes a selection is anything updated to let the browser know a price could potentially be different. I can build the functionality, but I cannot see how i can get all the prices out for each combination, or how to hinge the update on a customer selection?

  • The price is not tied to an option, but to variants (combinations).

    The following just outputs the product options:

    1. <perch:productopts>
    2. <perch:productvalues>
    3. <perch:showall>
    4. </perch:productvalues>
    5. </perch:productopts>

    If you enable variants, you can access them in the template too (which gives you the price):

    1. perch_shop_product('my-product', [
    2. 'variants' => true,
    3. ]);
    1. <perch:variants>
    2. <perch:showall>
    3. </perch:variants>

    Alternatively, you can access the variants with perch_shop_product_variants()

    So you have to match the user-selected options with a variant, then update the price accordingly.

  • Hi Hussein,

    I thought i was getting somewhere with this, but i have noticed that when the user selects a radio button nothing changes anywhere on the front end for me to hinge changes to.

    How does the checkout button know the selection?

    Not even the product id or slug changes,



  • but i have noticed that when the user selects a radio button nothing changes anywhere on the front end for me to hinge changes to.

    HTML radio buttons have a checked state so you can target the checked one with Javascript and even CSS.

    How does the checkout button know the selection?

    I'd say it is an "add to cart" button. Anyway, it is a HTML form. As long as you've set up your form correctly, submitting the form will post the selected data and Perch Shop should take care of adding the correct variant to the cart. If you have followed the example in the docs, that should be all you need for your form. Though if a variant has no stock, I think Perch Shop won't add it to the cart.

    Back to your original question about updating the price. You probably need to write some Javascript to:

    1. get the selected options from the form
    2. figure out a mechanism to match the selected options to a variant
    3. update the price on the page to that of the matching variant's
    4. [optional] if the variant is out of stock, let the user know (e.g. display a message and disable the submit button)
    5. detect when the user updates their selection and re-do 1-4