Target text size WooCommerce Blocks

  • Resolved Garry Rigby

    (@indigojones66)


    3 years, 6 months ago

    RE: https://heritagecountrypottery.com/

    I have 3 WooCommerce Blocks ~

    1. handpicked-products
    2. category-products ~ (peter2-class)
    3. category-products ~ (peter3-class)

    How do I target the text size for each?

    Below is the css for them all… It does not seem to differentiate even though I gave each block a unique class in advanced settings?

    edit-post-visual-editor .editor-block-list__block .wc-block-grid__product-title, .editor-styles-wrapper .wc-block-grid__product-title, .wc-block-grid__product-title {

    Top line (six images ~ handpicked-products)
    Middle line (three images ~ category-products ~ [peter2-class])
    Bottom line (four images category-products ~ [peter3-class])

    This was the target for shop page text and it works…

    .woocommerce ul.products li.product .woocommerce-loop-category__title, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h3 {
    text-align: center;
    font-size: 1em;
    }

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter Garry Rigby

    (@indigojones66)

    This worked (Just requires fine-tuning depending on one’s taste)

    /* top menu text 6 images */

    .wc-block-handpicked-products .wc-block-grid__product-title {
    font-size: 2em;
    font-weight: 500;
    }

    /* front page 3 images */

    .peter2-class .wc-block-grid__product-title {
    font-size: 1.5em;
    font-weight: 500;
    }

    /* latest additions 4 images */

    .peter3-class .wc-block-grid__product-title {
    font-size: 1.4em;
    font-weight: 500;
    }

    Plugin Support Niall a11n

    (@wpniall)

    Hi @indigojones66,

    Thanks for reaching out to us!

    Glad to hear that and thanks for sharing your solution, which might help others trying to make a similar customization.

    I’ll go ahead and mark this post as resolved. If you have any further questions, please reply here. If you need additional help with WooCommerce Blocks, please start a new thread and we’ll be able to help you out there.

    Thank you!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Target text size WooCommerce Blocks’ is closed to new replies.