Urgent Help Needed: How to Show Add To Cart Before Variation is Selected

  • Resolved mikebyrne316

    (@mikebyrne316)


    3 years, 8 months ago

    I’m looking for a solution for my site so that when on a product page that is a variable product the add to cart button is visible before a variation is selected. Then if someone selects add to cart without variations selected the page will notify them that a variation must be selected first.

    I think I’m losing alot of sales/conversions as people can’t see add to cart and then give up without purchasing!

    As you can see in this pic there is no add to card visible

    https://ibb.co/BnxJf5C

    Then a user must select all variables for add to cart to display as in this pic

    https://ibb.co/S3XzdLt

    I wish to have add to cart visible but not clickable until variations are selected.

    Any help would be much appreciated.

    Many thanks in advance Michael

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support abwaita a11n

    (@abwaita)

    Hi @mikebyrne316,

    As mentioned in your other post, this behavior is being affected by your theme. In this case, you will want to get in touch with the plugin developer to assist you further.

    In the meantime, I could suggest a workaround to have your Add to Cart button shown.

    Since it requires that you have some variations set, you can go ahead and set up default variations for your product. You can do so by editing the variation product and then going to Product Data → Variations → Default Values as illustrated in this screenshot.

    I hope this helps.

    Thread Starter mikebyrne316

    (@mikebyrne316)

    Thanks for your reply @abwaita unfortunately I have 100s of products I would need to do this with and it would take such a long time! I’m hoping someone might have a snippet or code I could add to my theme or CSS to make this possible?

    Plugin Support abwaita a11n

    (@abwaita)

    Hi @mikebyrne316,

    Kindly try the following CSS code that makes the hidden add to cart section to be displayed.

    .woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-disabled {
    display: block !important;
}

    I hope this helps.

    Thread Starter mikebyrne316

    (@mikebyrne316)

    @abwaita this worked perfectly. Thank you so much you are a legend!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Urgent Help Needed: How to Show Add To Cart Before Variation is Selected’ is closed to new replies.