[Resolved] Center whole single product page and tab design WooCommerce

Home Forums Support [Resolved] Center whole single product page and tab design WooCommerce

Home Forums Support Center whole single product page and tab design WooCommerce

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1677451
    Dominique

    Hi,

    To add right and left margin to single product pages I added the following code:

    
    /* WooCommerce product page width */
    body.single-product .grid-container {
    	max-width: 1350px;
    	margin-left: 9%;
    	margin-right: 9%;
    }
    
    @media (max-width: 1024px) {
    body.single-product .grid-container {
    	margin-left: 2%;
    	margin-right: 2%;
    	}
    }

    Works fine. I need to center the whole page in larger screen sizes as per included screen shot in private information.

    When I activated WooCommerce in GeneratePress premium it changed the tab design that doesn’t look like a tab anymore without the bottom border line as per second included screen shot. How do I get it back to the original design?

    Please advise

    #1677719
    Ying
    Staff
    Customer Support

    Hi Dominique,

    Any chance you can link us to the site in question?

    You can use the private information field.

    Let me know πŸ™‚

    #1677726
    Dominique

    Hi,

    The domain name is in the links for the screen shots πŸ˜‰

    #1677732
    Dominique

    The product page link in the browser address of one of the screen shots πŸ™‚

    #1677788
    Ying
    Staff
    Customer Support

    To center the content, change this:

    body.single-product .grid-container {
    	max-width: 1350px;
    	margin-left: 9%;
    	margin-right: 9%;
    }
    
    @media (max-width: 1024px) {
    body.single-product .grid-container {
    	margin-left: 2%;
    	margin-right: 2%;
    	}
    }

    to:

    body.single-product .grid-container {
    	max-width: 1350px;
    	padding-left: 9%;
    	padding-right: 9%;
    }
    
    @media (max-width: 1024px) {
    body.single-product .grid-container {
    	padding-left: 2%;
    	padding-right: 2%;
    	}
    }

    I’m not sure I understand your 2nd question here well, the default woocommerce tab now has no bottom border. If you want to remove the bottom border from the active tab, try this:

    .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li.active {
        border-bottom: 0;
    }
    #1677866
    Dominique

    Hi,

    Thanks for the code.

    If you look at screen shot: Screen Shot 2021-03-01 at 09.35.13.png that is how the tab is rendered with the separating line or bottom border. It looks like a tab from a folder. That screen shot is with GeneratePress premium WooCommerce DEACTIVATED.

    If you look at screen shot: Screen Shot 2021-03-01 at 09.39.33.png that is how the tab is rendered without the separating line or bottom border. It just looks like a square and not a tab anymore. That screen shot is with GeneratePress premium WooCommerce ACTIVATED.

    I would like it too look exactly as the first screen shot and don’t understand how come when I activated the WooCommerce module in GeneratePress premium that it changed that layout.

    Please advise

    #1677874
    Ying
    Staff
    Customer Support

    I see, then could you deactivated your cache plugin and clear cache so I can see where the CSS coming from?

    #1677876
    Dominique

    Hi,

    Having “Description” in the tab and “Description” in script text directly below is redundant. How do I remove “Description” in script style completely.

    Also when there are going to be reviews the “Reviews” tab I imagine will appear. Same thing it will be doubled up in script text.

    Can you please supply the code to remove both script style doubled up titles.

    Thank you.

    #1677877
    Dominique

    Sure

    #1677878
    Dominique

    just end any url by /?nowprocket

    #1677907
    Ying
    Staff
    Customer Support

    You could give this CSS a try:

    .woocommerce div.product .woocommerce-tabs ul.tabs::before {
        border-bottom: 1px solid #d3ced2;
    }
    .woocommerce div.product .woocommerce-tabs ul.tabs li {
        margin-left: 10px;
        border-radius: 5px 5px 0 0;
    }
    #1677916
    Dominique

    Perfect

    How about the double titles?

    #1677932
    Ying
    Staff
    Customer Support

    Try this:

    .single-product #tab-description h2 {
        display: none;
    }
    #1677989
    Dominique

    Everything is perfect

    Thanks

    #1678002
    Ying
    Staff
    Customer Support

    You are welcome πŸ™‚

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