[Resolved] Woocommerce Description Tabs – Move Under Short Description

Home Forums Support Woocommerce Description Tabs – Move Under Short Description

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #902172
    John

    Hello

    Hope you can help. Single Product page – No sidebars. The woo description tabs are all positioned on the left. (under Image) Client wants them under the Short description. (right hand side).

    Is there a fix for this? I believe they were under the short description until recently? Is there a default positioning.
    We have Custom Products Tab plugin installed.

    Thank you.

    John

    #902203
    Maria del Mar

    Hello John,
    I put with css in the customizer.
    .woocommerce #content div.product .woocommerce-tabs, .woocommerce div.product .woocommerce-tabs, .woocommerce-page #content div.product .woocommerce-tabs, .woocommerce-page div.product .woocommerce-tabs {
    clear: none !important;

    }

    #902240
    John

    Hi Maria, thank you. That worked. Tabs all move to the right under short description.

    However the description text begins to justify to the left below the picture after about 5 lines. Is it possible to keep this to the right too?

    It might be undesirable though if text is long?

    Thank you

    John

    #902385
    David
    Staff
    Customer Support

    Hi there,

    the default positioning for the Woo tabs is below the Gallery and Summary.
    If you can provide me access to the Site without the CSS then i can take a look.

    #902535
    John

    Hi David

    Thank you. That would be v helpful. At present I have not added the additional CSS provided above.

    John

    WP Access:

    #902537
    John

    Sorry, typo in the user name above. Corrected below.

    WP Access:

    #902546
    David
    Staff
    Customer Support

    So the tabs will sit below the summary to the side of the image?
    If so you could try this CSS:

    @media (min-width: 768px) {
        .woocommerce div.product {
            display: grid;
            grid-template-columns: 50% 50%;
        }
        .woocommerce #content div.product div.images {
            grid-column: 1;
            grid-row: 1 / 3;
            width: 95% !important;
        }
        .woocommerce #content div.product .related {
            grid-column: 1 /3;
        }
    }
    #902754
    John

    Hi David

    Brilliant. That works perfectly. All tabs appear on right hand side below the short description.

    Thank you very much. Great job. John

    #902762
    David
    Staff
    Customer Support

    Awesome – that was easy 🙂 Glad to be of help

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