• I have tried every CSS Code I could find on the internet and nothing works. I am using Woocommerce shop and using the plug-in “Product Add-ons Plus for WooCommece”. You will see on my product page that I added 3 product add-ons with the following titles: “Stain Color”, “Paint Colors”, and “Add-on Styling Options”. I want these product add-on titles to match the font family, size and bold to what the Product Attribute Titles use such as: “Size/Length”, “Clearance Depts”, and “Wood Finish”. Can you help in letting me know what custom CSS I can use and where to place it? Thank you.

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • You will see on my product page that I added 3 product add-ons with the following titles: “Stain Color”, “Paint Colors”, and “Add-on Styling Options”.

    Sorry I cannot see these titles.
    Rather than trying css code you find on the internet, I suggest that you use your browser explorer to see the css being used, and add it to your new titles using the customizer.
    Get back to us with a link that shows the new titles.

    Thread Starter jladkins0824

    (@jladkins0824)

    Sorry, the link is correct. However, you have to select a Product Attribute Titles for “Size/Length”, “Clearance Depts”, and “Wood Finish and THEN the product add-ons will appear. Also, if you can provide very specific directions for me, as I am fairly new to WordPress and web development. Thank you!

    It would have been helpful if you included the extra instructions in your first post.
    Try this css:

    .woocommerce-variation-add-to-cart .za-variation-section .zaddon-type-container h3 {
        font-weight: 700;
        line-height: 2em;
        color: #3a3a3a;
        font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
    }

    This could be put in the style.css of your child theme, but is best and most easily placed in the customizer. Log into your WordPress dashboard, navigate to this page. In the top left it will have XUSTOMIZER. Click it and browse down to “Additional CSS”, add the above snippet of css there. Include a comment saying what it does and when you added it.

    Thread Starter jladkins0824

    (@jladkins0824)

    I added a font-size to the code and put it under “Additional CSS”. It worked perfectly! Thank you so much.

    Thread Starter jladkins0824

    (@jladkins0824)

    So, I am also trying to change the bold font paragraph under the “Cornice Size” product add-on. I want the font to be normal and not bold. I tried adding the below CCS code but it did not change anything. Am I missing something in my code>

    .woocommerce-variation-add-to-cart .za-variation-section .zaddon-type-container p class= {
    font-weight: normal
    }

    Moderator bcworkz

    (@bcworkz)

    Close to correct, good effort! Remove the class= portion for correct syntax. normal should be followed with a ; to indicate the end of the directive.

    Thread Starter jladkins0824

    (@jladkins0824)

    Perfect! Thank you so much!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Change font size of product add-on title in woocommerce’ is closed to new replies.