Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 2, 2022 at 4:36 pm #1338509
    Brolle

    Hi,

    I’m trying to make my own “shop page” using WooCommerce just to solve some design issues but ran into a small problem. The text of the products is not the same on a new page with a product grid as in the standard WooCommerce shop page. Everything else looks exactly the same as I can see it.

    Is there a way to format the text in a product grid? I can’t find out how… Normally there are some settings under styling of a block but not in this one.

    Standard WooCommerce:
    Standard shop

    New page with product grid:
    product grid

    Thanks,
    Robert

    February 3, 2022 at 8:03 am #1338625
    Ismael

    Hey Brolle,

    Thank you for the inquiry.

    You can use this css code to adjust the style of the product title.

    .products .product h2, .products .product h3, .products .product h4, .products .product h5, .products .product h6, h2.woocommerce-loop-product__title {
    padding-top: 5px;
    font-size: 1em;
    line-height: 1.3em;
    font-weight: normal;
    margin: 0;
}

    You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css. If it doesn’t work, please post the site URL in the private field so that we can inspect the product elements directly.

    Best regards,
    Ismael

    February 3, 2022 at 9:46 am #1338642
    Brolle

    Hey Ismael,

    Thanks for this. I have two questions about this.

    1. Where is it best to insert the code?
    Enfold child->Theme option->General styling->Quick CSS or
    Appearance » Customize » Additional CSS or
    somewhere in the child theme?

    2. How do I change so it doesn’t show capital letters in the product grid? It shows the product text correct (lowercase) in the standard WooCommerce shop page.

    Many thanks!
    Best regards,
    Robert

    February 4, 2022 at 6:39 am #1338816
    Ismael

    Hi,

    1.) Any of those options should be fine, but we recommend the Quick CSS field or adding it in the child theme’s style.css file.

    2.) Try to set the text-transform property to none, or just replace the css with this one.

    .products .product h2, .products .product h3, .products .product h4, .products .product h5, .products .product h6, h2.woocommerce-loop-product__title {
    padding-top: 5px;
    font-size: 1em;
    line-height: 1.3em;
    font-weight: normal;
    margin: 0;
    text-transform: none !important;
}

    Best regards,
    Ismael

    February 4, 2022 at 10:33 am #1338849
    Brolle

    Hi Ismael,

    1. Thanks!

    2. That worked but what is the !important doing?

    Best regards,
    Robert

    February 5, 2022 at 4:07 pm #1339042
    Mike

    Hi,
    !important; helps override the previous rule, you can read more about it here.
    Since this is working for you shall we close this then?

    Best regards,
    Mike

    February 5, 2022 at 4:12 pm #1339044
    Brolle

    Hi Mike,

    Yes, many thanks! 👍

    February 5, 2022 at 5:24 pm #1339057
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Format text in a Product grid’ is closed to new replies.