Display installment table with CSS class, code 70% ready

Replies: 0

Hey good afternoon,
I have a woocommerce store with Elemetor Pro, I’m trying to adapt a shopify code for woocommerce, In Brazil we use installments to credit card and I need to display an installment table with a drop down function for all products with gateway payment Mercado Pago.
The biggest challenge would be to insert product.price and product.id as additional CSS variables.
I have no interest in using the plugin because one more will weigh in on the performance.
The product.price variable of woocommerce will need the calc tag.
Here’s an example:
https://camisetaz.com.br/collections/especiais/products/chug-life?variant=15424306053177

The code:

  <style>
        .boxParcelas .row {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            margin-right: -15px;
            margin-left: -15px;
            width: 100% !important;
            font-size: 0.9em;
        }
    
        .boxParcelas img.cartoes {
            height: 22px;
            padding: 0 4px;
            margin: 3px 0;
        }
    
        .boxParcelas img {
            height: 12px;
        }
    
        @media screen and (max-width: 996px) {
            .boxParcelas .hideOnMobile {
                display: none;
            }
        }
    </style>
    <div class="boxParcelas" style="border: 1px solid #dadada; padding: 5px; background-color: #fff; margin-bottom: 15px;">
        <div id="clicktrigger" style="margin:0; cursor: pointer; border-bottom: 1px solid #dadada; padding: 5px 5px;">
            <div class="row" style="margin: 0">
    
                <div style="padding:0; width: 75%; text-align: left; text-decoration: none;">
                    <img data-img="visa" src="https://universidadedropshipping.com/bandeiras_parcelamento/visa.svg"
                        class="cartoes">
                    <img data-img="master" src="https://universidadedropshipping.com/bandeiras_parcelamento/master.svg"
                        class="cartoes">
                    <img data-img="american_express"
                        src="https://universidadedropshipping.com/bandeiras_parcelamento/amex.svg" class="cartoes">
                    <img data-img="cielo"
                        src="https://universidadedropshipping.com/bandeiras_parcelamento/celo.svg" class="cartoes">
                   <img data-img="hiper_card"
                        src="https://universidadedropshipping.com/bandeiras_parcelamento/hipercard.svg" class="cartoes">
                   <img data-img="aura"
                        src="https://universidadedropshipping.com/bandeiras_parcelamento/aura.png" class="cartoes">
                  <img data-img="discovery"
                        src="https://universidadedropshipping.com/bandeiras_parcelamento/discovery.png" class="cartoes">
                  
                  
    
                </div>
                <div style="padding:0; width: 25%; text-align: right; padding-top: 3px;">
    
                    <span class="hideOnMobile">Parcelas</span>
                    <span style="margin-left: 12px;">
                        <img src="https://universidadedropshipping.com/bandeiras_parcelamento/iconseta.png">
                    </span>
    
                </div>
            </div>
        </div>
        <div id="boxJuros" style="display: block; font-size: 0.8em; padding: 15px;">
    
                <span style="font-weight: bold;">1x</span> de {{ product.price | money }} sem juros <br>
                <span style="font-weight: bold;">2x</span> de {{ product.price | divided_by: 2 | times: 1.0451 | money }}<br>
                <span style="font-weight: bold;">3x</span> de {{ product.price | divided_by: 3 | times: 1.0604 | money }}<br>
                <span style="font-weight: bold;">4x</span> de {{ product.price | divided_by: 4 | times: 1.0759 | money }}<br>
                <span style="font-weight: bold;">5x</span> de {{ product.price | divided_by: 5 | times: 1.0915 | money }}<br>
                <span style="font-weight: bold;">6x</span> de {{ product.price | divided_by: 6 | times: 1.1072 | money }}<br>
                <span style="font-weight: bold;">7x</span> de {{ product.price | divided_by: 7 | times: 1.1189 | money }}<br>
                <span style="font-weight: bold;">8x</span> de {{ product.price | divided_by: 8 | times: 1.1345 | money }}<br>
                <span style="font-weight: bold;">9x</span> de {{ product.price | divided_by: 9 | times: 1.1499 | money }}<br>
                <span style="font-weight: bold;">10x</span> de {{ product.price | divided_by: 10 | times: 1.1659 | money }}<br>
                <span style="font-weight: bold;">11x</span> de {{ product.price | divided_by: 11 | times: 1.1819 | money }}<br>
                <span style="font-weight: bold;">12x</span> de {{ product.price | divided_by: 12 | times: 1.1979 | money }}<br>
        </div>
        <div style="margin: 0px; display: block;  border-top: 1px solid #dadada; padding: 5px;">
            <div class="row" style="margin: 0">
                <div style="padding:0; width: 75%; text-align: left; text-decoration: none;"> 
                    <img class="cartoes"
                        src="https://universidadedropshipping.com/bandeiras_parcelamento/boleto.svg">
                  <img class="cartoes"
                        src="https://universidadedropshipping.com/bandeiras_parcelamento/mp.png">
                  <img class="cartoes"
                        src="https://universidadedropshipping.com/bandeiras_parcelamento/getnet.png">
                </div>
                <div style="padding:0; width: 25%; text-align: right; padding-top: 3px;"> 
                    <span>{{ product.price | money }}</span> 
                </div>
            </div>
        </div>
        
    </div>