Viewing 29 posts - 1 through 29 (of 29 total)
  • Author
    Posts
  • January 4, 2017 at 7:03 am #729306
    YongyanLi

    Hi,
    I want to make changes of belows for single product page

    1. change font-size of the product name
    2. change the position of “catagories” and ” Tags”
    3. change the font-size of tab, rename the name of tab, and add a custom tab( description of a single production)

    details please see this
    details

    January 4, 2017 at 7:04 am #729307
    YongyanLi

    https://drive.google.com/file/d/0B6L9QZ3Td5YjVUs1Z2RxNU1HQ1k/view?usp=sharing

    January 4, 2017 at 11:06 pm #729656
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    .single h1.product_title {
    font-size: 20px;
    font-weight: bold;
}
#tab-description > h2 {
    display: none;
}
#top div div.product .woocommerce-tabs .panel {
    font-size: 14px;
}
#top div div.product .woocommerce-tabs ul.tabs li a {
    font-size: 16px;
}

    To modify WooCommerce tabs, please see – https://docs.woocommerce.com/document/editing-product-data-tabs/

    Best regards,
    Yigit

    January 5, 2017 at 4:13 am #729706
    YongyanLi

    Hi,Yigit
    Thanks very much as always.

    Part 1:
    .single h1.product_title {
    font-size: 20px;
    font-weight: bold;
    }

    it works perfectly

    Part 2:

    #tab-description > h2 {
    display: none;
    }
    not working, the repeated title still exists

    Part 3:
    #top div div.product .woocommerce-tabs .panel {
    font-size: 14px;
    }

    working great!

    #top div div.product .woocommerce-tabs ul.tabs li a {
    font-size: 16px;
    }
    it don’t need this, but still thanks.

    and thanks for the rest information also, I will procced as per the guidlines

    BTW, the request of change the position of Categories and Tag
    is this possible?

    January 5, 2017 at 12:20 pm #729826
    Yigit

    Hi,

    Regarding part 2, Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    .sku_wrapper {
    display: none;
}

    And can you please post the link to your product page so we can provide you an accurate custom CSS code?

    Best regards,
    Yigit

    January 6, 2017 at 3:14 am #730129
    YongyanLi

    Hi, as below

    January 6, 2017 at 1:36 pm #730333
    Yigit

    Hi,

    I automatically login when i try to go to your login screen. But i am not able to see WP dashboard. Can you please check once again? :)

    Best regards,
    Yigit

    January 6, 2017 at 3:36 pm #730384
    YongyanLi

    please use below

    I will be online within 2 hours

    you can login within this time?

    January 7, 2017 at 7:15 am #730611
    Rikard

    Hi,

    I can’t log in either, I get this message:

    An email has been sent to (Email address hidden if logged out) . We are waiting for your approval.

    Best regards,
    Rikard

    January 7, 2017 at 7:18 am #730614
    YongyanLi

    ok now?

    Maybe I should cancel this verification.

    as last month, there was too many attacks..

    January 7, 2017 at 8:36 am #730656
    Rikard

    Hi,

    I’m not sure to be honest, but currently it looks like we can’t log in unfortunately.

    Best regards,
    Rikard

    January 12, 2017 at 4:43 am #732431
    YongyanLi

    Thanks, i will come back to you later for these issues

    January 13, 2017 at 5:04 am #732968
    Rikard

    Hi,

    Ok, thanks for the feedback. We’ll keep the thread open for you.

    Best regards,
    Rikard

    January 13, 2017 at 5:20 am #732973
    YongyanLi

    Hi, see below

    thanks very much for your help in advance

    January 15, 2017 at 8:20 am #733701
    YongyanLi

    Hi,

    Issue of Part 2 was solved! Thanks!

    Another questions are

    1: how to activate the ” Read More” Tag in the woo commerce tab panel content?( in the single product page)
    When I insert the “Read More” Tag in it, all the content shows normal (not being hidden and without the Read more click)

    2: I want to display 2 columns of product images per row in the shop page in mobile view,
    right now it displays only 1 and looks quite large, I think.
    in the woo coomerce setting, it is already 4 columns and with 16 counts. but the mobile keeps all the same.

    I searched the forums, there is some available code
    @media only screen and (max-width: 736px) {
    .avia_textblock pre, .responsive #top #main .products .product {
    width: 45.6% !important;
    margin: 0 4% 1% 0;
    }}

    but IT DIDN’T GIVE CLEAR SOLUTION, something like need to give a PAGE ID to those code??

    January 15, 2017 at 11:01 am #733708
    Basilis

    Hi!

    Regarding 1, you can not hide the description and the excerpt, inside the post. If you want to do that, it is different based area. You can try use an according shortcode there, to see how it will interact.

    Regarding 2, you do not need to give any page ID code at all, as you need to target any pages where that is visible.
    Can you explain what you mean, that is was not a clear solution?
    It worked or not?

    Cheers!
    Basilis

    January 16, 2017 at 5:49 am #733882
    YongyanLi

    Regarding 2

    https://drive.google.com/file/d/0B6L9QZ3Td5YjUnZXdkduTFBpcXM/view?usp=sharing

    please check this the screenshot of mobile view ( refering to shop page)
    it displays 1 item only per column, I want it to display 2 items per column.

    January 17, 2017 at 4:36 am #734463
    YongyanLi

    Hi, Regarding 1

    I tried your way, but the accordon toggle is not working correctly
    and it alwmost make my website crush down.

    January 17, 2017 at 4:36 am #734464
    YongyanLi

    Probably I should tried to add a new custom tab, but I don’t know how to make it editable

    January 17, 2017 at 4:17 pm #734776
    Yigit

    Hi,

    1- Please refer to this post – https://docs.woocommerce.com/document/editing-product-data-tabs/ to add a new tab
    2- Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (max-width: 480px) {
div .products .product {
    width: 50%!important;
}}

    Best regards,
    Yigit

    January 17, 2017 at 4:45 pm #734801
    YongyanLi

    HI, Yigit

    I put your code
    @media only screen and (max-width: 480px) {
    div .products .product {
    width: 50%!important;
    }}

    in the quick CS.. it works perfectly. Thanks!

    Can it display the font size of name(right under the image) smaller at the same time???

    January 17, 2017 at 4:50 pm #734806
    YongyanLi

    By the way, the style.css file refering the custom.css, right?

    January 17, 2017 at 5:05 pm #734820
    Yigit

    Hi!

    You can add the code to custom.css file inside enfold/css folder as well but when you update the theme, that file will be overwritten. Therefore, it is better if you place it in Quick CSS field in Enfold theme options under General Styling tab.

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 480px) {
.products .product h3, .products .product h4, .products .product h5, .products .product h6 {
    font-size: 12px;
}}

    Cheers!
    Yigit

    January 18, 2017 at 4:03 am #735086
    YongyanLi

    Good Job! Yigit.

    Thanks very much for the explanation. It helps a lot!
    and the code works perfectly in mobile view.

    just the prices also looks quite big

    If I want to make its following font size of prices to be the same, so it would be
    @media only screen and (max-width: 480px) {
    .tr.pricing-row td,
    font-size: 12px;
    }}

    is this correct? or maybe not” .tr.pricing-row td”

    January 20, 2017 at 1:21 pm #736419
    Andy

    Hi,

    Would you mind providing a precise link to your site, showing the elements in question? We need to be able to inspect them in order to help :)

    Best regards,
    Andy

    January 20, 2017 at 1:31 pm #736426
    YongyanLi

    Hi,

    I am talking about this shop overview page in mobile view
    you see, the rest fonts are small, but only the prices looks bigger

    https://drive.google.com/file/d/0B6L9QZ3Td5YjcmpmbHBWVDF1UGM/view?usp=sharing

    so I want it to be the same size as the name(Title)

    January 20, 2017 at 1:37 pm #736437
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 480px) {
span.price * {
    font-size: 13px!important;
}}

    Regards,
    Yigit

    January 21, 2017 at 3:52 am #736692
    YongyanLi

    Thanks a lot, Yigit

    you are always very helping!

    problem solved!

    January 24, 2017 at 1:59 pm #737739
    Yigit

    Hi,

    You are welcome!

    For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
    For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)

    Cheers!
    Yigit

  • Author
    Posts
Viewing 29 posts - 1 through 29 (of 29 total)
  • The topic ‘Font size of single product page’ is closed to new replies.