Changing span class css located in div

Question

I am trying to edit the font size for the div class=wcsatt-option-wrapper and span class=price subscription-price using the WordPress style.css.

I can successfully edit the div class, however, I have tried several variations of div and span combinations and using !important but nothing changes the font for the target span.

<div class="woocommerce-variation single_variation" style="">
    <div class="woocommerce-variation-description"></div>
    <div class="woocommerce-variation-price">
        <span class="price">
            <span class="woocommerce-Price-amount amount">
                <span class="woocommerce-Price-currencySymbol">$</span>
                "15.99"
            </span>
        </span>
        <div class="wcsatt-options-wrapper">
            <h3>Choose a subscription plan:</h3>
        <ul class="wcsatt-options-product">
            <li class="one-time-option">
                <label>
                    <input type="radio" name="convert_to_sub_1481" data-custom_data="[]" value="0" checked="checked">
                    <span class="one-time-option-details">none</span>               
                </label>
            </li>
            <li class="subscription-option">
                <label>
                    <input type="radio" name="convert_to_sub_1481" data-custom_data="{";ubscription_scheme":{"period":"month","interval":1,"length":0,"trial_period":"","trial_length";:"","pricing_mode":"inherit","discount":"7";,"sync_date":0,"context":"product","id":"1_month","key":"1_month","is_synced":false,"is_prorated":false},"overrides_price":true,"discount_from_regular":false}" value="1_month">
                    <span class="subscription-option-details">
                        <span class="price subscription-price">
                            <del>
                                <span class="woocommerce-Price-amount amount">
                                    <span class="woocommerce-Price-currencySymbol">$</span>
                                    "15.99"
                                </span>
                            </del> 
                            <ins>
                                <span class="woocommerce-Price-amount amount">
                                    <span class="woocommerce-Price-currencySymbol">$</span>
                                    "14.87"
                                </span>
                            </ins> 
                            <span class="subscription-details"> / month</span>
                        </span>
                    </span>
                </label>
            </li>
            <li class="subscription-option">
                <label>
                    <input type="radio" name="convert_to_sub_1481" data-custom_data="{"subscription_scheme":{"period":"month","interval":3,"length":0,"trial_period":"","trial_length":"","pricing_mode":"inherit","discount":"5","sync_date":0,"context":"product","id":"3_month","key":"3_month","is_synced":false,"is_prorated":false},"overrides_price":true,"discount_from_regular":false}" value="3_month">
                    <span class="subscription-option-details">
                        <span class="price subscription-price"> 
                            <del>
                                <span class="woocommerce-Price-amount amount">
                                    <span class="woocommerce-Price-currencySymbol">$</span>
                                    "15.99"
                                </span>
                            </del> 
                            <ins>
                                <span class="woocommerce-Price-amount amount">
                                    <span class="woocommerce-Price-currencySymbol">$</span>
                                    "15.19"
                                </span>
                            </ins> 
                            <span class="subscription-details"> every 3 months</span>
                        </span>
                    </span>             
                </label>
            </li>
        </ul>
        </div>
    </div>
    <div class="woocommerce-variation-availability"></div>

User view of text I am trying to edt Using chrome dev tools I was able to adjust the css to my liking by adjusting:

.product .summary.entry-summary .price, .product-category .
woo-content- container > a h3, .product-category .woocom-list-content 
> a 
h3, #customer_login h2 {
font: bold 20px / 24px "Roboto Slab", Helvetica, Arial, Verdana, 
sans-serif;
text-transform: none;
}

However, when i apply these changes to the WordPress style.css sheet the adjustments are not made. chrome dev tool adjustments

Please read [ask]. You need to fully explain your question and include any relevant code in the question. [mcve]. We can't debug images. — j08691, Oct 22 '18 at 16:46
@msg apologies I didn't realize the description would simply the link text. the highlighted text in the image link is what I am trying to make changes to. — Joshua Finly, Oct 22 '18 at 18:29
I get that, but only the *highlighted* one... **Why**? just because ? because is the currently selected plan? And please, post html code directly. — msg, Oct 22 '18 at 18:36
it doesn't allow me to submit comments with the code posted directly, probably user error. — Joshua Finly, Oct 22 '18 at 19:35
Edit your question direcly. You should see an `edit` link below it. — msg, Oct 22 '18 at 20:10

score 0 · Answer 1 · answered Oct 22 '18 at 16:50

0

Im guessing is a Wordrpress theme, given the woocomece class name.

Yo could override that class in the

'custom css'

option in the WP Theme or edit it directly in the files

'Apparence > Edit CSS'

Would be something like this

.wooComerce-Price-CurrencySymbol {
    font-size: 14px;
}

answered Oct 22 '18 at 16:50

Kako

43
1
10

it is a WordPress website & I am attempting to edit it via appearence>editor>style.css the issue is regardless of the class I set to edit the font-size it's overruled by "span.price.subscription-price" when I attempt to edit "span.price....." it still doesn't register. – Joshua Finly Oct 22 '18 at 17:43
Probably there's something else avoiding the edit. Another class on top. Probably worth to try checking the class name in developers mode in Chrome or Firefox (F12 key). Take in account that if you didn't create a Child theme (or a backup) you're editing the original CSS of your theme, and you could mess up something if your not careful. – Kako Oct 22 '18 at 17:48

Changing span class css located in div

1 Answers1