Display Selected Color/Size on Single Product Page

  • 0
    down vote
    favorite
    I am building my first WooCommerce-based store with only variable products. The current attributes are color and size (for all products). I would like to display the selected option for just the color attribute in a different place, like in this screenshot:

    screenshot

    Please disregard the swatches. I have already installed a plugin for that (a paid one, actually) so I’m not asking how to implement the color swatches.

    As you can see, when a color is selected, the name (i.e. “Pink,” “Red” etc) displays on the same line as the label. How can I do this? I’m specifically asking for the php code to display the selected color option/attribute as I’ll (hopefully) figure out where to place it.

    For those who might be wandering, no, the plugin doesn’t offer an option for that.

    Thank you!

Viewing 1 replies (of 1 total)

  • The user will select a colour at some moment in time after the page has been created at the server and sent across the internet. Then its too late to alter the page using PHP. PHP runs on the webserver but it won’t run in a browser. The way to do this is to write a JavaScript which fires when the selection dropdown changes. The JavaScript will insert the extra text (the colour) in the appropriate place in the page markup.

    JavaScript has a learning curve and this is not a good first project. Its non-trivial and its unlikely that you’ll get the code via a forum answer. You’ll need someone who knows JavaScript or you may need to post a job:
    https://jobs.wordpress.net/

Viewing 1 replies (of 1 total)
  • The topic ‘Display Selected Color/Size on Single Product Page’ is closed to new replies.