Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1338509

    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

    #1338625

    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

    #1338642

    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

    #1338816

    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

    #1338849

    Hi Ismael,

    1. Thanks!

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

    Best regards,
    Robert

    #1339042

    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

    #1339044

    Hi Mike,

    Yes, many thanks! 👍

    #1339057

    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

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