Custom CSS + Javescript Request

Hey, I have 2 concerns today:

Theme 1 – Custom CSS:
I have created Custom CSS for Radio Variation Swatches. This looks like this:

.form-item, form {
    margin-bottom: 0px!important;}
button.single_add_to_cart_button.button.alt {
    background-color: #F15E4C!important;
    Margin:0px!important;
    font-size:22px!important;
}

.woocommerce-variation-price:before{
    content: "Preis: "!important;
  }
.woocommerce-variation-price{
    font-weight: bold!important;
    text-align:center!important;
line-height:21px!important;
font-size:20px!important;
padding-bottom:5px!important;
}
table {font-size: 15px!important;}
td, th {
    padding: 0px 0px 5px 0px!important;
    padding-left:5px!important;
}
.elementor *, .elementor :after, .elementor :before {
    border-style: none;}
.woocommerce-de_price_taxrate {
    font-size: 12px!important;
}
.woovr-variations .woovr-variation {
    display: flex;
    align-items: center;
    cursor: pointer;
    background: #FFFFFF;
    border: 1px solid #E2E5EB;
    box-sizing: border-box;
    border-radius: 2px;
    margin: 0px 0px 10px 0px!important;
    padding: 5px 10px;
}
.woovr-variation.woovr-variation-activate {
    border: 2px solid green!important;
}
@media screen and (max-width:600px){.elementor *, .elementor :after, .elementor :before {
    margin-left: 0px!important;
}}
@media screen and (max-width:600px){.woovr-variations{
    padding-top: 5px;
    padding-bottom: 5px;
    display: flex;
    overflow-y: auto;
    flex-wrap: nowrap;
    text-align:center;
}}

@media screen and (max-width:600px){.woovr-variations .woovr-variation {
    align-items: center;
    cursor: pointer;
    min-width: 148px;
    min-height: 180px;
    padding: 12px 8px 8px 8px;
    float: left;
    display: flex;
    flex-direction: column;
    border: 1px solid #d7d7d7;
    margin: 15px;
    border-radius: 2px;
    box-sizing: border-box;
}}

@media screen and (max-width:600px){.woovr-variations .woovr-variation > div {
}}

@media screen and (max-width:600px){.woovr-variations .woovr-variation > div:last-child {
    padding-right: 0;
}}

@media screen and (max-width:600px){.woovr-variation-image {
    width: 48px;
    height: 48px;
}}

@media screen and (max-width:360px){.woovr-variation-image img {
    width: 100%;
    height: 100%;
    max-width: 40px;
    display: block; 
}}

@media screen and (max-width:600px){.woovr-variation-selector input {
    outline: none;
}}

@media screen and (max-width:600px){.woovr-variation-selector ul {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}}

@media screen and (max-width:600px){.woovr-variation-info, .woovr-variation-selector {
    flex-grow: 1;
    margin-top: 10px;
    position: relative;
}}

@media screen and (max-width:600px){.woovr-variation-name p {
    margin-bottom: 0;
    font-size: 12px;
}}

@media screen and (max-width:600px){.woovr-variation-radio .woovr-variation-selector {
    width: 30px;
    flex: 0 0 30px;
    visibility: hidden;
    display: none;
}}

@media screen and (max-width:600px){.woovr-variation-radio .woovr-variation-availability p {
    margin-bottom: 0;
}}

@media screen and (max-width:600px){.woovr-variation-radio .woovr-variation-name {
    font-weight: 700;
}}

@media screen and (max-width:600px){.woovr-variation-radio .woovr-variation-info .woovr-variation-price, .woovr-variation-radio .woovr-variation-info .woovr-variation-availability {
    display: inline-block;
    margin-right: 10px;
    font-size: 14px;
    bottom: 0.5em;
    position: absolute;
    width: 100%;
    left: 0;
}}

@media screen and (max-width:600px){.woovr-variation-radio .woovr-variation-info .woovr-variation-description {
    font-size: 14px;
}}

@media screen and (max-width:600px){.woovr-variation-selector .dd-select {
    background-color: #ffffff !important;
}}

@media screen and (max-width:600px){.woovr-variation-selector .dd-options {
    max-height: 360px;
}}

@media screen and (max-width:600px){.woovr-variation-selector .dd-option-image, .woovr-variation-selector .dd-selected-image {
    max-width: 42px;
    border-radius: 3px;
}}

@media screen and (max-width:600px){.woovr-variation-selector .dd-selected-text, .woovr-variation-selector .dd-option-text {
    font-size: 14px;
    font-weight: 600;
    line-height: inherit !important;
    color: #6d6d6d;
}}

@media screen and (max-width:600px){.woovr-variation-selector .dd-desc .woovr-variation-price, .woovr-variation-selector .dd-desc .woovr-variation-availability {
    display: inline-block;
    margin-right: 10px;
}}

@media screen and (max-width:600px){.woovr-variation-selector .dd-desc .woovr-variation-availability .stock {
    display: inline-block;
    margin: 0 !important;
}}

@media screen and (max-width:600px){.woovr-variation-selector .dd-desc .woovr-variation-description {
    display: block;
}}

Currently we are embedding it via Elementor. However, this sometimes causes problems. Is it possible to put the CSS directly in the plugin?

Theme 2 – Javascript/php:
We asked you a few months ago if it is possible to have a code that gives the variant a class when the variant is selected. This way the selected product could be displayed more visually. This worked great!
However, when I try to load JS delayed or inline via WP-Rocket, this exact feature doesn’t work.

At that time we were given the following code, which we included in functions.php:

function woovr_scripts() {
   ?>
    <script type="text/javascript">
      jQuery(document).on('ready', function() {
        var val = jQuery('.variations_form option:selected').val();
        var name = jQuery('.variations_form option:selected').closest('select').attr('name');

        if (jQuery('.variations_form .woovr-variations').length) {
          jQuery('.variations_form .woovr-variation').removeClass('woovr-variation-activate');
          jQuery('.woovr-variation[data-attrs=\'{"' + name + '":"' + val + '"}\']').
              addClass('woovr-variation-activate');
        }
      });

      jQuery(document).on('woovr_selected', function(e, selected, variations) {
        variations.find('.woovr-variation').removeClass('woovr-variation-activate');
        selected.addClass('woovr-variation-activate');
      });
    </script>
   <?php
}

I would be incredibly happy if we get the custom CSS code directly deposited in the plugin and get WP-Rocket accelerated with all the features for pagespeed.

Love and I look forward to your feedback,
Tom.

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