Variable Product: Replace dropdown select with per variant add-to-cart buttons

  • bügelfrei

    (@alexanderbailey)


    5 days, 6 hours ago

    I would like to display individual add-to-cart buttons for each variant of a product on the single-product template, replacing WC’s default dropdown selector.

    For example, a record label website would typically have album products available in three formats: LP, CD, and MP3 albums. Ideally, we would display an add to cart button for each format, with the text of the button populated by format + price, that is:
    [LP $20]
    [CD $13]
    [MP3 album $10]

    Bonus points if we have a mechanism which sets the order of the variant buttons on the page, i.e., LP, CD, MP3 (or descending price).

    Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Stef

    (@serafinnyc)

    5 days, 2 hours ago

    Hey there @alexanderbailey this app is really good. Use it on a lot of our sites. You need to set order on the backend of the PDP. This doesn’t do that. It only creates the buttons or you instead of a dropdown.

    Thread Starter bügelfrei

    (@alexanderbailey)

    5 days ago

    Thanks @serafinnyc, but Variation Swatches (and the other swatch plugins I’ve looked at) still produce a single add-to-cart button with a selector to make it the button functional. The customer has a two-step process:

    1. click the desired variant (and maybe only then see its price)
    2. click “add to cart”

    I’m looking for one add-to-cart button per variation, as in this screenshot from hand-coded shop that I’m replacing with a Woocommerce setup. All options are displayed with prices, eliminating step #1 above.

    • This reply was modified 5 days ago by bügelfrei.
    Plugin Support shahzeen(woo-hc)

    (@shahzeenfarooq)

    4 days, 14 hours ago

    Hi there!

    I understand you’re looking to display individual “Add to Cart” buttons for each product variation on the single product page, instead of using the default dropdown selector. This is a great idea for music stores or similar setups where formats are more intuitive when presented separately.

    At the moment, WooCommerce doesn’t include this functionality out of the box. By default, variable products use a dropdown selector to allow customers to choose variations before adding to the cart.

    What you’re aiming for would require custom development or a plugin that changes how variations are displayed and handled on the frontend.

    Currently, I’m not aware of any plugin that provides this exact functionality. In this case, customization would be the best approach to achieve it.
    I can recommend WooExperts and Codeable.io as options for getting professional help. Alternatively, you can also ask your development questions in the  WooCommerce Community Slack as custom code falls outside our usual scope of support

    Stef

    (@serafinnyc)

    4 days, 10 hours ago

    @alexanderbailey ya not exactly sure what’s wrong here. All that is doable with that app but adding the price to the variant itself would have to be hooked so it’s dynamic. That being said, we do not offer custom solutions per forum rules as @shahzeenfarooq stated above.

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.