Home › Forums › WoodMart support forum › product archive style

product archive style

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • August 31, 2024 at 7:22 pm #594172

    apomberg
    Participant

    Hello,

    Im trying to change the product style a little but after a few hours of work i cant figure it out.

    I was able to divide the flex container into two parts, but i cant get the variables table below the image and description container.

    please see attached image for clarification.

    my code:
    .product-wrapper {
    display: flex !important; /* Apply flexbox layout */
    flex-direction: row !important; /* Align items in a row */
    align-items: flex-start !important; /* Align items to the top */
    justify-content: flex-start !important; /* Align children to start of the row */
    }

    .product-element-top {
    width: 50% !important; /* Image section takes 50% of the width */
    box-sizing: border-box !important; /* Include padding/border in the width */
    }

    .product-element-bottom {
    width: 50% !important; /* Bottom section takes the other 50% */
    padding-left: 20px !important; /* Space between image and text */
    box-sizing: border-box !important; /* Include padding/border in the width */
    display: flex !important;
    flex-direction: column !important; /* Align content vertically */
    justify-content: center !important; /* Center content vertically */
    }

    September 1, 2024 at 9:42 am #594216

    apomberg
    Participant

    .

    Attachments:
    You must be logged in to view attached files.
    September 2, 2024 at 2:21 pm #594493

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Can you please share the page URL so I will check and give you a possible solution.

    Best Regards

    September 16, 2024 at 9:47 am #597617

    apomberg
    Participant

    link

    September 16, 2024 at 2:36 pm #597718

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Unfortunately, it is not possible. HTML structure does not allow solving it by custom CSS. Such modification requires complicated Woocommerce code customization which is not covered by our support.

    Best Regards

    September 17, 2024 at 12:35 pm #597936

    apomberg
    Participant

    Ok. thank you for the information. can i add the short product description to the product archive style?

    i want it to be always displayed not only on hover.

    i have also attached a picture.

    https://www.contessa.si/shop/

    Attachments:
    You must be logged in to view attached files.
    September 17, 2024 at 4:55 pm #598029

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Navigate to Theme Settings > Product Archive > Product Styles > Choose the “show summary on hover” product style. Then show “excerpt” in the Hover content in the Theme Settings > Product Archives > Product Styles.

    This product style will show your short description on grid products.
    https://monosnap.com/file/swCqK6RIIrYuhoROH6YOkEfBjfPMKx

    If you have any questions feel free to contact us.

    Best Regards.

    September 18, 2024 at 8:34 am #598134

    apomberg
    Participant

    Thank you. But can i somehow display it on a non-hover optioned product style? I want the product style shown in the picture. can i add it via css so its shown ? Thank you

    September 18, 2024 at 8:55 am #598154

    apomberg
    Participant

    Nevermind. got it to work.
    if anybody has the same problem..just copy this to functions.php

    add_action(‘woocommerce_after_shop_loop_item_title’, ‘description_in_shop_loop_item’, 3 );
    function description_in_shop_loop_item() {
    global $product;

    // HERE define the number of characters
    $limit = 100;

    //$description = $product->get_description(); // Product description
    // or
    $description = $product->get_short_description(); // Product short description

    // Limit the characters length
    if (strlen($description) > $limit) {
    $excerpt = substr($description, 0, $limit) . ‘…’;
    } else {
    $excerpt = $description;
    }

    echo ‘<p class=”description”>’.$excerpt.'</p>’;
    }

    September 18, 2024 at 10:51 am #598211

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Glad you got it sorted! Thanks for sharing the solution—it’ll be helpful for others too. Let me know if you need further assistance.

    Thanks for contacting us.

    Have a great day.

    Best Regards

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

The topic ‘product archive style’ is closed to new replies.