Show dynamic content with button

  • I need to show a button by default and replace/show different html when a user either clicks a button or preferably selects from a drop down list.

    My goal is to have varying prices for a shop item so show the base price then change it when a different selection is chosen.

    If you could show me the code or point me to a resource that would be very helpful. Thank you.

Viewing 3 replies - 1 through 3 (of 3 total)

  • What level of skill do you have with reading/writing PHP code? How about JavScript? Where do you plan to store and retrieve the pricing information/HTML from?

    The approach you take is going to depend on the tools you are most comfortable with.

    FWIT, you can find this exact scenario in the code for WooCommerce (when choosing a variant, the price displayed is updated based on the price of that variant) – but this also assumes a certain data model on the back end, and uses jQuery to update the displayed information based on the selection in real-time. But this may be overkill for your needs.

    Thread Starter YOELO

    (@yoebo)

    I wasn’t going to mention price/variation as I didn’t want people to focus on that. I just need a way to show a certain div when a button is clicked or drop down is selected.

    Moderator bcworkz

    (@bcworkz)

    If that certain div is not so sensitive you don’t mind it being in the page HTML on initial load, then do so with all possible variants. By default they would all have the CSS property display: none;

    Then have JavaScript or jQuery script execute on an element’s event such as onchange or onclick. The script will change the appropriate CSS property to display: block; or display: inline;. In the case of a dropdown, to account for the user making another selection, set all other possible variants to display: none; just in case one of them is already on display from a previous event.

    If there is only one dropdown on a page, JavaScript is simple enough, you don’t need jQuery unless you prefer to work with it. If there’s several on a page, as for a product grid perhaps, jQuery will greatly simplify the required code.

    If the information is sensitive, you initially load an empty container. Then the on event script, instead of changing CSS, makes an AJAX request to the server for the content, then places the response in that empty container. Additionally, you would need server side PHP to handle the request.

    I know you were hoping for code, but I’ve outlined the general approach. If you focus on just one step at a time, you should be able to find code examples of that step. Piece together the steps and you’ll have it. If you need to use AJAX, be sure to use code specifically for WordPress – it’s a bit different than the usual AJAX.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Show dynamic content with button’ is closed to new replies.