Home Forums Weaver Xtreme Theme Add space between bar under title & change price color (if possible?)

Viewing 15 posts - 33 through 47 (of 47 total)
  • Author
    Posts
  • #73654
    Patti
    Participant

    Thanks @user @scrambler & @weaver for the suggestions on how to open the products in new tabs! The more I researched it, I found out that the best practice, is to have them stay as they are.

    Not sure if I edited something wrong or if my site had a hiccup but my “Descriptions” tab is showing up again & the “Descriptions” title has disappeared. Please help me hide the “Descriptions” tab again & bring back the “Descriptions” title on the individual product pages.

    #73655
    scrambler
    Moderator

    I think you are confused.

    You had asked me for a rule to hide the description above the text so itwould not duplicate thedescription in the tab

    the rule I gave you for that was

    #tab-description > h2 {display: none;}

    I believe that is the way to do it, or else you have an empty TAB that will look weird. Also the fact woocommerce creates a TAB makes me think there will be cases where there will be several TABS with different titles, and each TAB title is a link that opens that page.

    If you remove the Description in the TAB, there will be no link and so when you have several tabs, so you will not be able to switch to the description one

    #73658
    Patti
    Participant

    Before last night the tab was gone & there was a title that said “Descriptions.” Now the tab is back with the “Descriptions” written on the tab. I prefer the first one & not the one with the tab. I checked my “Custom CSS” & the rule you already gave me is still there. But it is not working anymore. Any clue why?

    #73659
    Patti
    Participant

    On the individual product pages I would like the “Descriptions” title to be the same as the “Related Products” title. That is how it was prior to last night. Any suggestions would be greatly appreciated!

    #73660
    scrambler
    Moderator

    You are not listening.

    The rule I gave you

    #tab-description > h2 {display: none;}

    NEVER removed the TAB description text, but the one above the text you say you now want.

    Remove that rule and it will be back.

    Now if you want to remove the text in the TAB, you can use the other rule below, But that will break the TAB and make it impossible to change tabs when there is more than one…..

    li#tab-title-description a {display: none;}

    #73666
    Patti
    Participant

    I deleted the first CSS & added the second one. Thanks! It looks much better to me! There is a tiny gray line where the tab used to be. Any way to delete it? I would also like to change the color of the line above the “Description” title. Please let me know the CSS to change it to a #C2D869 color?

    #73667
    scrambler
    Moderator

    A – The tab are a functional feature created by woocommerce so that when there are several group of informations available for a product, they will show up asa series of TABs with the title of what each tab contains. The tab tile is a link that will open the tab and revealed the content.

    If you do not want to show any other informations than the description and dont want tabs, you should check with Woocommerce if there is a way to do that.

    Right now if other tabs show up for other group of product information, when people open the tab of another group, they will no longer be able to go back to description. So your site is effectively broken.

    B – You can change the color of the line with the rule below

    .woocommerce div.product .woocommerce-tabs ul.tabs::before {border-bottom: 1px solid #C2D869;}

    To change the thickness you can change the 1px value in that rule with a bigger number

    If the rule does not appear to work and you checked the syntax carefully, try adding !important

    .woocommerce div.product .woocommerce-tabs ul.tabs::before {border-bottom: 1px solid #C2D869 !important;}

     

    #73668
    Patti
    Participant

    Thanks! I changed the color to #AE1029 so it would show up better & it looks much better! The tiny gray line (on the left-hand side above the red line) is still showing up, though.

    I understand the risks involved with the tabs. Hopefully I won’t mess up when adding my products & the tabs won’t show up again.

    #73669
    scrambler
    Moderator

    you can add these to remove the tab lines

    li#tab-title-description::before, li#tab-title-description::after {display: none;}

    li#tab-title-description {border:none !important;}

    You have been warned 🙂

    #73671
    Patti
    Participant

    Yep! I started with the first CSS & the tabs came back. Deleted it & added the second one. Tabs still there. Even though I deleted both the tab wording (“Descriptions”) is still there but the outline of the tab isn’t there. Ugh! Should have just left well enough alone. Any way to get rid of the wording where the tab was now?

    #73672
    scrambler
    Moderator

    The THREE rules you need are:

    li#tab-title-description a {display: none;}

    li#tab-title-description::before, li#tab-title-description::after {display: none;}

    li#tab-title-description {border:none !important;}

    All three must be in, If these are in and not working, paste the content of the CSS box here so I can check where the syntax was corrupted

    #73675
    Patti
    Participant

    I must have missed adding one of them before. I deleted the two that I already had in there & added all three. Now the individual pages look great!

    A few more tweaks & I’ll be satisfied. I looked at the WooCommerce Customization CSS info that you sent to me but don’t find the CSS for what I want.

    I would like for the individual product titles to be centered (https://dashpatterns.com/product/playtime-hopscotch-quilt-pattern/) & for the “Add to Cart” (with the number drop-down menu) to be centered underneath. Once those are done I will stop taking up all of your time with things that used to come easy to me.

    #73676
    Patti
    Participant

    I should have said that I want everything centered from the title to the PayPal image/link. That includes the title, price, stock number, “Add to Cart” button & the number drop-down menu.

    #73678
    scrambler
    Moderator

    The two rules below should center the content right of the image

    .woocommerce-page div.product div.summary {text-align:center;}
    .woocommerce div.product form.cart {display:inline-block;}

     

    #73686
    Patti
    Participant

    Perfect! You’ve been wonderful to help me out @scrambler!

Viewing 15 posts - 33 through 47 (of 47 total)
  • You must be logged in to reply to this topic.