Change product title font size in listing and single

This topic has 12 replies, 3 voices, and was last updated 2 years ago ago by Tony Rodriguez

  • Avatar: marquand
    marquand
    Participant
    October 31, 2022 at 16:55

    Hi there,

    I can’t find a setting to change the size of the font of the Product title in the shop or category listing or single listing anywhere. It’s so small.

    11 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    October 31, 2022 at 17:08

    Hello,

    Could you provide URL of your Shop page? You can do this via the Private Content area here

    Regards

    Avatar: marquand
    marquand
    Participant
    October 31, 2022 at 20:00

    Hi,
    It’s not live yet. Still working on it. I can send a screenshot but can’t seem to attach anything.

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    November 1, 2022 at 05:56

    Hello, @marquand,

    Sorry for the inconvenience but you can share the screenshot via this site: https://postimages.org/

    Regards 8Themes Team.

    Avatar: marquand
    marquand
    Participant
    November 1, 2022 at 09:48

    Thanks. I’ve added it to the private content area.

    Please contact administrator
    for this information.
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    November 1, 2022 at 10:16

    Hello, @marquand,

    1. For the Shop/Category pages, please copy and paste the below-given CSS code to XStore >> Theme Settings >> Theme Custom CSS >> Global CSS and check back your site after clearing the browser cache.

    .woocommerce-shop .content-product .product-title a {
        font-size: 20px !important;
    }

    Note: You can change the font-size in the given code as per your requirements.

    2. For the Single Product page, If you are using the Custom Single Product Builder, then you have to go to XStore >> Theme Settings >> WooCommerce >> Single Product Builder >> Title and change the “Size proportion” from there as per your requirements: https://postimg.cc/fkYpKrfW

    OR

    You can try with the below-given CSS code as well for the single product page:

    .single-product .product_title {
        font-size: 40px !important;
    }

    Regards 8Themes Team.

    Avatar: marquand
    marquand
    Participant
    November 8, 2022 at 14:27

    Hi there,

    I’ve added both the above css in the theme css, but to no avail. Can you have a look please? I have inserted the website in the private content area.
    Thanks

    Please contact administrator
    for this information.
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    November 9, 2022 at 05:27

    Hello, @marquand,

    First of all, I want you to know that the code works. you have a cache issue, here is a proof image: https://postimg.cc/5jC1vqX7

    2. Now, if You want to increase the menu font for this navigate to the Dashboard >> XSTORE >> Theme Settings >> Header Builder >> Main Menu >> and set the “Content Zoom” as per your need. see the image: https://postimg.cc/21mBg5pY

    3. Simply go to the Dashboard >> XStore >> Theme Settings >> Theme Custom CSS >> Global and paste the below code at the bottom of the CSS box there.

    .etheme-product-grid-title{font-size:20px !important;}

    Then save settings and check back to your site after clearing the browser cache.

    Note: in the above code the word “20” is the size you can change it with you want.

    Regards 8Themes Team.

    Avatar: marquand
    marquand
    Participant
    November 9, 2022 at 14:19

    Thank you for that. Just wondering how I can take off the Additional Information tab on the product page?

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    November 10, 2022 at 05:55

    Hello, @marquand,

    Please check this detailed guide: https://woocommerce.com/document/editing-product-data-tabs/ on how to add/remove a custom tab instead. As stated:

    Please note that the “Additional Information” tab will only show if the product has weight, dimensions, or attributes (not used for variation for variable products).

    Hope this helps.

    Regards 8Themes Team.

    Avatar: marquand
    marquand
    Participant
    November 12, 2022 at 14:27

    Would it be easier to hide it using css? The products have attributes so it shows up.

    Please contact administrator
    for this information.
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    November 13, 2022 at 07:22

    Hello, @marquand,

    Please simply Install the Child Theme: https://www.8theme.com/documentation/docs/child-theme/ and then copy and paste the below-given code to the Child Theme functions.php file on the new line and it will solve your issue.

    /**
     * Remove product data tabs
     */
    add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );
    function woo_remove_product_tabs( $tabs ) {
        unset( $tabs['additional_information'] );  	// Remove the additional information tab
        return $tabs;
    }

    Regards 8Themes Team.

  • Viewing 12 results - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.Log in/Sign up

8theme customization service
We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.