Please submit a private ticket if you need to share sensitive information, such as license details and admin credentials.

Okay
  Public Ticket #2308660
How to style the selected .woover-variation element?
Closed

Comments

  • Brice Terzaghi started the conversation
    February 23, 2020 at 3:50pm

    Hello,

    I'm looking for a way to style the currently selected .woovr-variation element (at page load and after clicking on a variation). I'm wondering if there's a class like "active" or "selected" that's added to it, though it seems that the only element that's changed when selecting variations is the radio button itself through it's checked attribute.

    If there's no class I can use to target the selected .woovr-variation, is there any chance one can be added in a future update?

    Regards.

  •  767
    Janilyn replied
    February 23, 2020 at 3:53pm

    Hi Brice, 

    Thank you for contacting WPClever Support Forum. We’ve received your ticket and assigned one of our developers to help you with that. He’ll be looking into your issue and responding as soon as finding a solution. Please stay in touch as he might need you to provide further information.

    Best regards.

    Janilyn T. - WPClever Support Agent

  •  1,240
    Dustin replied
    February 23, 2020 at 11:13pm

    Hi Brice,

    You can do that by adding below code to current theme (or child-theme) / functions.php

    add_action( 'wp_footer', 'woovr_footer', 99 );
function woovr_footer() {
    ?>
    <script>
      jQuery(document).on('woovr_selected', function(e, selected) {
        jQuery('.woovr-variation').removeClass('woovr-variation-activate');
        selected.closest('.woovr-variation').addClass('woovr-variation-activate');
      });
    </script>
    <?php
}

    Best regards,
    Dustin

  • Brice Terzaghi replied
    February 24, 2020 at 8:05am

    Thanks. It works but only partially: the selected variation gets the class after clicking on it but it's not the case for the default selected variation on page load (before clicking on anything) when one is set in the product settings.

    (Also, the snippet didn't work at all until I added type="text/javascript" in the script tag, not sure if it depends of the browser used.)

  •  1,240
    Dustin replied
    February 25, 2020 at 9:02am

    Yes! Please add type="text/javascript", I forgot itsmile.png

    You can update our plugin to new version 1.1.5.1 here https://www.dropbox.com/s/huetbn48pecvq1d/wpc-variations-radio-buttons-1151.zip?dl=1

    I already add the class "woovr-variation-activate" for default selected variation.

    If you already bought the premium version, please provide the payment information, e.g Paypal Email, Paypal Transaction ID then I'll send you premium file.

    Best regards,
    Dustin

  • Brice Terzaghi replied
    February 25, 2020 at 9:23am

    Seems to work great, thanks!

    Just to be sure, I still need the jQuery snippet in my functions.php with 1.1.5.1, right?

  •  1,240
    Dustin replied
    February 26, 2020 at 12:01am

    Yes! You still need to use previous JS code. The new version 1.1.5.1 only changes the class of default selected variationsmile.png

    If you are satisfied with our plugin and support, please reward it a full five-star ★★★★★ rating. https://wordpress.org/support/plugin/wpc-variations-radio-buttons/reviews/?filter=5
    Thank you in advance! <3

    Best regards,
    Dustin

  • Brice Terzaghi replied
    February 26, 2020 at 6:52am

    Thanks for the confirmation. I guess the ticket can be closed, problem fully solved. :)

  •  1,240
    Dustin replied
    February 26, 2020 at 2:21pm

    You're welcome!smile.png

    Feel free to submit a new ticket if you have any questions when using our plugin. I'll close this ticket now.

    Best regards,
    Dustin