[Resolved] Woocomerce Long Description – Columns without Page Builder – Possible ?

Home Forums Support Woocomerce Long Description – Columns without Page Builder – Possible ?

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #948746
    FunkyCss

    Hallo once again , and i am truly sorry that the last days i am opening so many tickets in a row , is that i just want to take everything out from Generatepress as i like it so much and i hope all this will help somebody else in the Future .

    So my final step in my Store is to make 2 columns in the Description area where is bellow the images .
    I want to do something similar like this one – https://tonymoly.us/collections/body/products/aloe-99-chok-chok-soothing-gel-1

    I was wondering if i can use the classes of GP for the layout inside Woocomerce Description and what that means , and if possible can i have the Classes ? is going to work ? or if i will use some div classes can i customize them with Css ? need to be mobile friendly .

    I can easily do that with a page builder , i have done it a million times , but i will feel a jerk for two columns to bring elementor in my site ! hah

    #948772
    FunkyCss

    Hi , so i find out how to create the columns from an older post , with the grid system is built inside GP. Very Nice !

    <div class="grid-container grid-parent">
          <div class="grid-50">
                First column
          </div>
          <div class="grid-50">
                Second column
          </div>
    </div>

    If i want to specify this for all woocomerce description , so i will have two columns ( copy paste this code ) and i will insert my text or my photo inside the columns ok .

    How can lets say i will give a border in the columns and how can i make it with a specific width like this one here https://tonymoly.us/collections/skin-concerns-hydration/products/the-chok-chok-green-tea-watery-skin .

    I mean i should wrap the container and give it a class ? i dont want the changes to display in whole site , but in the woocomerce description only !

    #949086
    Leo
    Staff
    Customer Support

    Hi there,

    The built-in grid system still works but I would highly recommend going with flexbox going forward.

    This shows an example of creating 3 columns:
    https://docs.generatepress.com/article/split-header-three-sections/

    Can you do this first and link me to the result and I’ll provide some suggestions on the CSS part?

    Let me know 🙂

    #949566
    FunkyCss

    Hallo Leo ! and thank you for your advice on flex , is better to make it with flex for what reason ?

    So i have created a demo take a loot the html

    <div class="header-section">
        <div class="header-section-1">
             <div class="inside-column2">
                        <h3>Heading 3</h3>
                        <h4>Heading 4</h4>
                        <p>paragraph paragraph paragraph paragraph paragraph paragraph  </p>
                 </div>
        </div>
    
        <div class="header-section-2">
                <div class="inside-column2">
                        <h3>Heading 3</h3>
                        <h4>Heading 4</h4>
                        <p>paragraph paragraph paragraph paragraph paragraph paragraph  </p>
                 </div>
        </div>
    
       
    </div>
    

    And the Css as you have shown

    .header-section {
        display: flex;
    }
    
    .header-section > div {
        width: 50%;
    }
    
    @media (max-width: 768px) {
        .header-section > div {
            width: 100%;
        }
    }
    #949570
    FunkyCss

    Is not responsive , i mean i must make the columns in mobile one below the other .

    And if is possible to tell me how i target now them and give some space and some border or whatever , i mean if you show me how to target them i will style it later .

    Thank you once again

    #949955
    Leo
    Staff
    Customer Support

    Flexbox is just the newer/better method.

    I don’t think you need the inside-column2 div but it’s up to you.

    The width: 100%; should make it responsive on mobile. Can you link me to the page so I can see why it isn’t working?

    You can target each section like

    .header-section-1 {
        color: #000;
    }
    #950410
    FunkyCss

    Hallo Leo

    Nice to Know about Flex , yes as i see is a trend now .

     <div class="header-section">
        <div class="header-section-1">
            
                <h3>Header 3 </h3>
                <h4>Header 4</h4>
                <p>a simple paragraph </p>
          
        </div>
    
        <div class="header-section-2">
               
                        <h3>Heading 3</h3>
                        <h4>Heading 4</h4>
                        <p>a simple paragraph.</p>
                
        </div>
    
       
    </div>

    My code for it

    #950582
    Leo
    Staff
    Customer Support

    Trying add this CSS as well:

    @media (max-width: 768px) {
        .header-section {
            flex-direction: column;
        }
    }
    #950640
    FunkyCss

    Hello Leo , Thanks i got it actually , it is not working fine but there probably be something i have not set up right , but i think i have found how it works and one more oportunity to learn some Flex , looks really cool actually , So i have to thank you twice.. 😉

    #950641
    Leo
    Staff
    Customer Support

    No problem 🙂

    Flexbox is cool for sure!

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